简体中文（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

博客列表 >表格实现购物车、表单实现用户注册页面

表格实现购物车、表单实现用户注册页面

司马青衫
司马青衫原创
2020年06月18日 20:10:092029浏览

表格实现购物车、表单实现用户注册页面

购物车

购物车一：table标签

  • 主要是熟悉table标签的使用
标签 描述
<table></table> 定义表格
<caption></caption> 定义表格标题
<thead></thead> 定义表格表头
<tbody></tbody> 定义表格主要内容
<tfoot></tfoot> 定义表格页脚
<tr></tr> 表格的行
<th></th> 表头中的项目
<td></td> 表格中单元格内容

示例代码

  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>购物车一：`table`标签</title>
  7.     <style>
  8.       table {
  9.         border-collapse: collapse;
  10.         width: 70%;
  11.         margin: auto;
  12.         text-align: center;
  13.       }
  14.       table caption {
  15.         font-size: 1.5rem;
  16.         font-weight: bolder;
  17.         margin-top: 20px;
  18.         margin-bottom: 20px;
  19.       }
  20.       table thead th {
  21.         height: 30px;
  22.         background-color: lightblue;
  23.       }
  24.       table tbody tr {
  25.         height: 30px;
  26.         border-bottom: 1px solid #ccc;
  27.       }
  28.       table tfoot {
  29.         color: coral;
  30.       }
  31.       table tfoot td:first-of-type {
  32.         text-align: right;
  33.       }
  34.       div {
  35.         width: 70%;
  36.         margin: 10px auto;
  37.       }
  38.       div button {
  39.         float: right;
  40.         border: none;
  41.         width: 100px;
  42.         height: 50px;
  43.       }
  44.       div button:hover {
  45.         background-color: red;
  46.         font-size: large;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <table>
  52.       <caption>
  53.         购物车
  54.       </caption>
  55.       <thead>
  56.         <tr>
  57.           <th>编码</th>
  58.           <th>名称</th>
  59.           <th>单价</th>
  60.           <th>数量</th>
  61.           <th>总价</th>
  62.         </tr>
  63.       </thead>
  64.       <tbody>
  65.         <tr>
  66.           <td>SN-1</td>
  67.           <td>显示器</td>
  68.           <td>1000</td>
  69.           <td>2</td>
  70.           <td>2000</td>
  71.         </tr>
  72.         <tr>
  73.           <td>SN-2</td>
  74.           <td>鼠标</td>
  75.           <td>100</td>
  76.           <td>2</td>
  77.           <td>200</td>
  78.         </tr>
  79.         <tr>
  80.           <td>SN-3</td>
  81.           <td>键盘</td>
  82.           <td>500</td>
  83.           <td>2</td>
  84.           <td>1000</td>
  85.         </tr>
  86.         <tr>
  87.           <td>SN-4</td>
  88.           <td>主板</td>
  89.           <td>700</td>
  90.           <td>1</td>
  91.           <td>700</td>
  92.         </tr>
  93.         <tr>
  94.           <td>SN-5</td>
  95.           <td>CPU</td>
  96.           <td>1000</td>
  97.           <td>2</td>
  98.           <td>2000</td>
  99.         </tr>
  100.       </tbody>
  101.       <tfoot>
  102.         <tr>
  103.           <td colspan="3">总计：</td>
  104.           <td>9</td>
  105.           <td>5900</td>
  106.         </tr>
  107.       </tfoot>
  108.     </table>
  109.     <div>
  110.       <button>结算</button>
  111.     </div>
  112.   </body>
  113. </html>

显示结果

购物车二：div+css

  • 通过 CSS 设置表格的显示样式
CSS HTML
display: table; <table></table>
display: table-caption; <caption></caption>
display: table-header-group; <thead></thead>
display: table-row-group; <tbody></tbody>
display: table-footer-group; <tfoot></tfoot>
display: table-row; <tr></tr>
display: table-cell; <td></td>
  • 以及列分组相关功能实现

示例代码

  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>购物车二：`div`+`css`</title>
  7.     <style>
  8.       .table {
  9.         display: table;
  10.         width: 70%;
  11.         margin: auto;
  12.         text-align: center;
  13.       }
  14.       .table-caption {
  15.         display: table-caption;
  16.         font-size: 1.5rem;
  17.         font-weight: bolder;
  18.         margin-top: 20px;
  19.         margin-bottom: 20px;
  20.       }
  21.       .table-thead {
  22.         display: table-header-group;
  23.       }
  24.       .table-tbody {
  25.         display: table-row-group;
  26.       }
  27.       .table-tfoot {
  28.         display: table-footer-group;
  29.         color: coral;
  30.       }
  31.       .table-row {
  32.         display: table-row;
  33.         height: 30px;
  34.       }
  35.       .table-cell {
  36.         display: table-cell;
  37.         height: 30px;
  38.       }
  39.       .table-thead .table-cell {
  40.         background-color: lightblue;
  41.       }
  42.       .table-tbody .table-cell {
  43.         border-bottom: 1px solid #ccc;
  44.       }
  45.       .button {
  46.         width: 70%;
  47.         margin: 10px auto;
  48.       }
  49.       div button {
  50.         float: right;
  51.         border: none;
  52.         width: 100px;
  53.         height: 50px;
  54.       }
  55.       div button:hover {
  56.         background-color: red;
  57.         font-size: large;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <div class="table">
  63.       <div class="table-caption">购物车</div>
  64.       <div class="table-thead">
  65.         <div class="table-row">
  66.           <div class="table-cell">编码</div>
  67.           <div class="table-cell">名称</div>
  68.           <div class="table-cell">单价</div>
  69.           <div class="table-cell">数量</div>
  70.           <div class="table-cell">总价</div>
  71.         </div>
  72.       </div>
  73.       <div class="table-tbody">
  74.         <div class="table-row">
  75.           <div class="table-cell">SN-1</div>
  76.           <div class="table-cell">显示器</div>
  77.           <div class="table-cell">1000</div>
  78.           <div class="table-cell">2</div>
  79.           <div class="table-cell">2000</div>
  80.         </div>
  81.         <div class="table-row">
  82.           <div class="table-cell">SN-2</div>
  83.           <div class="table-cell">鼠标</div>
  84.           <div class="table-cell">100</div>
  85.           <div class="table-cell">2</div>
  86.           <div class="table-cell">200</div>
  87.         </div>
  88.         <div class="table-row">
  89.           <div class="table-cell">SN-3</div>
  90.           <div class="table-cell">键盘</div>
  91.           <div class="table-cell">500</div>
  92.           <div class="table-cell">2</div>
  93.           <div class="table-cell">1000</div>
  94.         </div>
  95.         <div class="table-row">
  96.           <div class="table-cell">SN-4</div>
  97.           <div class="table-cell">主板</div>
  98.           <div class="table-cell">700</div>
  99.           <div class="table-cell">1</div>
  100.           <div class="table-cell">700</div>
  101.         </div>
  102.         <div class="table-row">
  103.           <div class="table-cell">SN-5</div>
  104.           <div class="table-cell">CPU</div>
  105.           <div class="table-cell">1000</div>
  106.           <div class="table-cell">2</div>
  107.           <div class="table-cell">2000</div>
  108.         </div>
  109.       </div>
  110.       <div class="table-tfoot">
  111.         <div class="table-row">
  112.           <!-- 填充空格表示单元格合并 -->
  113.           <div class="table-cell">&nbsp;</div>
  114.           <div class="table-cell">&nbsp;</div>
  115.           <div class="table-cell">总计：</div>
  116.           <div class="table-cell">9</div>
  117.           <div class="table-cell">5900</div>
  118.         </div>
  119.       </div>
  120.     </div>
  121.     <div class="button">
  122.       <button>结算</button>
  123.     </div>
  124.   </body>
  125. </html>

显示结果

用户注册页面

  • <form>标签用于创建 HTML 表单
  • 使用<input>标签实现用户输入
类型 描述
type="text" 输入文本类型
type="email" 输入 email 格式内容
type="password" 输入密码
type="date" 输入日期
type="radio" 单选框
type="checkbox" 复选框
type="search" 搜索框
type="file" 文件上传
type="hidden" 隐藏选项

示例代码

  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.         background-color: lightgrey;
  10.       }
  11.       .register h3 {
  12.         text-align: center;
  13.       }
  14.       .register .base {
  15.         background-color: lightseagreen;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="register">
  21.       <h3>用户注册</h3>
  22.       <form action="" method="">
  23.         <fieldset>
  24.           <legend>基本信息（必填）</legend>
  25.           <div class="Base">
  26.             <label for="Name">账号：</label>
  27.             <input
  28.               type="text"
  29.               name="myName"
  30.               id="Name"
  31.               placeholder="6-15个字符"
  32.               required
  33.               autofocus
  34.             />
  35.           </div>
  36.           <div>
  37.             <label for="Email">邮箱：</label>
  38.             <input
  39.               type="email"
  40.               name="myEmail"
  41.               id="Email"
  42.               placeholder="demo@example.com"
  43.               required
  44.             />
  45.           </div>
  46.           <div>
  47.             <label for="Pwd1">密码：</label>
  48.             <input
  49.               type="password"
  50.               name="myPassword1"
  51.               id="Pwd1"
  52.               placeholder="********"
  53.             />
  54.           </div>
  55.           <div>
  56.             <label for="Pwd2">确认：</label>
  57.             <input
  58.               type="password"
  59.               name="myPassword2"
  60.               id="Pwd2"
  61.               placeholder="********"
  62.             />
  63.           </div>
  64.         </fieldset>
  65.         <fieldset>
  66.           <legend>扩展信息（选填）</legend>
  67.           <div>
  68.             <label for="Birth">生日：</label>
  69.             <input type="date" name="myBirth" id="Birth" />
  70.           </div>
  71.           <div>
  72.             <label for="">性别：</label>
  73.             <input type="radio" name="myGender" value="male" />
  74.             <label for="">男</label>
  75.             <input type="radio" name="myGender" value="female" />
  76.             <label for="">女</label>
  77.             <input type="radio" name="myGender" value="secret" checked />
  78.             <label for="">保密</label>
  79.           </div>
  80.           <div>
  81.             <label for="">爱好：</label>
  82.             <input type="checkbox" name="myHobby[]" id="Game" value="game" />
  83.             <label for="Game">打游戏</label>
  84.             <input type="checkbox" name="myHobby[]" id="Shoot" value="shoot" />
  85.             <label for="Shoot">拍摄</label>
  86.             <input
  87.               type="checkbox"
  88.               name="myHobby[]"
  89.               id="Prog"
  90.               value="program"
  91.               checked
  92.             />
  93.             <label for="Prog">编程</label>
  94.           </div>
  95.           <div>
  96.             <label for="">手机：</label>
  97.             <input type="search" list="lists" name="myBrand" id="Brand" />
  98.             <datalist id="lists">
  99.               <option value="apple">苹果</option>
  100.               <option value="huawei">华为</option>
  101.               <option value="xiaomi">小米</option>
  102.             </datalist>
  103.           </div>
  104.           <div>
  105.             <label for="">文件：</label>
  106.             <input type="file" name="" id="" />
  107.           </div>
  108.         </fieldset>
  109.       </form>
  110.       <div>
  111.         <button>提交</button>
  112.       </div>
  113.     </div>
  114.   </body>
  115. </html>

显示结果

总结

  • 用户注册页面样式完成效果不好
上一条：PHP大牛成长之路：盒模型与定位下一条：前端表格与表单实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多