简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表单表格实现购物车与登录界面（静态页面）
Blogger Information
Blog 11
fans 0
comment 0
visits 13356
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
表单表格实现购物车与登录界面（静态页面）
Blueprint
Original
2932 people have browsed it

表格

表格常用标签：

标签名 用途/组成部分
<table>...</table> 定义html表格
<caption>...</caption> 表格的标题
<thead>...</thead> 表格的表头
<tbody>...</tbody> 表格的主体
<tfoot>...</tfoot> 表格的底部
<th>..</th> 表头单元格
<tr>...</tr> 表格的行
<td>...</td> 普通单元格
<colgroup>...</colgroup> 表格的列组

案例效果:

body代码：

  1. <body>
  2.   <table>
  3.     <caption>
  4.       购物车
  5.     </caption>
  6.     <thead>
  7.       <tr>
  8.         <th><input type="checkbox" /> 全选</th>
  9.         <th>商品名称</th>
  10.         <th>单价</th>
  11.         <th>数量</th>
  12.         <th>金额</th>
  13.         <th>操作</th>
  14.       </tr>
  15.     </thead>
  16.     <tbody>
  17.       <tr>
  18.         <td><input type="checkbox" /></td>
  19.         <td>
  20.           铭影GTX750ti显卡
  21.         </td>
  22.         <td>￥399</td>
  23.         <td>1</td>
  24.         <td>￥399</td>
  25.         <td><a href="">移除商品</a></td>
  26.       </tr>
  27.       <tr>
  28.         <td><input type="checkbox" /></td>
  29.         <td>
  30.           铭影GTX750ti显卡
  31.         </td>
  32.         <td>￥399</td>
  33.         <td>1</td>
  34.         <td>￥399</td>
  35.         <td><a href="">移除商品</a></td>
  36.       </tr>
  37.       <tr>
  38.         <td><input type="checkbox" /></td>
  39.         <td>
  40.           铭影GTX750ti显卡
  41.         </td>
  42.         <td>￥399</td>
  43.         <td>1</td>
  44.         <td>￥399</td>
  45.         <td><a href="">移除商品</a></td>
  46.       </tr>
  47.       <tr>
  48.         <td><input type="checkbox" /></td>
  49.         <td>
  50.           铭影GTX750ti显卡
  51.         </td>
  52.         <td>￥399</td>
  53.         <td>1</td>
  54.         <td>￥399</td>
  55.         <td><a href="">移除商品</a></td>
  56.       </tr>
  57.     </tbody>
  58.     <tfoot>
  59.       <tr>
  60.         <td colspan="4">总计：</td>
  61.         <td class="result">￥1596</td>
  62.         <td class="submit"><a href="login.html">去结算</a></td>
  63.       </tr>
  64.     </tfoot>
  65.   </table>
  66. </body>

效果：

css代码：

  1. <style>
  2.   /* 页面楚初始化 */
  3.   * {
  4.     margin: 0;
  5.     padding: 0;
  6.   }
  7.   /* 表格居中、边框合并、文字居中、表格内字体默认大小、边*/
  8.   table {
  9.     margin: 50px auto;
  10.     border-collapse: collapse;
  11.     text-align: center;
  12.     font-size: 16px;
  13.     border: 1px solid #eee;
  14.   }
  16.   /*表格行的背景  */
  17.   tr {
  18.     background-color: #eee;
  19.   }
  21.   /* 表格标题字体大小 */
  22.   table caption {
  23.     font-size: 1.5em;
  24.   }
  26.   /*表头单元格背景  */
  27.   th {
  28.     background-color: #ccc;
  29.   }
  31.   /* 单元格的最小宽度，内填充和高度 */
  32.   th,
  33.   td {
  34.     min-width: 100px;
  35.     padding: 0 15px;
  36.     height: 50px;
  37.   }
  39.   /* 表格主体行的下边框 */
  40.   tbody tr {
  41.     border-bottom: 1px solid #ccc;
  42.   }
  44.   /* 去除链接的下划线 */
  45.   a {
  46.     text-decoration: none;
  47.   }
  49.   /*总计金额颜色 */
  50.   .result {
  51.     color: red;
  52.   }
  54.   /* 去除结算单元格内填充 */
  55.   .submit {
  56.     padding: 0;
  57.   }
  59.   /* 结算单元格中链接的样式 */
  60.   td.submit a {
  61.     display: block;
  62.     width: 100%;
  63.     height: 100%;
  64.     line-height: 50px;
  65.     background-color: #ff0000;
  66.     color: white;
  67.     cursor: pointer;
  68.   }
  70.   /* 鼠标悬停行时背景变化 */
  71.   table > tbody > tr:hover {
  72.     background-color: white;
  73.   }
  74. </style>

