web第一次作业

发布时间：2024年01月11日

题1：

<form action="#" method="post">
  <table>
    <tr>
      <td>用户名：</td>
      <td><input type="text" name="UserName" maxlength="20" size="15"></td>
    </tr>
    <tr>
      <td>密码：</td>
      <td><input type="password" name="UserPass" maxlength="20" size="15"></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td><input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女</td>
    </tr>
    <tr>
      <td>爱好：</td>
      <td><input type="checkbox" name="like" value="写作">写作
        <input type="checkbox" name="like" value="听音乐">听音乐
        <input type="checkbox" name="like" value="体育">体育</td>
    </tr>
    <tr>
      <td>省份：</td>
      <td><select name="province">
          <option value="shaanxi" selected>陕西省</option>
          <option value="shanx">山西省</option>
        </select></td>
    </tr>
    <tr>
      <td>自我介绍：</td>
      <td><textarea name="intro" rows="5" cols="25">这个家伙什么也没留下</textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="send" value="提交">
        <input type="reset" name="reset" value="重置"></td>
    </tr>
  </table>
</form>

运行结果：

题目2：

<!DOCTYPE html>
<html>
<head>
  <title>将进酒</title>
  <style>
    h1 {
      font-weight: bold;
    }
    h5 {
      font-family: Arial, sans-serif;
      line-height: 2.8; /* 调整行高 */
    }
    img {
      float: left;
      margin-right: 10px;
      vertical-align: top;
    }
    .poem-container {
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>将进酒</h1>
  <img src="li_bai.png" alt="李白的图片">
  <h5>
    君不见，黄河之水天上来，奔流到海不复回。<br>
    君不见，高堂明镜悲白发，朝如青丝暮成雪。<br>
    人生得意须尽欢，莫使金樽空对月。<br>
    天生我材必有用，千金散尽还复来。<br>
    烹羊宰牛且为乐，会须一饮三百杯。<br>
    岑夫子，丹丘生，将进酒，杯莫停。<br>
    与君歌一曲，请君为我倾耳听。<br>
    钟鼓馔玉不足贵，但愿长醉不复醒。<br>
    古来圣贤皆寂寞，惟有饮者留其名。<br>
    陈王昔时宴平乐，斗酒十千恣欢谑。<br>
    主人何为言少钱，径须沽取对君酌。<br>
    五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br>
  </h5>
</body>
</html>

运行结果：

题目3：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>工商银行电子汇款单</title>
  <style>
    table {
      border-collapse: collapse;
      margin: 20px;
    }
    
    caption {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    th, td {
      padding: 10px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tfoot td:nth-child(odd) {
      background-color: #f2f2f2;
    }
    
    tfoot td:nth-child(even) {
      text-align: right;
      font-weight: bold;
    }
    
    tfoot tr:first-child td {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table width="1000" border="1" cellspacing="0">
    <caption><h1>工商银行电子汇款单</h1></caption>
    <thead>
      <tr>
        <th colspan="2">回单类型</th>
        <th>网上转账汇款</th>
        <th colspan="2">指令序号</th>
        <th>HQH0000000000000013878172</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="4">收款人</td>
        <th>户名</th>
        <td>老牟</td>
        <td rowspan="4">付款人</td>
        <th>户名</th>
        <td>老刘</td>
      </tr>
      <tr>
        <th>卡号</th>
        <td>000000000001</td>
        <th>卡号</th>
        <td>000000000002</td>
      </tr>
      <tr>
        <th>地区</th>
        <td>南京</td>
        <th>地区</th>
        <td>杭州</td>
      </tr>
      <tr>
        <th>网点</th>
        <td>工商江苏南京业务处理中心</td>
        <th>网点</th>
        <td>江苏徐州业务中心</td>
      </tr>
      <th colspan="2">币种</th>
      <td>人民币</td>
      <th colspan="2">秒汇标志</th>
      <td>钞票</td>
      </tr>
      <tr>
      <th colspan="2">金额</th>
      <td >1000000.00元</td>
      <th colspan="2">手续费</th>
      <td >100</td>
      </tr>
      <tr>
      <th colspan="2">合计</th>
      <td colspan="4">人民币(大写) : 壹佰万元整</td>
      </tr>
      <tr>
      <th colspan="2">时间</th>
      <td>2017年6月1日</td>
      <th colspan="2">时间戳</th>
      <td>江苏徐州业务中心</td>
      </tr>
     
    </tbody>
  </table>
  <p>票据打印时间: 2017-06-01 15:00:12</p>
<p><del>票据打印单位: 江苏徐州业务中心</del></p>
<p>操作员：大曾</p>

</body>
</html>

运行结果：

题目4：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>热门电影板块</title>
  <style>
    .movies-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .movie {
      width: 200px;
      margin: 10px;
      text-align: center;
    }
    .movie img {
      width: 100%;
      height: auto;
    }
    .movie-name {
      margin-top: 5px;
    }
    hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: none;
  height: 1px;
  background-color: black;
}
p:nth-of-type(2n) {
      margin-top: 30px;
}
  </style>
</head>
  <h1>热门电影板块</h1>
  <hr>
<p>
<span class="underline">最近电影</span>
    <span class="underline">热门</span>
    <span class="underline">最新</span>
    <span class="underline">豆瓣高分</span>
    <span class="underline">冷门佳片</span>
    <span class="underline">华语</span>
    <span class="underline">欧美</span>
    <span class="underline">韩国</span>
    <span class="underline">日本</span>
    <span class="underline">更多>></span>
    </p>
  <hr>
  <div class="movies-container">
    <div class="movie">
      <img src="movie1.png" alt="电影1">
      <div class="movie-name">猜火车 8.1</div>
    </div>
    <div class="movie">
      <img src="movie2.png" alt="电影2">
      <div class="movie-name">贝尔科的实验 6.0</div>
    </div>
    <div class="movie">
      <img src="movie3.png" alt="电影3">
      <div class="movie-name">加州公路巡警 6.8</div>
    </div>
    <div class="movie">
      <img src="movie4.png" alt="电影4">
      <div class="movie-name">歌声不绝 6.3</div>
    </div>
    <div class="movie">
      <img src="movie5.png" alt="电影5">
      <div class="movie-name">明日的我与昨日的我</div>
    </div>
    <div class="movie">
      <img src="movie6.png" alt="电影6">
      <div class="movie-name">速度与激情8</div>
    </div>
    <div class="movie">
      <img src="movie7.png" alt="电影7">
      <div class="movie-name">极速特工</div>
    </div>
    <div class="movie">
      <img src="movie8.png" alt="电影8">
      <div class="movie-name">金刚狼3：殊死一搏</div>
    </div>
  </div>
</body>
</html>

运行结果：

文章来源:https://blog.csdn.net/moyuan_4s/article/details/135515644
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章