Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格与表单学习
Blogger Information
Blog 6
fans 0
comment 0
visits 4772
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
表格与表单学习
遇见
Original
580 people have browsed it

1.表格的学习，以购物车为例，详细如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>购物车</title>
  7.     <style type="text/css">
  8.       /* 浏览器默认外边距8像素，全部初始化0 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       .table {
  14.         width: 70%;
  15.         /* 表格边框线实心，去掉间隙 */
  16.         border-collapse: collapse;
  17.         /* 表格文字水平居中对齐 */
  18.         text-align: center;
  19.         /* 表格水平居中对齐 */
  20.         margin: auto;
  21.       }
  22.       .table caption {
  23.         /* 标题上下外边距10像素，左右自动，也就是水平居中 */
  24.         margin: 10px auto;
  25.         font-size: 20px;
  26.       }
  27.       .table tr th,
  28.       .table tr td {
  29.         border-bottom: 1px solid #efef;
  30.         /* 字体显示更细 */
  31.         font-weight: lighter;
  32.         /* 表格内容内边距10像素 */
  33.         padding: 10px;
  34.       }
  35.       /* 表格头部第一个设置背景颜色 */
  36.       .table thead tr:first-child {
  37.         background: lightgreen;
  38.       }
  39.       /* 表格内容主题，分组后偶数行显示背景颜色，也就是表格隔行换色 */
  40.       .table tbody tr:nth-of-type(even) {
  41.         background: #eeeeee;
  42.       }
  43.       /* 光标移到表格行上后，表格背景颜色改变 */
  44.       .table tbody tr:hover {
  45.         background: palegoldenrod;
  46.       }
  47.       .table tfoot {
  48.         font-size: 18px;
  49.         color: coral;
  50.       }
  51.       /* body内容分组后，第一个div设置宽度和外边距 */
  52.       body div:first-of-type {
  53.         width: 70%;
  54.         /* 外边距：上10像素，下0像素，左右边距自动 */
  55.         margin: 10px auto 0px;
  56.       }
  57.       button {
  58.         width: 90px;
  59.         height: 35px;
  60.         /* 这个是圆角样式 */
  61.         border-radius: 4px;
  62.         color: #ffffff;
  63.         background: darkcyan;
  64.         /* 这个是去掉点击后的外边框虚线 */
  65.         outline: none;
  66.         float: right;
  67.       }
  68.       /* 光标移上去样式 */
  69.       button:hover {
  70.         /* 光标移上去后，改变光标形状，pointer表示小手形状 */
  71.         cursor: pointer;
  72.         background: darkolivegreen;
  73.         font-size: 18px;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <table class="table">
  79.       <caption>
  80.         购物车
  81.       </caption>
  82.       <thead>
  83.         <tr>
  84.           <th>商品编码</th>
  85.           <th>商品名称</th>
  86.           <th>数量</th>
  87.           <th>单价/元</th>
  88.           <th>金额</th>
  89.         </tr>
  90.       </thead>
  92.       <tbody>
  93.         <tr>
  94.           <td>NO2020061801</td>
  95.           <td>小米笔记本</td>
  96.           <td>1</td>
  97.           <td>7899.00</td>
  98.           <td>7899.00</td>
  99.         </tr>
  100.         <tr>
  101.           <td>NO2020061802</td>
  102.           <td>鼠标垫</td>
  103.           <td>2</td>
  104.           <td>8.00</td>
  105.           <td>16.00</td>
  106.         </tr>
  107.         <tr>
  108.           <td>NO2020061803</td>
  109.           <td>毛峰茶</td>
  110.           <td>1</td>
  111.           <td>20.00</td>
  112.           <td>20.00</td>
  113.         </tr>
  114.         <tr>
  115.           <td>NO2020061804</td>
  116.           <td>农夫山泉</td>
  117.           <td>1</td>
  118.           <td>2.00</td>
  119.           <td>2.00</td>
  120.         </tr>
  121.       </tbody>
  122.       <tfoot>
  123.         <tr>
  124.         <!-- colspan表示横向合并单元格，rowspan表示纵向合并单元格，后面跟上合并单元格数量，并且删除对应数量的单元格 -->
  125.           <td colspan="2">合计：</td>
  126.           <td>5</td>
  127.           <td> </td>
  128.           <td>7937.00</td>
  129.         </tr>
  130.       </tfoot>
  131.     </table>
  132.     <div>
  133.       <button>结算</button>
  134.     </div>
  135.   </body>
  136. </html>

运行结果截图：

2.表单学习:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>提交表单</title>
  7.     <style type="text/css">
  8.       /* 浏览器默认外边距8像素，全部初始化0 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       input,
  14.       textarea {
  15.         outline: none;
  16.         padding: 0 10px;
  17.         border-radius: 5px;
  18.         border: none;
  19.       }
  20.       textarea {
  21.         line-height: 25px;
  22.       }
  23.       input[type="text"],
  24.       input[type="password"],
  25.       input[type="email"] {
  26.         height: 25px;
  27.         line-height: 25px;
  28.       }
  29.       input[type="radio"],
  30.       input[type="checkbox"] {
  31.         margin-left: 10px;
  32.         margin-right: 5px;
  33.       }
  34.       input[type="button"] {
  35.         background: mediumspringgreen;
  36.         color: navy;
  37.         padding: 5px;
  38.         cursor: pointer;
  39.       }
  40.       .regbox {
  41.         height: 100vh;
  42.         display: flex;
  43.         justify-content: center;
  44.         align-items: center;
  45.         font-weight: lighter;
  46.       }
  47.       .applyBox {
  48.         width: 500px;
  49.         color: #666;
  50.       }
  51.       .applyBox .title {
  52.         text-align: center;
  53.         font-size: 20px;
  54.         margin: 10px 0px;
  55.       }
  57.       .forminfo fieldset {
  58.         font-size: 14px;
  59.         padding: 10px;
  60.         margin-bottom: 10px;
  61.         border-radius: 10px;
  62.         background: linen;
  63.       }
  64.       .forminfo fieldset:last-of-type {
  65.         margin-bottom: 0px;
  66.       }
  67.       .forminfo fieldset div:not(:last-of-type) {
  68.         margin-bottom: 10px;
  69.       }
  70.       .forminfo fieldset div label:first-of-type {
  71.         width: 80px;
  72.         display: inline-block;
  73.       }
  74.       .applyBox .btnBox {
  75.         text-align: center;
  76.       }
  77.       .btnBox .submitBtn {
  78.         width: 90px;
  79.         height: 35px;
  80.         /* 这个是圆角样式 */
  81.         border-radius: 4px;
  82.         color: #ffffff;
  83.         background: darkcyan;
  84.         /* 这个是去掉点击后的外边框虚线 */
  85.         outline: none;
  86.         margin-top: 10px;
  87.       }
  88.       /* 光标移上去样式 */
  89.       .btnBox .submitBtn:hover {
  90.         /* 光标移上去后，改变光标形状，pointer表示小手形状 */
  91.         cursor: pointer;
  92.         background: darkolivegreen;
  93.         font-size: 18px;
  94.       }
  95.     </style>
  96.   </head>
  97.   <body>
  98.     <div class="regbox">
  99.       <form action="">
  100.         <div class="applyBox">
  101.           <div class="title">用户注册</div>
  102.           <div class="forminfo">
  103.             <fieldset>
  104.               <legend>基本信息（必填）</legend>
  105.               <div>
  106.                 <!-- for的值要与input的id对应，这样点击lable也能直接点中input -->
  107.                 <!-- required只在submit提交表单时生效，可以提示必录 -->
  108.                 <!-- autofocus默认光标选中 -->
  109.                 <label for="userName">用户名称：</label>
  110.                 <input
  111.                   type="text"
  112.                   id="userName"
  113.                   name="userName"
  114.                   placeholder="请输入用户名"
  115.                   required
  116.                   autofocus
  117.                 />
  118.               </div>
  119.               <div>
  120.                 <label for="email">邮箱号：</label>
  121.                 <input
  122.                   type="email"
  123.                   id="email"
  124.                   name="email"
  125.                   placeholder="请输入邮箱号"
  126.                   required
  127.                 />
  128.               </div>
  129.               <div>
  130.                 <label for="password">密码：</label>
  131.                 <input
  132.                   type="password"
  133.                   id="password"
  134.                   name="password"
  135.                   placeholder="******"
  136.                   required
  137.                 />
  138.                 <input type="button" data-showid="password" value="显示密码" />
  139.               </div>
  140.               <div>
  141.                 <label for="confitmPwd">确认密码：</label>
  142.                 <input
  143.                   type="password"
  144.                   id="confitmPwd"
  145.                   name="confitmPwd"
  146.                   placeholder="******"
  147.                   required
  148.                 />
  149.                 <input
  150.                   type="button"
  151.                   data-showid="confitmPwd"
  152.                   value="显示密码"
  153.                 />
  154.               </div>
  155.             </fieldset>
  156.             <fieldset>
  157.               <legend>扩展信息（选填）</legend>
  158.               <div>
  159.                 <label for="birthday">生日：</label>
  160.                 <input type="date" id="birthday" name="birthday" />
  161.               </div>
  162.               <div>
  163.                 <label for="gender">性别：</label>
  164.                 <input type="radio" id="male" name="sex" value="0" /><label
  165.                   for="male"
  166.                   >男</label
  167.                 >
  168.                 <input type="radio" id="female" name="sex" value="1" /><label
  169.                   for="female"
  170.                   >女</label
  171.                 >
  172.                 <input type="radio" id="gender" name="sex" value="2" /><label
  173.                   for="gender"
  174.                   >保密</label
  175.                 >
  176.               </div>
  177.               <div>
  178.                 <label for="read">爱好：</label>
  179.                 <input type="checkbox" id="read" name="like" value="0" />
  180.                 <label for="read">阅读</label>
  182.                 <input type="checkbox" id="friends" name="like" value="1" />
  183.                 <label for="friends">交友</label>
  185.                 <input type="checkbox" id="game" name="like" value="2" />
  186.                 <label for="game">游戏</label>
  187.               </div>
  188.               <div>
  189.                 <label for="phone">手机号：</label>
  190.                 <input
  191.                   type="text"
  192.                   id="phone"
  193.                   name="phone"
  194.                   placeholder="请输入11位手机号"
  195.                 />
  196.               </div>
  197.             </fieldset>
  198.             <fieldset>
  199.               <legend>其他</legend>
  200.               <div>
  201.                 <label for="userimg">用户头像：</label>
  202.                 <input type="file" id="userimg" name="userimg" />
  203.               </div>
  204.               <div>
  205.                 <label for="introduce" style="vertical-align: top;"
  206.                   >个人介绍：</label
  207.                 >
  208.                 <textarea
  209.                   name="introduce"
  210.                   id="introduce"
  211.                   cols="30"
  212.                   rows="3"
  213.                   placeholder="请输入个人介绍"
  214.                 ></textarea>
  215.               </div>
  216.             </fieldset>
  217.           </div>
  218.           <div class="btnBox">
  219.             <button type="submit" class="submitBtn">提交</button>
  220.           </div>
  221.         </div>
  222.       </form>
  223.     </div>
  224.   </body>
  225.   <script>
  226.     //给显示密码按钮添加事件
  227.     document
  228.       .querySelectorAll('input[type="button"]')[0]
  229.       .addEventListener("click", showPwd);
  230.     document
  231.       .querySelectorAll('input[type="button"]')[1]
  232.       .addEventListener("click", showPwd);
  234.     function showPwd(e) {
  235.       let id = e.target.dataset.showid;
  236.       let objtype = document.getElementById(id).type;
  237.       if (objtype === "text") {
  238.         document.getElementById(id).type = "password";
  239.         e.target.value = "显示密码";
  240.       } else {
  241.         document.getElementById(id).type = "text";
  242.         e.target.value = "隐藏密码";
  243.       }
  244.     }
  245.   </script>
  246. </html>

预览：

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很不错，继续努力！
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