表单

涉及标签
标签 用途
<form></form> 定义html表单
<label></label> 控件绑定
<fieldset></fieldset> 定义控件组,组合表单中相关的元素
<datalist> </datalist> 定义选项列表，与input元素配合使用
<potion></potion> 定义列表的选项
<select></select> 定义下拉选项列表
<textarea></textarea> 定义文本域 (一个多行的输入控件)
<legend></legend> 定义了 <fieldset> 元素的标题
<optgroup></optgroup> 定义选项组
<button></button> 定义一个点击按钮
<input></input> 输入标签
input的类型:
Type
Text 文本域
password 密码字段
radio 单选按钮
checkbox 复选框
submit 提交按钮
reset 重置按钮
email 限定输入邮箱的文本域
date 时间控件域
image 定义图像形式的提交按钮
button 定义可点击按钮
file 定义输入字段和 “浏览”按钮，供文件上传
hidden 定义隐藏的输入字段

实例
body代码

  1. <body>
  2.   <div>
  3.     <form action="" method="post">
  4.       <fieldset>
  5.         <legend>账户信息（必填项）</legend>
  6.         <div>
  7.           <label for="userEmail"> 用户名：</label>
  8.           <input
  9.             required
  10.             placeholder="请输入用户名 长度6-12个字符"
  11.             type="text"
  12.             name="userName"
  13.             id="userName"
  14.             autofocus
  15.           />
  16.           <span>*</span>
  17.         </div>
  18.         <div>
  19.           <label for="userPassword"> 密码：</label>
  20.           <input
  21.             required
  22.             placeholder="请输入密码 长度6-12个字符"
  23.             type="password"
  24.             name="userPassword"
  25.             id="userPassword"
  26.           />
  27.           <span>*</span>
  28.         </div>
  29.         <div>
  30.           <label for="checkPassword"> 确认：</label>
  31.           <input
  32.             required
  33.             placeholder="请重复输入密码"
  34.             type="password"
  35.             name="checkPassword"
  36.             id="checkPassword"
  37.           />
  38.           <span>*</span>
  39.         </div>
  40.         <div>
  41.           <label for="phone"> 手机号码:</label>
  42.           <input
  43.             required
  44.             placeholder="请输入手机号码 11位有效数字"
  45.             type="number"
  46.             name="phone"
  47.             id="phone"
  48.           />
  49.           <span>*</span>
  50.         </div>
  51.         <div>
  52.           <label for="userEmail"> 电子邮箱：</label>
  53.           <input
  54.             required
  55.             placeholder="123@example.com"
  56.             type="email"
  57.             name="userEmail"
  58.             id="userEmail"
  59.           />
  60.           <span>*</span>
  61.         </div>
  62.       </fieldset>
  63.       <fieldset>
  64.         <legend>详情信息（选填）</legend>
  65.         <div>
  66.           <label for="">真实姓名：</label
  67.           ><input type="text" name="" id="" placeholder="请输入姓名" />
  68.         </div>
  69.         <div>
  70.           <label for="">出生日期：</label><input type="date" name="" id="" />
  71.         </div>
  72.         <div>
  73.           <label for="default">性别：</label
  74.           ><input type="radio" name="gender" id="male" value="male" /><label
  75.             for="male"
  76.             >男</label
  77.           >
  78.           <input type="radio" name="gender" value="madam" id="madam" /><label
  79.             for="madam"
  80.             >女</label
  81.           >
  82.           <input
  83.             type="radio"
  84.             name="gender"
  85.             id="default"
  86.             value="hidden"
  87.             checked
  88.           />
  89.           <label for="hidden">保密</label>
  90.         </div>
  91.         <div>
  92.           <label for="game">爱好：</label>
  93.           <input type="checkbox" name="hobby[]" id="run" /><label for="run"
  94.             >运动</label
  95.           >
  96.           <input type="checkbox" name="hobby[]" id="music" /><label
  97.             for="music"
  98.             >音乐</label
  99.           >
  100.           <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  101.             >游戏</label
  102.           >
  103.         </div>
  104.         <div>
  105.           <label for="info"> 简介： </label>
  106.           <textarea name="" id="info" cols="30" rows="10"></textarea>
  107.         </div>
  108.         <div>
  109.           <label for="fileInfo">附带文件：</label>
  110.           <input type="file" name="" id="fileInfo" />
  111.         </div>
  112.       </fieldset>
  113.       <div>
  114.         <input type="submit" value="提交" />
  115.         <input type="reset" value="重置" />
  116.       </div>
  117.     </form>
  118.     <div>
  119.       <span>已有账号？点击</span>
  120.       <span><a href="login.html">登录</a></span>
  121.     </div>
  122.   </div>
  123. </body>

