Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格与表单实战教程
Blogger Information
Blog 10
fans 0
comment 0
visits 8679
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
825 people have browsed it

表格与表单实战教程

购物车实战

body主体代码

  1. <body>
  2.     <!-- 表格 -->
  3.     <table>
  4.       <!-- 标题 -->
  5.       <caption>
  6.         购物车
  7.       </caption>
  9.       <!-- 头部 -->
  10.       <thead>
  11.         <tr>
  12.           <th>ID</th>
  13.           <th>品名</th>
  14.           <th>单价/元</th>
  15.           <th>单位</th>
  16.           <th>数量</th>
  17.           <th>金额/元</th>
  18.         </tr>
  19.       </thead>
  21.       <!-- 主体 -->
  22.       <tbody>
  23.         <tr>
  24.           <td>SN-1010</td>
  25.           <td>MacBook Pro电脑</td>
  26.           <td>18999</td>
  27.           <td>台</td>
  28.           <td>1</td>
  29.           <td>18999</td>
  30.         </tr>
  31.         <tr>
  32.           <td>SN-1020</td>
  33.           <td>iPhone手机</td>
  34.           <td>4999</td>
  35.           <td>部</td>
  36.           <td>2</td>
  37.           <td>9998</td>
  38.         </tr>
  39.         <tr>
  40.           <td>SN-1030</td>
  41.           <td>智能AI音箱</td>
  42.           <td>399</td>
  43.           <td>只</td>
  44.           <td>5</td>
  45.           <td>1995</td>
  46.         </tr>
  47.         <tr>
  48.           <td>SN-1040</td>
  49.           <td>SSD移动硬盘</td>
  50.           <td>888</td>
  51.           <td>个</td>
  52.           <td>2</td>
  53.           <td>1776</td>
  54.         </tr>
  55.         <tr>
  56.           <td>SN-1050</td>
  57.           <td>黄山毛峰</td>
  58.           <td>999</td>
  59.           <td>斤</td>
  60.           <td>3</td>
  61.           <td>2997</td>
  62.         </tr>
  63.       </tbody>
  64.       <!-- 底部 -->
  65.       <tfoot>
  66.         <tr>
  67.           <td colspan="4">总计:</td>
  68.           <td>13</td>
  69.           <td>35765</td>
  70.         </tr>
  71.       </tfoot>
  72.     </table>
  74.     <!-- 结算按钮 -->
  75.     <div>
  76.       <button>结算</button>
  77.     </div>
  78.   </body>

样式代码

  1.     <style>
  2.       html {
  3.         font-size: 14px;
  4.       }
  5.       table {
  6.         /* 去掉间隙 */
  7.         border-collapse: collapse;
  8.         /* 宽度设置为窗口的70% */
  9.         width: 70%;
  10.         /* 横向居中 */
  11.         margin: auto;
  12.         color: #666;
  13.         /* 字体变细 */
  14.         font-weight: lighter;
  15.         /* 文体居中 */
  16.         text-align: center;
  17.       }
  18.       /* 为单元格添加边框 th为头单元格，td为表体单元格 */
  19.       table thead th,
  20.       table td {
  21.         /* 添加底边框 线粗1px，solid 实线 */
  22.         border-bottom: 1px solid #ccc;
  23.         /* 内边柜 */
  24.         padding: 10px;
  25.       }
  27.       /* 标题样式 */
  28.       table caption {
  29.         /* rem指原始字体的倍数，如原始字体为14px,则1.5rem=14px*1.5=21px */
  30.         font-size: 1.5rem;
  31.         /* 外边柜，这里以table thead 作为参照物 */
  32.         margin-bottom: 15px;
  33.         color: green;
  34.       }
  36.       /* 设置表头栏字体及颜色 */
  37.       table th {
  38.         font-weight: lighter;
  39.         color: green;
  40.       }
  42.       /* 设置表头栏背景色 */
  43.       table thead tr:first-of-type {
  44.         background-color: cyan;
  45.       }
  47.       /* 设置偶数行为背景色为黄色 */
  48.       table tbody tr:nth-of-type(even) {
  49.         background-color: yellow;
  50.       }
  51.       /* 设置鼠标移动到行的悬停效果 移上变换背景色为粉色*/
  52.       table tbody tr:hover {
  53.         background-color: pink;
  54.       }
  56.       /* 设置表底样式 */
  57.       table tfoot td {
  58.         /* 不显示底部边框 */
  59.         border-bottom: none;
  60.         color: coral;
  61.         font-size: 1.2rem;
  62.         font-weight: bolder;
  63.       }
  65.       /* 结算按钮 */
  66.       /* 用分组结构选择器取最后一个DIV */
  67.       body div:last-of-type {
  68.         width: 70%;
  69.         margin: 10px auto;
  70.       }
  72.       /* 用分组结构选择器取第一个DIV 因文档body中只有一个div,所以和最后一个div是同一个*/
  73.       body div:first-of-type button {
  74.         /* 元素靠右，相对父元素 */
  75.         float: right;
  77.         width: 120px;
  78.         height: 32px;
  79.         background-color: seagreen;
  80.         color: white;
  81.         border: none;
  82.         /* cursor设置鼠标样式,pointer为手状 */
  83.         cursor: pointer;
  84.       }
  86.       /* 设置按钮鼠标悬停样式 */
  87.       body div:first-of-type button:hover {
  88.         background-color: coral;
  89.         font-size: 1.1rem;
  90.       }
  91.     </style>

