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

博客列表 >购物车和用户注册页面的实现

购物车和用户注册页面的实现

longlong
longlong原创
2020年06月17日 11:58:431608浏览

1. 用表格实现购物车

  • 表格中常用标签的认识：
标签名 标签含义
<table>...</table> 用来定义表格
<caption>...</caption> 设置表格标题
<thead>...</thead> 表示表格的表头部分
<tbody>...</tbody> 表示表格的主体部分
<tfoot></tfoot> 表示表格的底部
<tr>...</tr> 表格中的行
<th>...</th> 定义表格的标题栏，会默认加粗和居中显示
<td>...</td> 表格中的列
<clogroup>...</colgroup> 定义表格列的组

下面用以上标签写一个html的表格页面：

  1. <body>
  2.     <table>
  3.       <caption>
  4.         购物车
  5.       </caption>
  6.       <thead>
  7.         <tr>
  8.           <th>
  9.             <input type="checkbox" name="box" id="box-all" /><label
  10.               for="box-all"
  11.               >全选</label
  12.             >
  13.           </th>
  14.           <th>序号</th>
  15.           <th>商品</th>
  16.           <th>价格</th>
  17.           <th>店铺</th>
  18.         </tr>
  19.       </thead>
  20.       <tbody>
  21.         <tr>
  22.           <td>
  23.             <input type="checkbox" name="box" id="box-1" />
  24.           </td>
  25.           <td>1</td>
  26.           <td>男士服装</td>
  27.           <td>50</td>
  28.           <td>老爷子旗舰店</td>
  29.         </tr>
  30.         <tr>
  31.           <td><input type="checkbox" name="box" id="box-2" /></td>
  32.           <td>2</td>
  33.           <td>电脑桌</td>
  34.           <td>580</td>
  35.           <td>星空数码专营店</td>
  36.         </tr>
  37.         <tr>
  38.           <td><input type="checkbox" name="box" id="box-3" /></td>
  39.           <td>3</td>
  40.           <td>拖鞋</td>
  41.           <td>20</td>
  42.           <td>浩然五金商行</td>
  43.         </tr>
  44.         <tr>
  45.           <td><input type="checkbox" name="box" id="box-4" /></td>
  46.           <td>4</td>
  47.           <td>台灯</td>
  48.           <td>150</td>
  49.           <td>非凡灯饰专卖店</td>
  50.         </tr>
  51.         <tr>
  52.           <td><input type="checkbox" name="box" id="box-5" /></td>
  53.           <td>5</td>
  54.           <td>打印机</td>
  55.           <td>380</td>
  56.           <td>鼎盛耗材旗舰店</td>
  57.         </tr>
  58.         <tr>
  59.           <td><input type="checkbox" name="box" id="box-6" /></td>
  60.           <td>6</td>
  61.           <td>落地扇</td>
  62.           <td>260</td>
  63.           <td>凰眼睛电器专卖店</td>
  64.         </tr>
  65.       </tbody>
  66.       <tfoot>
  67.         <tr>
  68.           <td colspan="3">总计:</td>
  69.           <td colspan="2">1440</td>
  70.         </tr>
  71.       </tfoot>
  72.     </table>
  73.     <div><button>提交</button></div>
  74.   </body>

然后利用CSS处理一下表格的样式，代码如下：

  1. <style>
  2.     /* 设置表格在页面居中，边框合并，视口宽度 */
  3.     table {
  4.       border-collapse: collapse;
  5.       margin: 20px auto;
  6.       width: 60vw;
  7.       text-align: center;
  8.     }
  9.     /* 设置单元格的下边框，文本颜色，内边距 */
  10.     table tr th,
  11.     table tr td {
  12.       border-bottom: 1px solid rgb(226, 216, 216);
  13.       padding: 12px;
  14.       color: rgb(138, 118, 118);
  15.     }
  16.     /* 设置提交按钮的父容器视口宽度和表格一致，按钮靠右显示 */
  17.     body div {
  18.       width: 60vw;
  19.       margin: auto;
  20.       text-align: right;
  21.     }
  22.     /* 设置表格标题大小，与表格正文的外边距 */
  23.     table caption {
  24.       font-size: 1.5rem;
  25.       color: rgb(230, 224, 140);
  26.       margin-bottom: 2vh;
  27.     }
  28.     /* 设置表头背景色和文本颜色 */
  29.     table thead {
  30.       background-color: rgb(26, 247, 236);
  31.       font-weight: lighter;
  32.       color: rgb(65, 110, 231);
  33.     }
  34.     /* 设置提交按钮宽，高，无边框，背景色 */
  35.     div button {
  36.       width: 10vw;
  37.       height: 5vh;
  38.       border: 0;
  39.       background-color: rgb(143, 238, 131);
  40.       border-radius: 10px;
  41.     }
  42.     /* 设置当光标移动到按钮上的背景色变化以及光标变为手型 */
  43.     div button:hover {
  44.       background-color: hotpink;
  45.       cursor: pointer;
  46.     }
  47.     /* 设置隔行变色 */
  48.     table tbody tr:nth-of-type(even) {
  49.       background-color: rgb(220, 240, 164);
  50.     }
  51.     /* 设置光标移动到表格行上时背景色的变化 */
  52.     table tbody tr:hover {
  53.       background-color: rgb(240, 232, 232);
  54.     }
  55.     /* 设置表格底部文本颜色，字体大小，对齐方式 */
  56.     table tfoot tr td {
  57.       color: rgb(241, 98, 105);
  58.       font-size: 1.2rem;
  59.       border-bottom: 0;
  60.       text-align: right;
  61.     }
  62.     /* 调整表格底部对齐方式显示 */
  63.     table tfoot tr td:last-of-type {
  64.       text-align: left;
  65.       padding-left: 30px;
  66.     }
  67.   </style>

