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>
相关推荐
我要洋人死5 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人17 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人17 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR23 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香25 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969328 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai33 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91542 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#