web前端作业

作业1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
     <style>
#a{
  background-color:rgb(191, 183, 183);
  text-align: center;
}

#c{
  background-color: rgb(191, 183, 183);
  text-align: center;
}
[id*="b"]{
  background-color: rgb(214, 207, 207);
}
     </style>

</head>
<body>
    <table border="1px" align="center" id="a" width="474px">
        <tr>
            <td>用户注册</td>
        </tr>
    </table>

    <table border="1px" align="center" id="b">
        <tr>
          <td width="150px" align="right" id="b1">
                用户名
          </td>

          <td width="270px">
            <form action="https:www.baidu.com" method="post">
                <input type="text" name="用户名">
            </form>
          </td>
        </tr>

        <tr>
            <td width="150px" align="right" id="b2">
                密码
            </td>
  
            <td width="270px">
              <form action="https:www.baidu.com" method="post">
                  <input type="password" name="用户名">
              </form>
            </td>
          </tr>

        <tr>
            <td width="150px" align="right" id="b3">
                性别
            </td>
          <td width="270px">
            <form action="https:www.baidu.com" method="post">
               <label> <input type="radio" name="sex" value="男" checked>男</label>
               <label><input type="radio" name="sex" value="女" >女</label>
            </form>
          </td>
        </tr>
        <tr>
            <td width="150px" align="right" id="b4">
                爱好
            </td>
          <td width="270px">
             <form action="https:www.baidu.com" method="post">
             <label><input type="checkbox" name="爱好" value="写作">写作</label>
             <label><input type="checkbox" name="爱好" value="听音乐">听音乐</label>
             <label><input type="checkbox" name="爱好" value="体育">体育</label>
        </form>
    </td>
        </tr>
        <tr>
            <td width="150px" align="right" id="b5">
                省份
            </td>
          <td width="270px">
            <form action="https:www.baidu.com" method="post">
                <select name="省份" id="">
               <option value="陕西省">陕西省</option>
               <option value="山西省">山西省</option>
               <option value="云南省">云南省</option>
            </select>
            </form>
          </td>
        </tr>
        <tr height="50px">
            <td width="150px" align="right" id="b6">
                自我介绍
            </td>
          <td width="270px">
            <form action="https:www.baidu.com" method="post">
                  <textarea name="自我介绍" id="" cols="40" rows="8"></textarea>
            </form>
          </td>
        </tr>
    </table>
    <table border="1px" align="center" id="c" width="474px">
        <tr>
            <td>
               <button type="submit" >提交</button>
               <input type="reset">
            </td>
        </tr>
    </table>