css代码

  1. <style>
  2.   /* 网页初始化 */
  3.   * {
  4.     margin: 0;
  5.     padding: 0;
  6.   }
  8.   /* 网页背景 */
  9.   body {
  10.     background-color: #419592;
  11.   }
  13.   /* 主体的定位为中心 */
  14.   body > div {
  15.     position: absolute;
  16.     top: 50%;
  17.     left: 50%;
  18.     transform: translate(-50%, -50%);
  19.   }
  20.   /* 表单的宽 */
  21.   form {
  22.     width: 450px;
  23.   }
  25.   /* 表单组的样式 */
  26.   form fieldset {
  27.     margin: 5px;
  28.     background-color: #4195a2;
  29.     border-radius: 20px;
  30.     border: 1px solid #ccc;
  31.     color: white;
  32.   }
  34.   /* legend标题的样式 */
  35.   fieldset legend {
  36.     background-color: gray;
  37.     border-radius: 5%;
  38.     text-align: center;
  39.     padding: 2px 5px;
  40.   }
  42.   /* 分组表单下div的外边距和左内边距 */
  43.   form fieldset div {
  44.     margin: 10px;
  45.     padding-left: 15px;
  46.   }
  48.   /* 第一个表单组的label样式 */
  49.   fieldset > div label:nth-child(1) {
  50.     display: inline-block;
  51.     width: 100px;
  52.   }
  54.   /* 文本域样式 */
  55.   textarea {
  56.     vertical-align: top;
  57.     resize: none;
  58.     border-radius: 10px;
  59.   }
  61.   /* 输入框样式 */
  62.   input {
  63.     border: 1px solid #ccc;
  64.   }
  66.   /*  第一个表单组里的input样式*/
  67.   form fieldset:first-child input {
  68.     height: 25px;
  69.     width: 19em;
  70.     border-radius: 5px;
  71.   }
  73.   /* 第二个表单组里前两个input样式 */
  74.   form > fieldset:nth-child(2) > div:nth-child(-n + 3) > input {
  75.     height: 25px;
  76.     width: 19em;
  77.     border-radius: 5px;
  78.   }
  80.   /* 上传按钮样式 */
  81.   input[type="file"] {
  82.     border-radius: 2px;
  83.   }
  85.   /* 设置必填项*样式 */
  86.   input + span {
  87.     color: red;
  88.   }
  90.   /* 底部链接文字样式 */
  91.   span {
  92.     font-size: 10px;
  93.     color: white;
  94.   }
  96.   a {
  97.     text-decoration: none;
  98.   }
  100.   /* 底部居中 */
  101.   form > div:last-child,
  102.   body > div > div:nth-last-child(-n + 2) {
  103.     text-align: center;
  104.   }
  106.   /* 底部按钮样式 */
  107.   input[type="submit"],
  108.   input[type="reset"] {
  109.     width: 50px;
  110.     border-radius: 5px;
  111.   }
  113.   /* 去除input的number类型的控件 */
  114.   input::-webkit-outer-spin-button,
  115.   input::-webkit-inner-spin-button {
  116.     -webkit-appearance: none;
  117.   }
  118.   /* 输入框获取焦点时背景 */
  119.   input:focus {
  120.     background-color: lightblue;
  121.   }
  122. </style>

总结：
选择器使用的不够灵活，css代码太过冗余（类选择器使用几乎为零）
还是不够细心，代码出错太多，修改耗费大量时间
案例布局上还是有些问题，交互功能也不具备
色调老土

下一步：
经验不足，要多练习
多揣摩别人的网页布局

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！