Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html实战之表格表单
Blogger Information
Blog 11
fans 0
comment 0
visits 12896
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实战之表格表单
写代码的张先森
Original
934 people have browsed it

一、HTML-结合css编写一个漂亮的表格

注：重点知识都在代码中标注出来了，记得看代码注释
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格实战-购物车</title>
  7.     <style>
  8.       html {
  9.         font-size: 14px;
  10.       }
  11.       table {
  12.         /* 将单元格之间的间隙去掉 */
  13.         border-collapse: collapse;
  14.         width: 70%;
  15.         /* 外边距左右自动居中 */
  16.         margin: auto;
  17.         color: #666;
  18.         /* 字体粗细设置 */
  19.         font-weight: lighter;
  20.         /* 文本居中显示 */
  21.         text-align: center;
  22.       }
  23.       /* 表格线直接添加到单元格上面 */
  24.       table thead th,
  25.       table td {
  26.         border: 1px solid #8066a0;
  27.         border-color: #8066a0;
  28.         /* 设置内边距 */
  29.         padding: 10px;
  30.       }
  32.       /* 标题样式 */
  33.       table caption {
  34.         font-size: 1.5rem;
  35.         margin-bottom: 15px;
  36.         color: green;
  37.       }
  39.       table th {
  40.         font-weight: lighter;
  41.         color: white;
  42.       }
  43.       table thead tr:first-of-type {
  44.         background-color: rgb(157, 145, 172);
  45.       }
  47.       /* 隔行变色 */
  48.       table tbody tr:nth-of-type(even) {
  49.         background-color: rgb(78, 224, 243);
  50.       }
  51.       /* 鼠标悬停效果 */
  52.       table tbody tr:hover {
  53.         background-color: pink;
  54.         color: white;
  55.       }
  57.       /* 底部样式 */
  58.       table tfoot td {
  59.         color: rgb(146, 5, 5);
  60.         font-size: 1.2rem;
  61.         font-weight: bolder;
  62.       }
  64.       /* 结算按钮 */
  66.       body div:last-of-type {
  67.         width: 70%;
  68.         margin: 10px auto;
  69.       }
  71.       body div:first-of-type button {
  72.         /* 靠右浮动 */
  73.         float: right;
  74.         width: 120px;
  75.         height: 32px;
  76.         background-color: seagreen;
  77.         color: white;
  78.         /* 去掉边框 */
  79.         border: none;
  80.         /* 设置鼠标样式 */
  81.         cursor: pointer;
  82.       }
  84.       body div:first-of-type button:hover {
  85.         background-color: coral;
  86.         font-size: 1.1rem;
  87.       }
  88.     </style>
  89.   </head>
  91.   <body>
  92.     <!-- 表格结构 -->
  93.     <table>
  94.       <!-- 标题 -->
  95.       <caption>
  96.         购物车
  97.       </caption>
  98.       <!-- 表头 -->
  99.       <thead>
  100.         <tr>
  101.           <th>ID</th>
  102.           <th>品名</th>
  103.           <th>单价/元</th>
  104.           <th>单位</th>
  105.           <th>数量</th>
  106.           <th>金额/元</th>
  107.         </tr>
  108.       </thead>
  109.       <!-- 主体 -->
  110.       <tbody>
  111.         <tr>
  112.           <td>SN-1010</td>
  113.           <td>MacBook Pro电脑</td>
  114.           <td>18999</td>
  115.           <td>台</td>
  116.           <td>1</td>
  117.           <td>18999</td>
  118.         </tr>
  119.         <tr>
  120.           <td>SN-1020</td>
  121.           <td>iPhone手机</td>
  122.           <td>4999</td>
  123.           <td>部</td>
  124.           <td>2</td>
  125.           <td>9998</td>
  126.         </tr>
  127.         <tr>
  128.           <td>SN-1030</td>
  129.           <td>智能AI音箱</td>
  130.           <td>399</td>
  131.           <td>只</td>
  132.           <td>3</td>
  133.           <td>1995</td>
  134.         </tr>
  135.         <tr>
  136.           <td>SN-1040</td>
  137.           <td>SSD移动硬盘</td>
  138.           <td>888</td>
  139.           <td>个</td>
  140.           <td>2</td>
  141.           <td>1776</td>
  142.         </tr>
  143.         <tr>
  144.           <td>SN-1050</td>
  145.           <td>黄山毛峰</td>
  146.           <td>999</td>
  147.           <td>斤</td>
  148.           <td>3</td>
  149.           <td>2997</td>
  150.         </tr>
  151.       </tbody>
  152.       <!-- 底部 -->
  153.       <tfoot>
  154.         <tr>
  155.           <td colspan="4">总计:</td>
  156.           <td>13</td>
  157.           <td>35765</td>
  158.         </tr>
  159.       </tfoot>
  160.     </table>
  161.   <!-- 结算按钮 -->
  162.     <div>
  163.       <button>结算</button>
  164.     </div>
  165.   </body>
  166. </html>

运行效果：

二、HTML-结合css编写一个漂亮的表单

