编程题

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>

更多相关文章

  1. Android第三课 联调华为手机
  2. 华为手机Android(安卓)Studio开发不显示Logcat解决办法
  3. Android(安卓)设置默认桌面,默认应用,辅助功能,电池优化,设备管
  4. Android(安卓)- ReactNative Debug 技巧
  5. android桌面快捷方式添加数字角标的踩坑之路
  6. android跳转权限设置页面
  7. Android(安卓)错误信息集锦(持续更新)
  8. Android(安卓)开发技术周报 Issue#292
  9. Android面试资料集锦

随机推荐

  1. Android条形统计图实现
  2. ubuntu下搭建cordova开发环境
  3. android获得圆角图片
  4. Multitasking the android way
  5. Android 列表对话框
  6. android背景自动伸缩
  7. Android应用程序设置Home Screen
  8. android dialog集合
  9. Android Add new target
  10. Android 清理app所有缓存