显示效果

购物车实战

登录界面实战

body主体代码

  1.   <body>
  2.     <h3>用户注册</h3>
  3.     <!-- form+input.... -->
  4.     <!-- form:表单固定元素名，action提交目标，method为提交方式，常用的值有post、get -->
  5.     <form action="" method="POST">
  6.       <!--fieldset 控件组 -->
  7.       <fieldset>
  8.         <!-- legeng为本控件组定义个标题，与fieldset配合使用，不用legeng,默认为无标题 -->
  9.         <legend>基本信息(必填)</legend>
  10.         <div>
  11.           <!-- label:标签控件，for属性的值为需绑定控件的ID值，可以与其它控件绑定，绑定后，点击label控件，
  12.              则焦点转换到被绑定的控件上。for为空时则不绑定任何控件，独立显示，点击无效 -->
  13.           <label for="my-username">账号:</label>
  14.           <!-- input:文本录入控件
  15.               type常用属性值:text(文本)、email(邮箱)、password(密码)、date(日期)、radio(单选框)、
  16.               checkbox(复选框)、search(搜索框，与datalist配合使用时，可显示下拉提示效果) -->
  17.           <input
  18.             type="text"
  19.             id="my-username"
  20.             name="username"
  21.             placeholder="6-15位字符"
  22.             autofocus
  23.           />
  24.         </div>
  25.         <div>
  26.           <label for="email-id">邮箱:</label>
  27.           <input
  28.             type="email"
  29.             name="email"
  30.             id="email-id"
  31.             placeholder="demo@example.com"
  32.           />
  33.         </div>
  34.         <!-- 密码 -->
  35.         <div>
  36.           <label for="pwd-1">密码:</label>
  37.           <!-- placeholder显示提示条件，当文本框为空值时显示 -->
  38.           <input type="password"" name="password1" id="pwd-1"
  39.           placeholder="不少于6位且字母+数字" />
  40.         </div>
  41.         <div>
  42.           <label for="pwd-2">确认:</label>
  43.           <input type="password" name="password2" id="pwd-2" />
  44.         </div>
  45.       </fieldset>
  47.       <fieldset>
  48.         <legend>扩展信息(选填)</legend>
  49.         <div>
  50.           <label
  51.             >生日:
  52.             <input type="date" name="birthday" />
  53.           </label>
  54.         </div>
  55.         <!-- 以下单选按钮用DIV包装后，起到一组按钮的效果 -->
  56.         <div>
  57.           <!-- 单选按钮 -->
  58.           <label for="secret">性别:</label>
  59.           <!-- 单选按钮中的name属性名必须相同 -->
  60.           <input type="radio" name="gender" value="male" id="male" /><label
  61.             for="male"
  62.             >男</label
  63.           >
  64.           <input type="radio" name="gender" value="female" id="female" /><label
  65.             for="female"
  66.             >女</label
  67.           >
  68.           <input
  69.             type="radio"
  70.             name="gender"
  71.             value="secret"
  72.             id="secret"
  73.             checked
  74.           /><label for="secret">保密</label>
  75.         </div>
  77.         <div>
  78.           <!-- 复选框 -->
  79.           <label for="programme">爱好</label>
  80.           <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
  81.           <!-- checkbox的name属性值强烈建议加“[]”,为后端处理做准备 -->
  82.           <input type="checkbox" name="hobby[]" id="game" value="game" /><label
  83.             for="game"
  84.             >打游戏</label
  85.           >
  87.           <!-- checked 默认选中 -->
  88.           <input
  89.             type="checkbox"
  90.             name="hobby[]"
  91.             value="shoot"
  92.             id="shoot"
  93.           /><label for="shoot">摄影</label>
  94.           <input
  95.             type="checkbox"
  96.             name="hobby[]"
  97.             value="programme"
  98.             id="programme"
  99.             checked
  100.           /><label for="programme">编程</label>
  101.         </div>
  103.         <div>
  104.           <!-- 选项列表 -->
  105.           <label for="brand">手机:</label>
  106.           <!-- search：搜索框，与下面的datalist(数据列表)配合使用，起到提示效果 -->
  107.           <input type="search" list="phone" name="brand" id="brand" />
  108.           <datalist id="phone">
  109.             <option value="apple"> </option>
  110.             <option value="huawei" label="华为"></option>
  111.             <option value="mi" label="小米"> </option>
  112.           </datalist>
  113.         </div>
  114.       </fieldset>
  116.       <fieldset>
  117.         <legend>其它信息(选填)</legend>
  118.         <!--文件上传-->
  119.         <div>
  120.           <label for="uploads">上传头像:</label>
  121.           <input
  122.             type="file"
  123.             name="user_pic"
  124.             id="uploads"
  125.             accept="image/png, image/jpeg, image/gif"
  126.           />
  127.         </div>
  129.         <!--文本域-->
  130.         <div>
  131.           <label for="resume">简历:</label>
  132.           <!--注意文本域没有value属性-->
  133.           <textarea
  134.             name="resume"
  135.             id="resume"
  136.             cols="30"
  137.             rows="5"
  138.             placeholder="不超过100字"
  139.           ></textarea>
  140.         </div>
  141.       </fieldset>
  143.       <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。
  144.          隐藏域是为后端取数存数准备的，无须显示但必须存在的数据可以用隐藏域
  145.         用JS控制后，也可实现显示/隐藏效果 -->
  146.       <input type="hidden" name="user_id" value="123" />
  148.       <p>
  149.         <!-- submit为提交按钮控件，现在流行直接加button,不建议用submit,因样式控制没有button方便 -->
  150.         <input type="submit" value="提交" class="btn" />
  151.         <button class="btn">提交</button>
  152.       </p>
  153.     </form>
  154.   </body>