</body>
</html>

 运行结果:

 作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
    <style>
        .a{
            font-size: 30px;
        }

        .c{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <table class="a">
        <tr>
            <th>工商银行电子汇款单</th>
        </tr>
    </table>
    <br>
    <table border="1px" width="1000px" height="50px">
        <tr>
            <th align="left" colspan="2">回单类型</th>
            <!-- <th></th> -->
            <td> 网上转款记录</td>
            <th align="left" colspan="2">指令序号</th>
            <!-- <th></th> -->
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4">收款人</td>
            <td align="left">户名</td>
            <td>老牟</td>
            <td rowspan="4">付款人</td>
            <td align="left">户名</td>
            <td>老刘</td>
        </tr>

        <tr>
            <!-- <td></td> -->
            <th align="left">卡号</th>
            <td>00000000001</td>
            <!-- <td></td> -->
            <th align="left">卡号</th>
            <td>00000000002</td>
        </tr>
        
        <tr>
            <!-- <td></td> -->
            <td align="left">地区</td>
            <td>南京</td>
            <!-- <td></td> -->
            <td align="left">地区</td>
            <td>杭州</td>
        </tr>
        
        <tr>
            <!-- <td></td> -->
            <th align="left">网点</th>
            <td>工商江苏南京业务服务中心</td>
            <!-- <td></td> -->
            <th align="left">网点</th>
            <td>江苏徐州业务中心</td>
        </tr>

        <tr>
            <th align="left" colspan="2">币种</th>
            <!-- <th></th> -->
            <td> 人民币</td>
            <th align="left" colspan="2">炒汇标志</th>
            <!-- <th></th> -->
            <td>钞票</td>
        </tr> <tr>
            <th align="left" colspan="2">金额</th>
            <!-- <th></th> -->
            <td> 1.00元</td>
            <th align="left" colspan="2">手续费</th>
            <!-- <th></th> -->
            <td>0.57</td>
        </tr>
        <tr>
            <th align="left" colspan="2">合计</th>
            <!-- <th></th> -->
            <td colspan="4"> 人民币(大写):壹元整</td>
            <!-- <th></th>
              <th></th>
            <td></td> -->
        </tr>
        <tr>
            <th align="left" colspan="2">交易时间</th>
            <!-- <th></th> -->
            <td> 2017年6月1日</td>
            <th align="left" colspan="2">时间戳</th>
            <!-- <th></th> -->
            <td>2017-06-01-13.00.00.00000</td>
        </tr>

    </table>
    <br>
    <table class="b">
        <tr>
            <th>票据打印时间:2017-06-01 15:00:12</th>
        </tr>
    </table>
    <br>
     <table class="c">
        <tr>
            <th>票据打印单位:江苏徐州业务中心</th>
        </tr>
    </table> 
    <br>
    <table class="d">
        <tr>
            <th>操作员:大曾</th>
        </tr>
    </table>
</body>
</html>

 运行结果:

作业3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{
            display: inline;

        }
        .a2{
            font-size: 25px;
            display: inline;
            margin: 20px;
        }
.a34{
    position: relative;
    top: 100px;
}
        .a3,.a4{
            float: left;
            margin: auto;
        }
        .a3{
            width: 400px;
            height: 500px;
            /* border: 1px solid red; */
            margin:10px 100px 10px 10px;
            background-image: url(./屏幕截图\ 2024-07-08\ 183425.png);
        }
      
        .a4{
            
            /* border: 1px solid red; */
            width: 400px;
            height: 500px;
            list-style: none;
          display: inline-block;
            
            
        }

    </style>
</head>
<body>
        <h1 class="a1">将进酒</h1>
        <span class="a2">君不见黄河之水天上来</span>
        <span></span>
        <div class="a34">
        <div class="a3"></div>
       <div class="a4">
<li>君不见,黄河之水天上来,奔流到海不复回。</li>
<br>
<li>君不见,高堂明镜悲白发,朝如青丝暮成雪。</li>
<br>
<li>人生得意须尽欢,莫使金樽空对月。</li>
<br>
<li>天生我材必有用,千金散尽还复来。</li>
<br>
<li>烹羊宰牛且为乐,会须一饮三百杯。</li>
<br>
<li>岑夫子,丹丘生,将进酒,杯莫停。</li>
<br>
<li>与君歌一曲,请君为我倾耳听。</li>
<br>
<li>钟鼓馔玉不足贵,但愿长醉不复醒。</li>
<br>
<li>古来圣贤皆寂寞,惟有饮者留其名。</li>
<br>
<li>陈王昔时宴平乐,斗酒十千恣欢谑。</li>
<br>
<li>主人何为言少钱,径须沽取对君酌。</li>
<br>
<li>五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。</li>
</div>
        </div>
</body>
</html>

 运行结果

作业4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        .a1{
            width: 1000px;
            height: 80px;
            display: inline-block;
        }
        .b2{
            margin: 10px 10px 10px 40px;
        }
        .b4{
            margin: 10px 30px 10px 10px;
        }
        .b6{
            margin: 10px 10px 10px 30px;
        }
        .b8{
            margin: 10px;
        }
        .b10{
            margin:10px 10px 10px 60px;
        }
        h2,li{
            display: inline-block;
        }

    .a{
        width: 60%;
        height: 800px;  
        /* border: 1px solid red; */
        display: inline-block;
    }

    ul>li{
        width: 20%;
        height: 350px;
        /* border: 1px solid red; */
    }
     </style>
</head>
<body>
    <div>
    <span><h1>热门电影板块</h1></span>
</div>
    <hr>
    <div class="a1">
        <h2 class="b1">最近热门电影</h2>
        <li class="b2">热门</li>
        <li class="b3">最新</li>
        <li class="b4">豆瓣高分</li>
        <li class="b5">冷门佳片</li>
        <li class="b6">华语</li>
        <li class="b7">欧美</li>
        <li class="b8">韩国</li>
        <li class="b9">日本</li>
        <li class="b10">更多>></li>
    </div>
<hr>
    <div class="a">
        <ul class="b">
            <li class="b1">
                <div class="img">
                     <img src="./img.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">猜火车 8.1</span>
                </div>
            </li>
            <li class="b2">
                <div class="img">
                     <img src="./贝尔.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">贝尔科实验 6.0</span>
                </div>
            </li>
            <li class="b3">
                <div class="img">
                     <img src="./加.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">加州公路巡警 6.8</span>
                </div>
            </li>
            <li class="b4">
                <div class="img">
                     <img src="./歌声.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">歌声不绝 6.3</span>
                </div>
            </li>
            <li class="b5">
                <div class="img">
                     <img src="./明.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">明日的我与昨日的我</span>
                </div>
            </li>
            <li class="b6">
                <div class="img">
                     <img src="./速度.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">速度与激情8</span>
                </div>
            </li>
            <li class="b7">
                <div class="img">
                     <img src="./极速.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">极速特工</span>
                </div>
            </li>
            <li class="b1">
                <div cla8s="img">
                     <img src="./金.png" alt="">
                </div>
                <div class="name">
                    <span class="name1">金刚狼:殊死一战</span>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

运行结果

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值