web前端练习一

1.电子汇款单

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子汇款单</title>
</head>
<body>
    <h2>工商银行电子汇款单</h2>
    <table border="1px">
        <tr>
            <th colspan="2">回单类型</th>
            <!-- <td></td> -->
            <td width="280">网上转账汇款</td>
            <th colspan="2">指令序号</th>
            <!-- <td></td> -->
            <td width="280">HQH000000000000013878172&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        </tr>
        <tr>
            <th rowspan="4">收&nbsp;<br>款&nbsp;<br>人&nbsp;</th>
            <td>户名</td>
            <td>老牟</td>
            <th rowspan="4">付&nbsp;<br>款&nbsp;<br>人&nbsp;</th>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <th>卡号</th>
            <td>0000000001</td>
            <!-- <td></td> -->
            <th>卡号</th>
            <td>0000000002</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <td>地区</td>
            <td>南京</td>
            <!-- <td></td> -->
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <!-- <th></th> -->
            <th>网点</th>
            <td>工商江苏南京业务处理中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <!-- <td></td> -->
            <th>网点</th>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <th colspan="2">币种</th>
            <!-- <td></td> -->
            <td>人民币</td>
            <th colspan="2">钞汇标志</th>
            <!-- <td></td> -->
            <td><u>钞票</u></td>
        </tr>
        <tr>
            <th colspan="2">金额</th>
            <!-- <td></td> -->
            <td>1.00元</td>
            <th colspan="2">手续费</th>
            <!-- <td></td> -->
            <td>0.57元</td>
        </tr>
        <tr>
            <th colspan="2">合计</th>
            <!-- <td></td> -->
            <td colspan="4">人民币(大写):壹园整</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <th colspan="2">交易时间</th>
            <!-- <td></td> -->
            <td><i>2017年6月1日</i></td>
            <th colspan="2">时间戳</th>
            <!-- <td></td> -->
            <td><i>2017-06-01-13.00.00. 00000</i></td>
        </tr>
    </table>
    &nbsp;<br>
    <h7>票据打印时间:2017-06-01 15:00:12</h7><br>
    &nbsp;<br>
    <s><h7>票据打印单位:江苏徐州业务中心</h7></s><br>
    &nbsp;<br>
    <h7>操作员:大曾</h7>
    </table>
</body>
</html>

2.将进酒

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将进酒</title>
</head>
<body>
    <b><span style="font-size: 40px;">将进酒</span></b>
    <b><span style="font-size: 33px;">君不见黄河之水天上来</span></b><br>
    <a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fr=ge_ala" title="点击了解李白更多">
        <img src="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/9ac61cb655c84cf29e7a97c871804fc1?from=pc" 
        width="500" height="560" align="left"></a>
    &nbsp;<br>
    &nbsp;<br>
    <div>&nbsp;君不见黄河之水天上来,奔流到海不复回。</div>&nbsp;<br>
    <div>&nbsp;君不见高堂明镜悲白发,朝如青丝暮成雪。</div>&nbsp;<br>
    <div>&nbsp;人生得意须尽欢,莫使金樽空对月。</div>&nbsp;<br>
    <div>&nbsp;天生我材必有用,千金散尽还复来。</div>&nbsp;<br>
    <div>&nbsp;烹羊宰牛且为乐,会须一饮三百杯。</div>&nbsp;<br>
    <div>&nbsp;岑夫子,丹丘生,将进酒,杯莫停。</div>&nbsp;<br>
    <div>&nbsp;与君歌一曲,请君为我倾耳听。</div>&nbsp;<br>
    <div>&nbsp;钟鼓馔玉不足贵,但愿长醉不复醒。</div>&nbsp;<br>
    <div>&nbsp;古来圣贤皆寂寞,惟有饮留其名。</div>&nbsp;<br>
    <div>&nbsp;陈王昔时宴平乐,斗酒十千恣欢谑。</div>&nbsp;<br>
    <div>&nbsp;主人何为言少钱,仅须沽取对君酌。</div>&nbsp;<br>
    <div>&nbsp;五花马,千金裘,</div>&nbsp;<br>
    <div>&nbsp;呼儿将出换美酒,五二同销万古愁。</div>&nbsp;<br>
