简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html实战之表格表单

html实战之表格表单

写代码的张先森
写代码的张先森原创
2020年06月17日 16:24:37926浏览

一、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更容易记忆，好记性不如烂笔头，动手实践才是真理

上一条：使用表格开发简易购物车及注册的静态页面下一条：购物车、用户注册静态页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多