用html制作表单、汇款单、诗词、电源网页设计

于 2024-07-06 22:45:54 发布
阅读量200 收藏
点赞数 3
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZKKKRTSAE/article/details/140237039
版权

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="https://www.jd.com" method="post">
    <table border="1px" align="center" width="300px" height="300px" frame="void">
        <tr bgcolor="grey">
            <td colspan="2" align="center">用户注册</td>
        </tr>
        
        <tr bgcolor="silver">
            <td align="right">用户名</td>
            <td align="left"><input type="text" name="UserName" maxlength="20"></td>
        </tr>

        <tr bgcolor="silver">
            <td align="right">密码</td>
            <td align="left"><input type="password" name="UserPass" maxlength="20"></td>
        </tr>

        <tr bgcolor="silver">
            <td align="right">性别</td>
            <td align="left"><input type="radio" name="sex" value="1" checked>男
                <input type="radio" name="sex" value="0">女</td>
        </tr>

        <tr bgcolor="silver">
            <td align="right">爱好</td>
            <td align="left"><input type="checkbox" name="like" value="write">写作
            <input type="checkbox" name="like" value="music">听音乐
            <input type="checkbox" name="like" value="PE">体育</td>
        </tr>

        <tr bgcolor="silver">
            <td align="right">省份</td>
            <td align="left"><select name="province">
                <option value="shaanxi">陕西省</option>
                <option value="shanx">山西省</option>
                <option value="湖南省">湖南省</option>
                <option value="湖北省">湖北省</option>
                <option value="二次元">二次元</option>
            </select></td>
        </tr>

        <tr bgcolor="silver">
                <td align="right">自我介绍</td>
                <td align="left"><textarea name="intro" cols="25" rows="5" placeholder="这个家伙什么也没留下"></textarea></td>
        </tr>

        <tr bgcolor="grey">
            <td align="center" colspan="2"><input type="submit" name="send" value="提交">
                <button type="reset" name="reset">重置</button></td>
        </tr>
    </table>
    </form>
</body>
</html>

_____________________________________________________________________________

汇款单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
    <table border="1px" width="1100px" height="400px" align="left">
        <thead>
            <tr>
                <th colspan="2" align="left">回单类型</th>
                <td>网上转账汇款</td>
                <th colspan="2" align="left">指令符号</th>
                <td colspan="3">HQH0000000000000013878172</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th rowspan="4" width="20px">收<br>款<br>人</th>
                <td>户名</td>
                <td>老子</td>
                <th rowspan="4" width="20px">付<br>款<br>人</th>
                <td>户名</td>
                <td>老六</td>
            </tr>

            <tr>
                <th align="left">卡号</th>
                <td>0000000000001</td>
                <th align="left">卡号</th>
                <td>0000000000002</td>
            </tr>

            <tr>
                <td>地区</td>
                <td>南京</td>
                <td>地区</td>
                <td>杭州</td>
            </tr>

            <tr>
                <th align="left">网点</th>
                <td>工商江苏南京业务处理中心</td>
                <th align="left">网点</th>
                <td>江苏徐州业务中心</td>
            </tr>

            <tr>
                <th align="left" colspan="2">币种</th>
                <td>人民币</td>
                <th align="left" colspan="2">钞汇标志</th>
                <td colspan="3">钞票</td>
            </tr>

            <tr>
                <th colspan="2" align="left">金额</th>
                <td>1.00元</td>
                <th colspan="2" align="left">手续费</th>
                <td>0.57元</td>
            </tr>

            <tr>
                <th colspan="2" align="left">合计</th>
                <td colspan="4">人民币（大写）：壹元整</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th align="left" colspan="2">交易时间</th>
                <td>2017年6月1日</td>
                <th align="left" colspan="2">时间戳</th>
                <td>2017-06-01 13.00.00. 0000</td>
            </tr>
        </tfoot>
    </table>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <P>票据打印时间：2017-06-01 15：00：12</P>
    <p><del>票据打印单位：江苏徐州业务中心</del></p>
    <P>操作员：大王</P>
</body>
</html>

_____________________________________________________________________________

诗词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李白诗词</title>
</head>
<body>
    <big><big><b>将进酒</b></big></big> <big><b>君不见黄河之水天上来</b></big>
    <br>
    <table>
        <tr>
            <td><img width="175px" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.srqFXYmqdsmH5dRX3kkKTwHaH5?w=200&h=213&c=7&r=0&o=5&dpr=2&pid=1.7" alt="获取图片失败"></td>
            <td>
                <pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，
呼儿将出换美酒，与尔同销万古愁。
                </pre>
            </td>
        </tr>
    </table>
</body>
</html>

———————————————————————————————————————————

电源网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣电影</title>
</head>
<body>
    <h1>热门电影板块</h1>
    <hr>
    <table width="1200">
        <tr>
            <th align="left">最近热门电源</th>
            <td>热门</td>
            <td>最新</td>
            <td>豆瓣高分</td>
            <td>冷门佳片</td>
            <td>华语</td>
            <td>欧美</td>
            <td>韩国</td>
            <td>日本</td>
            <td align="right">更多>></td>
        </tr>
    </table>
    <hr>
    <table width="500px" height="200px">
        <tr>
            <td><img width="300px" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p513567548.webp" alt="获取图片失败"></td>
            <td><img width="300px" src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2410846893.webp" alt="获取图片失败"></td>
            <td><img width="300px" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2464030020.webp" alt="获取图片失败"></td>
            <td><img width="300px" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2430385341.webp" alt="获取图片失败"></td>
        </tr>

        <tr height="50px">
            <td>猜火车 8.1</td>
            <td>贝尔科实验 6.0</td>
            <td>加州公路巡警 6.8</td>
            <td>歌声不绝 6.3</td>
        </tr>

        <tr>
            <td><img width="300px" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2390682054.webp" alt="获取图片失败"></td>
            <td><img width="300px" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2444256500.webp" alt="获取图片失败"></td>
            <td><img width="300px" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.1NO_xxRf65ckIKUosTrjOwHaKg?w=117&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="获取图片失败"></td>
            <td><img width="300px" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2445529009.webp" alt="获取图片失败"></td>
        </tr>

        <tr height="50px">
            <td>明日的我与昨日的我</td>
            <td>速度与激情8</td>
            <td>疾速特攻</td>
            <td>金刚狼3：殊死一战</td>
        </tr>
    </table>
</body>
</html>

ZZZKKKRTSAE
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值