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

博客列表 >前端表格实现购物车和表单实现用户注册界面

前端表格实现购物车和表单实现用户注册界面

emagic
emagic原创
2020年06月17日 17:55:23899浏览

0616作业

一、 前端表格实现购物车（表格实现）

  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.     <link rel="stylesheet" type="text/css" href="style.css">
  8.   </head>
  9.   <body>
  10.     <!-- 表格 -->
  11.     <table>
  12.       <!-- 标题 -->
  13.       <caption>
  14.         我的订单
  15.       </caption>
  17.       <!-- 头部 -->
  18.       <thead>
  19.         <tr>
  20.           <th>ID</th>
  21.           <th>商品</th>
  22.           <th>单价/元</th>
  23.           <th>单位</th>
  24.           <th>数量</th>
  25.           <th>金额/元</th>
  26.         </tr>
  27.       </thead>
  29.       <!-- 主体 -->
  30.       <tbody>
  31.         <tr>
  32.           <td>SN-101011</td>
  33.           <td>2080ti显卡</td>
  34.           <td>8999</td>
  35.           <td>块</td>
  36.           <td>1</td>
  37.           <td>8999</td>
  38.         </tr>
  39.         <tr>
  40.           <td>SN-102012</td>
  41.           <td>144hz显示器</td>
  42.           <td>5000</td>
  43.           <td>台</td>
  44.           <td>2</td>
  45.           <td>10000</td>
  46.         </tr>
  47.         <tr>
  48.           <td>SN-103013</td>
  49.           <td>漫步者音箱</td>
  50.           <td>399</td>
  51.           <td>只</td>
  52.           <td>5</td>
  53.           <td>1995</td>
  54.         </tr>
  55.         <tr>
  56.           <td>SN-104014</td>
  57.           <td>SSD移动硬盘</td>
  58.           <td>888</td>
  59.           <td>个</td>
  60.           <td>2</td>
  61.           <td>1776</td>
  62.         </tr>
  63.         <tr>
  64.           <td>SN-105015</td>
  65.           <td>华硕玩家国度路由器</td>
  66.           <td>1000</td>
  67.           <td>台</td>
  68.           <td>3</td>
  69.           <td>3000</td>
  70.         </tr>
  71.       </tbody>
  72.       <!-- 底部 -->
  73.       <tfoot>
  74.         <tr>
  75.           <td colspan="4">总计:</td> 
  76.           <!-- 合并单元格，这里合并4格，后面要响应减掉4个<td> ,否则格式会乱-->
  77.           <td>13</td>
  78.           <td>25770</td>
  79.         </tr>
  80.       </tfoot>
  81.     </table>
  82.     <!-- 结算按钮 -->
  83.     <div>
  84.       <button>结算</button>
  85.     </div>
  86.   </body>
  87. </html>

css代码，通过link引入

  1.       html {
  2.         font-size: 14px;
  3.       }
  4.       table {
  5.         /* 将单元格之间的间隙去掉 */
  6.         border-collapse: collapse;
  7.         width: 70%;
  8.         margin: auto;
  9.         color: #666;
  10.         font-weight: lighter;
  11.         text-align: center;
  12.       }
  13.       /* 表格线直接添加到单元格上面，线条是围绕单元格的 */
  14.       table thead th,
  15.       table td {
  16.         border-bottom: 1px solid #ccc;
  17.         padding: 10px;
  18.       }
  19.       /* 标题样式 */
  20.       table caption {
  21.         font-size: 1.5rem;
  22.         margin-bottom: 15px;
  23.         color: green;
  24.       }
  25.       table th {
  26.         font-weight: lighter;
  27.         color: green;
  28.       }
  29.       table thead tr:first-of-type {
  30.         background-color: lightcyan;
  31.       }
  32.       /* 隔行变色 */
  33.       table tbody tr:nth-of-type(even) {
  34.         background-color: lightgreen;
  35.       }
  36.       /* 鼠标悬停效果 */
  37.       table tbody tr:hover {
  38.         background-color: lightblue;
  39.       }
  40.       /* 底部样式 */
  41.       table tfoot td {
  42.         border-bottom: none;
  43.         color: coral;
  44.         font-size: 1.2rem;
  45.         font-weight: bolder;
  46.       }
  47.       /* 结算按钮 */
  48.       /*因为只有一个按钮，实际效果last-of-type和first-of-type其实都是一样的*/
  49.       body div:last-of-type {
  50.         width: 70%;
  51.         margin: 10px auto;
  52.       }
  54.       body div:first-of-type button {
  55.         /* 靠右 */
  56.         float: right;
  57.         width: 120px;
  58.         height: 32px;
  59.         background-color: seagreen;
  60.         color: white;
  61.         border: none;
  62.         /* 设置鼠标样式，变成手指的形状 */
  63.         cursor: pointer;
  64.       }
  65.       body div:first-of-type button:hover {
  66.         background-color: coral;
  67.         font-size: 1.2rem;
  68.         /* 改表字体相对大小 */
  69.       }

