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

博客列表 >表单表格实现购物车与登录界面（静态页面）

表单表格实现购物车与登录界面（静态页面）

Blueprint
Blueprint原创
2020年06月17日 18:19:592922浏览

表格

表格常用标签：

标签名 用途/组成部分
<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代码太过冗余（类选择器使用几乎为零）
还是不够细心，代码出错太多，修改耗费大量时间
案例布局上还是有些问题，交互功能也不具备
色调老土

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

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

相关文章

查看更多