</body>
</html>

3.电影模块

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影板块</title>
</head>
<body>
    <h2>热门电影模块</h2><hr>
    <table>
        <tr>
            <td width="200"><b>最近热门电影</b></td>
            <td width="90">热门</td>
            <td width="90">最新</td>
            <td width="120">豆瓣高分</td>
            <td width="150">冷门佳作</td>
            <td width="90">华语</td>
            <td width="90">欧美</td>
            <td width="90">欧美</td>
            <td width="90">韩国</td>
            <td width="300">日本</td>
            <td width="90">更多&lt;&lt;</td>
        </tr>
    </table><hr>
    <table width="1250">
        <tr>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
        </tr>
        <tr>
            <td height="45">猜火车 8.1</td>
            <td>贝尔实验 6.0</td>
            <td>加州公路巡警 6.8</td>
            <td>歌声不绝 6.3</td>
        </tr>
        <tr>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
            <td width="302"><img src="../04.图片音频视频标签/image/古风.jpg" width="306" height="200"></td>
        </tr>
        <tr>
            <td height="45">明日的我与昨日的你 7.5</td>
            <td>激情与速度8 8.1</td>
            <td>极速特工 6.4</td>
            <td>金刚狼3:殊死一战 7.6</td>
        </tr>
    </table>
</body>
</html>

4.用户注册页面

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>   
    <form action="https:www.baidu.com" method="post">
        <table align="center">
            <tr>
                <td colspan="2" align="center"><h3>用户注册</h3></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>用户名:</td>
                <td><p><input type="text" name="username"></p></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><p><input type="password" name="password"></p></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <p>
                        <input type="radio" name="gender" value="男">男    
                        <input type="radio" name="gender" value="女">女             
                    </p>
                </td>
            </tr>
            <tr>
                <td>省份:</td>
                <td>
                    <select name="provice">
                        <option value="provice1" selected="">广东省</option>
                        <option value="provice2">陕西省</option>
                        <option value="provice3">湖北省</option>
                        <option value="provice4">江西省</option>
                        <option value="provice5">辽宁省</option>
                        <option value="provice6">四川省</option>
                        <option value="provice7">山东省</option>
                        <option value="provice8">吉林省</option>
                        <option value="provice9">......</option>
    
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <p>
                        <input type="checkbox" name="hobby" value="唱">唱
                        <input type="checkbox" name="hobby" value="跳">跳
                        <input type="checkbox" name="hobby" value="rap">rap
                        <input type="checkbox" name="hobby" value="篮球">篮球
                        <input type="checkbox" name="hobby" value="其他">其他
                    </p>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><p><input type="email" name="email" id=""></p></td>
            </tr>
            <tr>
                <td>联系电话:</td>
                <td><p><input type="text" name="phone" id=""></p></td>
            </tr>
                <td>入职时间:</td>
                <td>
                    <p>
                        <input type="date" name="date">
                    </p>
                </td>
            </tr>
            <tr>
                <td>离职时间:</td>
                <td>
                    <p>
                        <input type="date" name="date">
                    </p>
                </td>
            </tr>
            <tr>
                <td>自我介绍:</td>
                <td><textarea name="introduce" cols="30" rows="5">请输入100字左右</textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <p>
                        <input type="reset">
                        <input type="submit" value="提交">
                    </p>
                </td>
                <!-- <td></td> -->
            </tr>
        </table>
    </form>
</body>
</html>
相关推荐
Qrun29 分钟前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp30 分钟前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.1 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl3 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫5 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友5 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理7 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻7 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
mapbar_front8 小时前
在职场生存中如何做个不好惹的人
前端
牧杉-惊蛰8 小时前
纯flex布局来写瀑布流
前端·javascript·css