web前端练习一

ANCHG_2024-03-13 22:52

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>
相关推荐
拾光拾趣录3 分钟前
for..in 和 Object.keys 的区别：从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区14 分钟前
把 SearchBox 塞进项目，搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠43 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门（九）Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案，优雅实现记住表单历史搜索记录！
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件，集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04全球最强模型Grok4，国内已可免费使用！（附教程）05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致