现在就完成了一个静态的页面，复选框的交互效果需要用到JS去写，暂时就不做了，最终页面的变化效果如下：

2. 用表单完成一个用户注册页面

  • 常用表单标签：
标签名 标签含义
<form>...</form> 定义供用户输入的表单
<input> 定义输入域
<textarea>...<textarea> 定义文本域（一个多行的输入控件）
<label>...</labei> 绑定<input>标签，多用于输入标题
<fieldset>...<fieldset> 定义一组相关的表单元素，并用外框包裹起来
<legend>...</legend> 定义<fieldset>的标题
<datalist>...</datalist> 指定一个预先输入定义的选项控件
<option>...</option> 定义列表的选项
<button>...</button> 定义一个点击按钮

下面用以上标签制作一个用户注册页面的表单，html代码如下：

  1. <body>
  2.     <h2>用户注册</h2>
  3.     <form action="" method="POST">
  4.       <fieldset>
  5.         <legend>基本信息（必填项）</legend>
  6.         <div>
  7.           <label
  8.             >账号：
  9.             <input
  10.               type="text"
  11.               name="username"
  12.               placeholder="6-10位字符且包含数字、字母或下划线"
  13.               autofocus
  14.               required
  15.               autocomplete="off"
  16.             />
  17.           </label>
  18.         </div>
  19.         <div>
  20.           <label
  21.             >邮箱：
  22.             <input
  23.               type="email"
  24.               name="email"
  25.               placeholder="name@example.com"
  26.               required
  27.               autocomplete="off"
  28.             />
  29.           </label>
  30.         </div>
  31.         <div>
  32.           <label
  33.             >密码：
  34.             <input
  35.               type="password"
  36.               name="password-1"
  37.               placeholder="6位数密码"
  38.               required
  39.               autocomplete="off"
  40.             />
  41.           </label>
  42.         </div>
  43.         <div>
  44.           <label
  45.             >确认：
  46.             <input
  47.               type="password"
  48.               name="password-2"
  49.               placeholder="再次输入密码"
  50.               required
  51.               autocomplete="off"
  52.             />
  53.           </label>
  54.         </div>
  55.         <div>
  56.           <label
  57.             >电话：
  58.             <input
  59.               type="phone"
  60.               name="phone"
  61.               placeholder="11位数手机号码"
  62.               required
  63.               autocomplete="off"
  64.             />
  65.           </label>
  66.         </div>
  67.       </fieldset>
  68.       <fieldset>
  69.         <legend>扩展信息（选填）</legend>
  70.         <div>
  71.           <label
  72.             >姓名：
  73.             <input type="text" name="fullName" />
  74.           </label>
  75.         </div>
  76.         <div>
  77.           <label
  78.             >生日：
  79.             <input type="date" name="birthday" />
  80.           </label>
  81.         </div>
  82.         <div>
  83.           <label for="secret"
  84.             >性别：
  85.             <input type="radio" name="gender" value="male" id="male" /><label
  86.               for="male"
  87.               >男</label
  88.             >
  89.             <input
  90.               type="radio"
  91.               name="gender"
  92.               value="female"
  93.               id="female"
  94.             /><label for="female">女</label>
  95.             <input
  96.               type="radio"
  97.               name="gender"
  98.               value="secret"
  99.               id="secret"
  100.               checked
  101.             /><label for="secret">保密</label>
  102.           </label>
  103.         </div>
  104.         <div>
  105.           <label for="fish"
  106.             >爱好：
  107.             <input type="checkbox" name="hobby[]" value="run" id="run" /><label
  108.               for="run"
  109.               >跑步</label
  110.             >
  111.             <input
  112.               type="checkbox"
  113.               name="hobby[]"
  114.               value="fish"
  115.               id="fish"
  116.             /><label for="fish">钓鱼</label>
  117.             <input
  118.               type="checkbox"
  119.               name="read"
  120.               value="read"
  121.               id="read"
  122.               checked
  123.             /><label for="read">看书</label>
  124.           </label>
  125.         </div>
  126.         <div>
  127.           <label
  128.             >手机：
  129.             <input type="search" name="tel" list="brand" />
  130.             <datalist id="brand">
  131.               <option value="apple"></option>
  132.               <option value="华为"></option>
  133.               <option value="三星"></option>
  134.               <option value="小米"></option>
  135.               <option value="OPPO"></option>
  136.               <option value="VIVO"></option>
  137.             </datalist>
  138.           </label>
  139.         </div>
  140.       </fieldset>
  141.       <fieldset>
  142.         <legend>其他信息（选填）</legend>
  143.         <div>
  144.           <label
  145.             >上传头像：
  146.             <input type="file" name="face" id="face" accept="image/*" />
  147.           </label>
  148.         </div>
  149.         <div>
  150.           <label
  151.             >简介：
  152.             <textarea
  153.               name="profile"
  154.               id="profile"
  155.               cols="30"
  156.               rows="5"
  157.               placeholder="不超过150字"
  158.             ></textarea>
  159.           </label>
  160.         </div>
  161.       </fieldset>
  162.       <div><button>提交</button></div>
  163.     </form>
  164.   </body>

