Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html测试题小结
Blogger Information
Blog 29
fans 0
comment 0
visits 14890
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html测试题小结
cool442
Original
455 people have browsed it

编程题

20 分/题,共 60 分

  1. 注册表单,要求
    (1) 有单行文本框,密码框,单选按钮,复选框, 文本域,下拉列表,按钮等
    (2) 全部使用grid布局实现
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>试题：注册表单</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         font-size: 100px;
  16.       }
  17.       body {
  18.         width: 100vw;
  19.         height: 100vh;
  20.         font-size: 0.16rem;
  21.         display: grid;
  22.         grid-template-columns: 1fr 5rem 1fr;
  23.         background-color: rgb(44, 59, 72);
  24.       }
  25.       .register {
  26.         padding: 0.5rem 0.4rem;
  27.         grid-area: 1/2/2/3;
  28.         margin-top: 50%;
  29.         margin-bottom: auto;
  30.         border: 1px solid #000;
  31.         background-color: rgb(255, 255, 255);
  32.       }
  33.       .register > div {
  34.         margin: 0.15rem 0.6rem 0.15rem;
  35.       }
  36.       .register .btn {
  37.         margin-top: 0.3rem;
  38.         margin-bottom: 0;
  39.       }
  40.       .label {
  41.         margin-right: 0.1rem;
  42.       }
  43.       .label:hover,
  44.       .radio:hover {
  45.         cursor: pointer;
  46.         color: rgb(3, 169, 243);
  47.       }
  48.       .input {
  49.         width: 2rem;
  50.       }
  51.       .btn > button {
  52.         display: block;
  53.         margin: 0 auto;
  54.         padding: 0.05rem 0.5rem;
  55.         border: none;
  56.         font-weight: bold;
  57.         color: #fff;
  58.         background-color: rgb(3, 169, 243);
  59.       }
  60.       .btn > button:hover {
  61.         cursor: pointer;
  62.         background-color: rgb(53, 186, 245);
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <!-- 有单行文本框,密码框,单选按钮,复选框, 文本域,下拉列表,按钮等 -->
  68.     <form class="register">
  69.       <div>
  70.         <label for="user">用户名：</label>
  71.         <input type="text" name="user" id="user" class="input" />
  72.       </div>
  73.       <div>
  74.         <label for="pass">密　码： </label>
  75.         <input type="password" name="pass" id="pass" class="input" />
  76.       </div>
  77.       <div class="sex">
  78.         <label>性　别：</label>
  79.         <input type="radio" name="sex" id="man" class="radio" />
  80.         <label for="man" class="label">男</label>
  81.         <input type="radio" name="sex" id="wom" class="radio" />
  82.         <label for="wom" class="label">女</label>
  83.       </div>
  84.       <div class="like">
  85.         <label>爱　好：</label>
  86.         <input type="checkbox" name="football" id="football" class="radio" />
  87.         <label for="football" class="label">足球</label>
  88.         <input
  89.           type="checkbox"
  90.           name="basketball"
  91.           id="basketball"
  92.           class="radio"
  93.         />
  94.         <label for="basketball" class="label">篮球</label>
  95.         <input
  96.           type="checkbox"
  97.           name="Volleyball"
  98.           id="Volleyball"
  99.           class="radio"
  100.         />
  101.         <label for="Volleyball" class="label">排球</label>
  102.       </div>
  103.       <div>
  104.         <label>籍　贯：</label>
  105.         <select id="jg" class="input">
  106.           <option value="0">请选择</option>
  107.           <option value="1">广西</option>
  108.           <option value="2">湖北</option>
  109.           <option value="3">天津</option>
  110.         </select>
  111.       </div>
  112.       <div class="btn"><button>提　交</button></div>
  113.     </form>
  114.   </body>
  115. </html>

  1. 购物车明细表,要求
    (1) 使用<table>编写
    (2) 要求有编号,分类, 品名,单价,数量,金额,总计等字段
    (3) 要求用到colspan, rowspan等行与列的合并操作
    (4) 表格样式全部采用css控制,布局方式任选flex/grid
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>试题：购物车明细表</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         font-size: 100px;
  16.       }
  17.       body {
  18.         font-size: 0.16rem;
  19.       }
  20.       .container {
  21.         width: 100vw;
  22.         height: 100vh;
  23.         display: flex;
  24.         flex-flow: wrap;
  25.         place-content: space-around;
  26.         background-color: rgb(44, 59, 72);
  27.       }
  28.       .table_container {
  29.         border: 1px solid rgb(87, 142, 190);
  30.         background-color: white;
  31.       }
  32.       .table_container h3 {
  33.         padding: 0.08rem 0.15rem;
  34.         color: white;
  35.         background-color: rgb(87, 142, 190);
  36.       }
  37.       .table_container table {
  38.         margin: 0.3rem 0.2rem 0.3rem 0.2rem;
  39.       }
  40.       .table_container table tbody tr:hover {
  41.         background-color: rgb(245, 245, 245);
  42.       }
  43.       .table_container th,
  44.       .table_container td {
  45.         padding: 0.06rem;
  46.         text-align: left;
  47.       }
  48.       .table_container td:nth-of-type(1) {
  49.         min-width: 0.6rem;
  50.       }
  51.       .table_container td:nth-of-type(2) {
  52.         min-width: 0.9rem;
  53.       }
  54.       .table_container td:nth-of-type(3) {
  55.         min-width: 1.4rem;
  56.       }
  57.       .table_container td:nth-of-type(n + 4) {
  58.         min-width: 0.8rem;
  59.       }
  60.       .table_container tbody tr:nth-of-type(2n + 1) {
  61.         /* 这句和下句加边框都没效果，请老师指点 */
  62.         border-top: 1px solid rgb(221, 221, 221);
  63.         border-bottom: 1px solid rgb(221, 221, 221);
  64.         background-color: rgb(249, 249, 249);
  65.       }
  66.       .table_container tr:last-of-type td:first-of-type {
  67.         padding: 0.1rem;
  68.         text-align: center;
  69.       }
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <div class="container">
  74.       <div class="table_container">
  75.         <h3>购物车明细表</h3>
  76.         <table>
  77.           <thead>
  78.             <tr>
  79.               <th>编号</th>
  80.               <th>分类</th>
  81.               <th>品名</th>
  82.               <th>单价（元）</th>
  83.               <th>数量</th>
  84.               <th>金额（万元）</th>
  85.             </tr>
  86.           </thead>
  87.           <tbody>
  88.             <tr>
  89.               <td>1</td>
  90.               <td>手机</td>
  91.               <td>华为p80</td>
  92.               <td>8000</td>
  93.               <td>600</td>
  94.               <td>480</td>
  95.             </tr>
  96.             <tr>
  97.               <td>2</td>
  98.               <td>手机</td>
  99.               <td>华为p80</td>
  100.               <td>8000</td>
  101.               <td>600</td>
  102.               <td>480</td>
  103.             </tr>
  104.             <tr>
  105.               <td>3</td>
  106.               <td>手机</td>
  107.               <td>华为p80</td>
  108.               <td>8000</td>
  109.               <td>600</td>
  110.               <td>480</td>
  111.             </tr>
  112.             <tr>
  113.               <td>4</td>
  114.               <td>手机</td>
  115.               <td>华为p80</td>
  116.               <td>8000</td>
  117.               <td>600</td>
  118.               <td>480</td>
  119.             </tr>
  120.             <tr>
  121.               <td>5</td>
  122.               <td>手机</td>
  123.               <td>华为p80</td>
  124.               <td>8000</td>
  125.               <td>600</td>
  126.               <td>480</td>
  127.             </tr>
  128.             <tr>
  129.               <td>6</td>
  130.               <td>手机</td>
  131.               <td>华为p80</td>
  132.               <td>8000</td>
  133.               <td>600</td>
  134.               <td>480</td>
  135.             </tr>
  136.             <tr>
  137.               <td colspan="5">合计</td>
  138.               <td>2880</td>
  139.             </tr>
  140.           </tbody>
  141.         </table>
  142.       </div>
  143.     </div>
  144.   </body>
  145. </html>

  1. 添加商品的模态框,要求
    (1) 使用position:fixed实现
    (2) 商品添加使用表单,要有分类,品名,单价,数量等字段
    (3) JS 部分可直接复制课堂上的代码即可, 不必编写
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>试题3：添加商品的模态框</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         list-style: none;
  13.         box-sizing: border-box;
  14.       }
  15.       html {
  16.         font-size: 100px;
  17.       }
  18.       body {
  19.         width: 100vw;
  20.         height: 100vh;
  21.         font-size: 0.16rem;
  22.       }
  23.       .top {
  24.         height: 0.8rem;
  25.         padding: 0.22rem 0.2rem;
  26.         position: fixed;
  27.         top: 0;
  28.         left: 0;
  29.         right: 0;
  30.         background-color: rgb(28, 43, 54);
  31.       }
  32.       .top h2 {
  33.         color: white;
  34.       }
  35.       .top button {
  36.         position: fixed;
  37.         top: 0.25rem;
  38.         right: 0.2rem;
  39.         font-weight: bold;
  40.         padding: 0.05rem 0.2rem;
  41.         color: white;
  42.         border: none;
  43.         background-color: rgb(28, 43, 54);
  44.       }
  45.       .top button:hover {
  46.         color: sandybrown;
  47.         cursor: pointer;
  48.         background-color: rgb(87, 142, 190);
  49.       }
  50.       .modal {
  51.         display: none;
  52.       }
  53.       .modal_bg {
  54.         width: 100%;
  55.         height: 100%;
  56.         position: fixed;
  57.         top: 0;
  58.         left: 0;
  59.         background-color: rgb(28, 43, 54, 0.6);
  60.       }
  61.       .shop_form {
  62.         min-width: 2.6rem;
  63.         min-height: 2.9rem;
  64.         position: fixed;
  65.         top: 30%;
  66.         bottom: 30%;
  67.         left: 10%;
  68.         right: 10%;
  69.         border: 2px solid rgb(87, 142, 190);
  70.         background-color: white;
  71.       }
  72.       .shop_form h3 {
  73.         color: ivory;
  74.         padding: 0.1rem 0.15rem;
  75.         background-color: rgb(87, 142, 190);
  76.       }
  77.       .shop_form ul {
  78.         min-width: 2rem;
  79.         position: fixed;
  80.         top: 40%;
  81.         left: 20%;
  82.       }
  83.       .shop_form ul li {
  84.         margin: 0.12rem 0;
  85.       }
  86.       .shop_form input[type="text"] {
  87.         margin-left: 0.12rem;
  88.         padding: 0.04rem 0.1rem;
  89.         border: 1px solid rgb(170, 170, 170);
  90.         outline: none;
  91.       }
  92.       .shop_form input[type="text"]:focus {
  93.         background-color: rgb(238, 238, 238);
  94.       }
  95.       .shop_form .add_btn {
  96.         margin-top: 0.3rem;
  97.         margin-left: 0.7rem;
  98.         padding: 0.04rem 0.25rem;
  99.         font-weight: bold;
  100.         border: none;
  101.         color: white;
  102.         background-color: rgb(87, 142, 190);
  103.       }
  104.       .shop_form .add_btn:hover {
  105.         cursor: pointer;
  106.         background-color: rgb(53, 126, 189);
  107.       }
  108.     </style>
  109.   </head>
  110.   <body>
  111.     <div class="top">
  112.       <h2>逛逛开心汇维护后台</h2>
  113.       <button onclick="document.querySelector('.modal').style.display='block'">
  114.         添加商品
  115.       </button>
  116.     </div>
  117.     <div class="modal">
  118.       <div
  119.         class="modal_bg"
  120.         onclick="this.parentNode.style.display='none'"
  121.       ></div>
  122.       <form action="" class="shop_form">
  123.         <h3>添加商品</h3>
  124.         <ul>
  125.           <li>
  126.             <label for="sort">分类</label
  127.             ><input type="text" name="sort" id="sort" />
  128.           </li>
  129.           <li>
  130.             <label for="wares">品名</label
  131.             ><input type="text" name="wares" id="wares" />
  132.           </li>
  133.           <li>
  134.             <label for="price">单价</label
  135.             ><input type="text" name="price" id="price" />
  136.           </li>
  137.           <li>
  138.             <label for="number">数量</label
  139.             ><input type="text" name="number" id="number" />
  140.           </li>
  141.           <li>
  142.             <button class="add_btn">添　加</button>
  143.           </li>
  144.         </ul>
  145.       </form>
  146.     </div>
  147.   </body>
  148. </html>

Correcting teacher：PHPzPHPz

Correction status：unqualified

Teacher's comments：在table中添加 border-collapse:collapse，这样你想显示的边框就能显示了，这个不是作业内容，提交的时候可以添加到个人博客的分类中
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post