初学web前端

作业一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        td{
            width: 100px;
            height: 25px;
        }
        thead td{
            background-color: #ccc;
        }
        tbody td{
            background-color: #ddd;
        }
        tfoot td{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <form method="get">
        <table>
            <thead>
                <tr>
                    <td colspan="2" align="center">用户注册</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="用户名"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" password="密码"></td>   
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="性别">男
                        <input type="radio" name="性别">
                    </td>
                    </tr>
                    <tr>
                    <tr>爱好</tr>
                    <td>
                    <td><input type="checkbox" name="写作"></td>
                    <td><input type="checkbox" name="听音乐"></td>
                    <td><input type="checkbox" name="体育"></td>
                </td>
                </tr>
                <tr>
                    <td>省份</td>
                    <td>
                        <select name="省份">
                            <option value="四川">四川</option>
                            <option value="新疆">新疆</option>
                            <option value="陕西">陕西</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td><textarea name="自我介绍" cols="30" rows="10"></textarea></td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit">
                            <input type="reset">
                        </td>
                    </tr>
                </tfoot>
        </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>
<style>
    td{
        height: 15px;
        width: 200px;
        font-size: 20px;
        padding: 10px;
    }
    .one{
        width: 350px;
    }
    .two{
        width: 5px;
    }
</style>
</head>
<body initial-scale="100%">
    <div>
        <div class="top">
            <h1>工商银行电子汇款单</h1>
        </div>
        <div>
            <table border="1px" cellspacing="0">
                <tr>
                    <td colspan="2">
                      <h3>回单类型</h3>
                    </td>
                    <td class="one">
                        网上转账汇款
                    </td>
                    <td colspan="2">
                        <h3>指令序号</h3>
                    </td>
                    <td class="one">
                        HQH0000000000000013878172
                    </td>
                </tr>
 
                <tr>
                    <td rowspan="4" class="two">
                        <h3>收款人</h3>
                    </td>
                    <td>
                        户名
                    </td>
                    <td class="one">
                        老大
                    </td>
                    <td rowspan="4" class="two">
                        <h3>付款人</h3>
                    </td>
                    <td>
                         户名
                    </td>
                    <td class="one">
                        老二
                    </td>
                </tr>
 
                <tr>
 
 
                    <td>
                        <h3>卡号</h3>
                    </td>
                    <td class="one">
                        000000000001
                    </td>
 
                    <td>
                        <h3>卡号</h3>
                    </td>
                    <td class="one">
                        000000000002
                    </td>
                </tr>
 
                <tr>
 
                    <td>
                        地区
                    </td>
                    <td class="one">
                        陕西
                    </td>
 
                    <td>
                        地区
                    </td>
                    <td class="one">
                        西安
                    </td>
                </tr>
 
                <tr>
 
                    <td>
                        <h3>网点</h3>
                    </td>
                    <td class="one">
                        工商陕西西安业务处理中心
                    </td>
 
                    <td>
                        <h3>网点</h3>
                    </td>
                    <td class="one">
                        陕西延安业务中心
                    </td>
                </tr>
                    
                <tr>
                    <td colspan="2">
                       <h3>币种</h3>
                    </td>
                    <td class="one">
                        人民币
                    </td>
                    <td colspan="2">
                        <h3>钞汇标志</h3>
                    </td>
                    <td class="one">
                        钞票
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <h3>金额</h3>
                    </td>
                    <td class="one">
                        1.00元
                    </td>
                    <td colspan="2">
                        <h3>手续费</h3>
                    </td>
                    <td class="one">
                        0.57元
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <h3>合计</h3>
                    </td>
                    <td colspan="4">
                        人民币(大写):壹元整
                    </td>
                </tr>
 
                <tr>
                    <td colspan="2">
                        <h3>交易时间</h3>
                    </td>
                    <td class="one">
                        <i>2024年7月1日</i>
                    </td>
                    <td colspan="2">
                        <h3>时间戳</h3>
                    </td>
                    <td class="one">
                       <i>2024-07-01-13.00.00,00000</i>
                    </td>
                </tr>
            </table>
        </div>
    </div>
        <p>票据打印时间:2024-07-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>
 <h1>将进酒 <small>君不见黄河之水天上来</small></h1>
 <table>       
 <td><img src="https://ts1.cn.mm.bing.net/th/id/R-C.970a46a72448009ba29be752382b6b18?rik=SbztlOUDEO4%2bgQ&riu=http%3a%2f%2fimg.ifeng.com%2fres%2f200710%2f1029_213567.jpg&ehk=dum6UIWDDJlyK6V%2f%2fX%2bZWYyl1aW1ozoAk0UW%2blzSWeE%3d&risl=&pid=ImgRaw&r=0" alt='' width="150"
 height="200"></td>    
                   <td><p>
                          君不见黄河之水天上来,奔流到海不复回。<br>
                          君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
                          人生得意须尽欢,莫使金樽空对月。<br>
                          天生我材必有用,千金散尽还复来。<br>
                          烹羊宰牛且为乐,会须一饮三百杯。<br>
                          岑夫子,丹丘生,将进酒,杯莫停。<br>
                          与君歌一曲,请君为我侧耳听。<br>
                          钟鼓馔玉不足贵,但愿长醉不复醒。<br>
                          古来圣贤皆寂真,惟有饮者留其名。<br>
                          陈王昔时宴平乐,斗酒十干恣欢谑。<br>
                          主人何为言少钱,径须沽取对君酌。<br>
                          五花马,千金裘,<br>
                          呼儿将出换美酒,与尔同销万古愁。<br></p></td>
                    </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>
    <style>
        td{
            width: 80px;
        }
        img{
            width: 200px;
            height: 290px;
        }
    </style>
</head>
<body>
    <div>
        <div class="top">
        <h1>
            喵的大白兔电影
        </h1>
        </div>
    <hr>
    <div class="mid">
        <table>
            <tr>
                <td style="width: 200px;">
                <h3>最近热门电影</h3>
                </td>
                <td>
                    动作
                </td>
                <td>
                    爱情
                </td>
                <td style="width: 100px;">
                喜剧
                </td>
                <td style="width: 100px;">
                科幻
                </td>
                <td>
                    恐怖
                </td>
                <td>
                    战争
                </td>
                <td>
                    犯罪
                </td>
                <td style="width: 250px;">
                历史
                </td>
                <td>
                    更多>>
                </td>
            </tr>
        </table>
        <hr>
        <div>
            <table>
                <tr>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/942761_5ZIZ_wm0Q_GW_k3_1721569717/0">
                            <p>泳者之心</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://img-nos.yiyouliao.com/alph/8018e49cd581b3809fcd27bc20a6c9dd.jpeg?yiyouliao_channel=msn_image">
                            <p>默杀</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/256062_B_OjJtXjRy6bc_k_1721226411/0">
                            <p>黑夜谜踪</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/888082_tc-BN5egSx-Q-YG_1721544018/0">
                            <p>谈判专家</p>
                        </div>
                    </td>
                </tr>
 
                <tr>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/545373_V3okmyeTQzyo09f_1721437561/0">
                            <p>死人</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/183340_vLg3FNjEQaOWP7Q_1721227679/0">
                            <p>加菲猫家族</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/49617_sIFdEbrrTmO6W-p_1721632458/0">
                            <p>走走停停</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://wework.qpic.cn/wwpic3az/204989_sL8QkZlPSReAAko_1721835185/0">
                            <p>尸体沐浴</p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

页面展示;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值