样式代码

  1. <style>
  2.       body {
  3.         color: #555;
  4.       }
  5.       h3 {
  6.         /* 文本居中 */
  7.         text-align: center;
  8.       }
  9.       form {
  10.         width: 450px;
  11.         /* 外边距 */
  12.         margin: 30px auto;
  13.         border-top: 1px solid #aaa;
  14.       }
  15.       form fieldset {
  16.         border: 1px solid seagreen;
  17.         background-color: lightcyan;
  18.         box-shadow: 2px 2px 4px #bbb;
  19.         border-radius: 10px;
  20.         margin: 20px;
  21.       }
  22.       form fieldset legend {
  23.         background-color: rgb(178, 231, 201);
  24.         /* border-radius：给元素添加圆角边框 */
  25.         border-radius: 10px;
  26.         color: seagreen;
  28.         padding: 5px 15px;
  29.       }
  31.       form div {
  32.         margin: 5px;
  33.       }
  35.       form p {
  36.         text-align: center;
  37.       }
  38.       form .btn {
  39.         width: 80px;
  40.         height: 30px;
  41.         border: none;
  42.         background-color: seagreen;
  43.         color: #ddd;
  44.       }
  45.       /* 按钮鼠标悬停样式 */
  46.       form .btn:hover {
  47.         background-color: coral;
  48.         color: white;
  49.         cursor: pointer;
  50.       }
  51.       /* 文本框得到焦点后的样式 */
  52.       input:focus {
  53.         background-color: rgb(226, 226, 175);
  54.       }
  55.     </style>

显示效果

登录界面实战

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