注：重点表单知识都在代码中标注出来了，记得看代码注释
代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单元素</title>
  7.     <style>
  8.       body {
  9.         color: #555;
  10.       }
  11.       h3 {
  12.         text-align: center;
  13.         font-family: cursive;
  14.         color: royalblue;
  15.       }
  16.       form {
  17.         width: 450px;
  18.         margin: 30px auto;
  19.         border-top: 2px solid #aaa;
  20.       }
  21.       form fieldset {
  22.         border: 1px solid rgb(70, 203, 212);
  23.         background-color: lightcyan;
  24.         box-shadow: 3px 3px 4px rgb(45, 211, 147);
  25.         border-radius: 10px;
  26.         margin: 20px;
  27.       }
  28.       form fieldset legend {
  29.         background-color: rgb(178, 231, 201);
  30.         border-radius: 10px;
  31.         color: seagreen;
  32.         padding: 5px 15px;
  33.       }
  35.       form div {
  36.         margin: 5px;
  37.       }
  39.       form p {
  40.         text-align: center;
  41.       }
  42.       form .btn {
  43.         width: 80px;
  44.         height: 30px;
  45.         border: none;
  46.         background-color: seagreen;
  47.         color: #ddd;
  48.       }
  49.       form .btn:hover {
  50.         background-color: coral;
  51.         color: white;
  52.         cursor: pointer;
  53.       }
  55.       input:focus {
  56.         background-color: rgb(226, 226, 175);
  57.       }
  58.       .sty {
  59.         width: 200px;
  60.         height: 20px;
  61.         border-radius: 3px;
  62.         border: 0;
  63.         padding-left: 4px;
  64.       }
  65.     </style>
  66.   </head>
  67.   <body>
  68.     <h3>用户注册</h3>
  69.     <form action="" method="POST">
  70.       <!-- 控件组 -->
  71.       <fieldset>
  72.         <legend>基本信息（必填）</legend>
  73.         <div>
  74.           <label for="name">账号：</label>
  75.           <input
  76.             type="text"
  77.             id="name"
  78.             name="name"
  79.             placeholder="6-15字符"
  80.             autofocus
  81.             required
  82.             class="sty"
  83.           />
  84.         </div>
  85.         <!-- type=text  文本 -->
  86.         <div>
  87.           <label for="email">邮箱：</label>
  88.           <input
  89.             type="email"
  90.             id="email"
  91.             name="email"
  92.             placeholder="123@qq.com"
  93.             required
  94.             class="sty"
  95.           />
  96.         </div>
  97.         <!-- type=email  输入的信息会进行是否是邮箱验证 -->
  98.         <div>
  99.           <label for="password">密码：</label>
  100.           <input
  101.             type="password"
  102.             id="password"
  103.             name="password"
  104.             required
  105.             placeholder="不少于六位且数字+字母"
  106.             id="pwd"
  107.             class="sty"
  108.           />
  109.         </div>
  110.         <div>
  111.           <label for="password2">确认：</label>
  112.           <input
  113.             type="password"
  114.             id="password2"
  115.             name="password2"
  116.             required
  117.             placeholder="与以上密码一致"
  118.             class="sty"
  119.           />
  120.         </div>
  121.         <!-- type=password  输入的信息是不显示的 安全 常用于输入密码 -->
  122.       </fieldset>
  124.       <fieldset>
  125.         <legend>扩展信息（选填）</legend>
  126.         <div>
  127.           <label for="birthday">生日：</label>
  128.           <input type="date" id="birthday" name="birthday" class="sty" />
  129.         </div>
  130.         <!-- type=date  选择时间 -->
  132.         <!-- 单选按钮 name值必须一样-->
  133.         <div>
  134.           <label for="male">性别：</label>
  135.           <input
  136.             type="radio"
  137.             id="male"
  138.             value="male"
  139.             name="male"
  140.             checked
  141.           /><label for="male">男</label>
  142.           <input type="radio" id="female" value="female" name="male" /><label
  143.             for="female"
  144.             >女</label
  145.           >
  146.         </div>
  147.         <!-- 复选框 name通常以array[]形式传给后台 便于后台处理-->
  148.         <div>
  149.           <label for="">爱好：</label>
  150.           <input type="checkbox" name="hobby[]" value="game" /><label for=""
  151.             >打游戏</label
  152.           >
  153.           <input type="checkbox" name="hobby[]" value="yinyue" /><label for=""
  154.             >音乐</label
  155.           >
  156.         </div>
  158.         <div>
  159.           <!-- 选项列表 -->
  160.           <label for="brand">手机：</label>
  161.           <input
  162.             type="search"
  163.             list="phone"
  164.             name="brand"
  165.             id="brand"
  166.             class="sty"
  167.           />
  168.           <datalist id="phone">
  169.             <option value="apple">苹果</option>
  170.             <option value="huawei">华为</option>
  171.             <option value="mi">小米</option>
  172.           </datalist>
  173.         </div>
  174.       </fieldset>
  175.       <fieldset>
  176.         <legend>其他信息（选填）</legend>
  177.         <!-- 文件域 -->
  178.         <div>
  179.           <label for="pic">上传头像：</label>
  180.           <input type="file" />
  181.         </div>
  182.         <!-- 多行文本框 -->
  183.         <div>
  184.           <label for="pic">简历：</label>
  185.           <textarea
  186.             name=""
  187.             id=""
  188.             cols="30"
  189.             rows="5"
  190.             placeholder="不超过100字"
  191.           ></textarea>
  192.         </div>
  193.       </fieldset>
  195.       <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
  196.       <input type="hidden" name="user_id" value="123" />
  198.       <p>
  199.         <!-- 两种提交按钮 -->
  200.         <input type="submit" value="提交" class="btn" />
  201.         <button class="btn">提交</button>
  202.       </p>
  203.     </form>
  204.   </body>
  205. </html>

运行效果：

小结：

1.理解表格的标题元素，表头，主体，底部

2.理解表单元素都有哪些，每个的写法和作用 如：文本框，密码框，邮箱验证，输入日期，单选按钮，复选框，选项列表，下拉列表，文件域，隐藏域，多行文本框

3.结合以上学习内容动手写两个表单，表格的demo更容易记忆，好记性不如烂笔头，动手实践才是真理

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