然后加上CSS样式，是表单美观起来：

  1.   <style>
  2.     /* 设置页面中文字颜色及字体 */
  3.     body {
  4.       color: rgb(104, 93, 93);
  5.       font-family: Arial, Helvetica, sans-serif;
  6.     }
  7.     /* 使标题居中显示 */
  8.     h2 {
  9.       text-align: center;
  10.     }
  11.     /* 设置表单宽度，上边框线，水平居中，外边距 */
  12.     form {
  13.       width: 450px;
  14.       margin: 15px auto;
  15.       border-top: 1px solid rgb(199, 183, 183);
  16.     }
  17.     /* 设置每个表单分组的外边距，背景色，边框线，阴影 */
  18.     form fieldset {
  19.       margin: 15px;
  20.       background-color: rgb(171, 236, 245);
  21.       border-radius: 15px;
  22.       box-shadow: 3px 3px 5px #bbb;
  23.       border: 1px solid rgb(196, 183, 183);
  24.     }
  25.     /* 设置分组标题的背景色，水平居中，与正文内容的边距，圆角，自身内边距 */
  26.     form fieldset legend {
  27.       background-color: rgb(183, 240, 125);
  28.       border-radius: 10px;
  29.       padding: 5px;
  30.       margin: 8px;
  31.       text-align: center;
  32.     }
  33.     /* 设置表单中每个元素的间距 */
  34.     form fieldset div {
  35.       margin: 6px;
  36.     }
  37.     /* 设置第一个表单分组的输入框宽度，便于显示框中提示文本 */
  38.     form fieldset:nth-child(1) div input {
  39.       width: 250px;
  40.     }
  41.     /* 设置提交按钮居中显示 */
  42.     form > div:nth-last-of-type(1) {
  43.       text-align: center;
  44.     }
  45.     /* 设置提交按钮宽度，高度，背景色，圆角 */
  46.     form > div:nth-last-of-type(1) button {
  47.       width: 110px;
  48.       height: 25px;
  49.       background-color: rgb(238, 180, 212);
  50.       border: 0;
  51.       border-radius: 5px;
  52.     }
  53.     /* 设置当光标移动的按钮上时背景色高亮 */
  54.     form > div:nth-last-of-type(1) button:hover {
  55.       cursor: pointer;
  56.       background-color: rgb(214, 108, 166);
  57.     }
  58.     /* 设置当输入框获得焦点时背景色变化 */
  59.     form fieldset input:focus {
  60.       background-color: rgb(243, 225, 202);
  61.     }
  62.   </style>

一个静态的用户注册的表单就完成了，表单中输入框的校验功能也需要用到后面要学习的JS来处理，用正则表达式来判断等等，所以暂时就不做了，最终显示效果如下：

3.总结：

对表格表单的制作过程基本都掌握了，另外还要熟悉一下不太常用的一些标签，然后感觉自己的美术观感不行，调色调不好！多练多看把！

上一条：CSS 选择器、伪类与伪元素下一条：选择器及伪类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多