购物车案例

二、表单实现用户注册界面（表单实现）

  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.   </head>
  8.   <body>
  9.     <h3>用户注册</h3>
  10.     <!-- form+input.... -->
  11.     <form action="" method="POST">
  12.       <!-- 控件组 -->
  13.       <fieldset>
  14.         <legend>基本信息(必填)</legend>
  15.         <div>
  16.           <label for="my-username">账号:</label>
  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.             <!限制只能获取email格式>
  30.             name="email"
  31.             id="email-id"
  32.             placeholder="demo@example.com"
  34.           />
  35.         </div>
  36.         <!-- 密码 -->
  37.         <div>
  38.           <label for="pwd-2">密码:</label>
  39.           <input type="password"" name="password1" id="pwd-2"
  40.           placeholder="不少于6位且字母+数字" />
  41.         </div>
  42.         <div>
  43.           <label for="pwd-1">确认:</label>
  44.           <input type="password" name="password2" id="pwd-1" />
  45.         </div>
  46.       </fieldset>
  48.       <fieldset>
  49.         <legend>扩展信息(选填)</legend>
  50.         <div>
  51.           <label
  52.             >生日:
  53.             <input type="date" name="birthday" />
  54.           </label>
  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">男</label
  62.           >
  63.           <input type="radio" name="gender" value="female" id="female" /><label
  64.             for="female">女</label>
  65.           <input   type="radio" name="gender"  value="secret"       id="secret"   checked/><label for="secret">保密</label>
  66.         </div>
  68.         <div>
  69.           <!-- 复选框 -->
  70.           <label for="programme">爱好</label>
  71.           <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
  72.           <input type="checkbox" name="hobby[]" id="game" value="game" /><label
  73.             for="game"
  74.             >打游戏</label
  75.           >
  76.           <input
  77.             type="checkbox"
  78.             name="hobby[]"
  79.             value="shoot"
  80.             id="shoot"
  81.           /><label for="shoot">摄影</label>
  82.           <input
  83.             type="checkbox"
  84.             name="hobby[]"
  85.             value="programme"
  86.             id="programme"
  87.             checked
  88.           /><label for="programme">编程</label>
  89.         </div>
  91.         <div>
  92.           <!-- 选项列表 -->
  93.           <label for="brand">地址:</label>
  94.           <input type="search" list="phone" name="brand" id="brand" />
  95.           <datalist id="phone">
  96.             <option value="广东" label="广东"> </option>
  97.             <option value="浙江" label="浙江"></option>
  98.             <option value="四川" label="四川"> </option>
  99.           </datalist>
  100.         </div>
  101.       </fieldset>
  103.       <fieldset>
  104.         <legend>其它信息(选填)</legend>
  105.         <!--文件上传-->
  106.         <div>
  107.           <label for="uploads">上传头像:</label>
  108.           <input
  109.             type="file"
  110.             name="user_pic"
  111.             id="uploads"
  112.             accept="image/png, image/jpeg, image/gif"
  113.           />
  114.         </div>
  116.         <!--文本域-->
  117.         <div>
  118.           <label for="resume">简历:</label>
  119.           <!--注意文本域没有value属性-->
  120.           <textarea
  121.             name="resume"
  122.             id="resume"
  123.             cols="30"
  124.             rows="5"
  125.             placeholder="不超过500字"
  126.           >
序号 表单属性 特征
1 type=”text” 明文
2 type=”email” 限制只能输入邮箱格式
3 type=”date” 日期格式
4 type=”radio” 单选，单选按钮中的name属性名必须相同
5 type=”checkbox” 复选框，建议name名称设置为数组形式便于后端服务器处理
6 type=”search” 下来列表，如省市联动
7 type=”file” 文件传输
8 type=”hidden” 隐藏域, 无需用户输入但是系统需要的信息，如Id,登录的时间

  • <label for=""> for中的名称必须和id的名称一样，才能实现绑定点击文字跳转到输入框

  • 单选、复选等表单属性中设置checked 表示默认选中的项

  • name属性很重要，是传递给后台服务器的变量值

上一条：用表格制作简单的购物车和用户注册页面-web前端第5章6.12下一条：基于PHP的微信小程序的开发流程-前后台数据交互（2）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多