简体中文（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月17日 16:53:051158浏览

一.简易购物车（表格实现）

1.使用技术：CSS和HTML中的表格；
2.实现静态页面效果图，如图所示：

3.HTML代码部分：

  1. <table>
  2.       <!-- 标题 -->
  3.       <caption>
  4.         购物车
  5.       </caption>
  6.       <!-- 头部 -->
  7.       <thead>
  8.         <tr>
  9.           <th>ID</th>
  10.           <th>名称</th>
  11.           <th>单价/元</th>
  12.           <th>数量</th>
  13.           <th>总价/元</th>
  14.         </tr>
  15.       </thead>
  17.       <tbody>
  18.         <tr>
  19.           <td>SQ_001</td>
  20.           <td>显示器</td>
  21.           <td>500</td>
  22.           <td>2</td>
  23.           <td>1000</td>
  24.         </tr>
  25.         <tr>
  26.           <td>SQ_002</td>
  27.           <td>篮球</td>
  28.           <td>55</td>
  29.           <td>10</td>
  30.           <td>550</td>
  31.         </tr>
  32.         <tr>
  33.           <td>SQ_003</td>
  34.           <td>华为手机</td>
  35.           <td>3999</td>
  36.           <td>1</td>
  37.           <td>3999</td>
  38.         </tr>
  39.         <tr>
  40.           <td>SQ_004</td>
  41.           <td>联系笔记本</td>
  42.           <td>5500</td>
  43.           <td>2</td>
  44.           <td>11000</td>
  45.         </tr>
  46.         <tr>
  47.           <td>SQ_005</td>
  48.           <td>智能AI音响</td>
  49.           <td>399</td>
  50.           <td>1</td>
  51.           <td>399</td>
  52.         </tr>
  53.       </tbody>
  54.       <tfoot>
  55.         <tr>
  56.           <!-- colspan:合并单员格  -->
  57.           <td colspan="3">总计：</td>
  58.           <td>16</td>
  59.           <td>16948</td>
  60.         </tr>
  61.       </tfoot>
  62.     </table>
  63.     <div class="jiesun"><button>去结算</button></div>
  64.   </body>

4.CSS代码部分：

  1.   <style>
  2.     table {
  3.       /* 去除单元格直接的边框间隙 */
  4.       border-collapse: collapse;
  5.       width: 75%;
  6.       /* 设置表格居中 */
  7.       margin: auto;
  8.       color: slategray;
  9.       font-size: lighter;
  10.       text-align: center;
  11.     }
  12.     td,
  13.     th {
  14.       /* 给所有单元格加边框 */
  15.       border-bottom: 1px solid rgb(216, 213, 213);
  16.       /* 设置内边距 */
  17.       padding: 10px;
  18.     }
  19.     table th {
  20.       background-color: rgb(30, 168, 223);
  21.       color: springgreen;
  22.       font-weight: lighter;
  23.     }
  24.     table caption {
  25.       font-size: 2rem;
  26.       margin-bottom: 15px;
  27.     }
  28.     table tbody tr:nth-of-type(even) {
  29.       background-color: #efef;
  30.     }
  31.     /* 鼠标悬停效果 */
  32.     table tbody tr:hover {
  33.       background-color: tomato;
  34.     }
  35.     table tfoot td {
  36.       border-bottom: none;
  37.       color: yellowgreen;
  38.       font-size: 1.5rem;
  39.     }
  40.     .jiesun {
  41.       width: 75%;
  42.       margin: auto;
  43.       margin-top: 20px;
  44.     }
  45.     .jiesun button {
  46.       background-color: rgb(12, 189, 189);
  47.       border: none;
  48.       border-radius: 45%;
  49.       float: right;
  50.       font-size: 1.2rem;
  51.       /* 设置鼠标移入边手样式 */
  52.       cursor: pointer;
  53.     }
  54.     .jiesun button:hover {
  55.       background-color: coral;
  56.       font-size: 1.5rem;
  57.     }
  58.   </style>

二.注册表单

1.使用技术：CSS和HTML中的表单及部分js；
2.实现静态页面效果图，密码显示与隐藏；如图所示：

3.HTML部分代码：

  1.   <body>
  2.     <h1>用户注册</h1>
  3.     <form action="" method="POST">
  4.       <!-- 控件组 -->
  5.       <fieldset>
  6.         <legend>基本信息（必填）</legend>
  7.         <div>
  8.           <label for="username">账号：</label>
  9.           <input
  10.             type="text"
  11.             name="username"
  12.             id="username"
  13.             placeholder="不能少于6个字符"
  14.             required
  15.             autofocus
  16.           />
  17.         </div>
  18.         <div>
  19.           <label for="email">邮箱：</label>
  20.           <input
  21.             type="email"
  22.             name="email"
  23.             id="email"
  24.             placeholder="563463@qq.com"
  25.             required
  26.           />
  27.         </div>
  28.         <div>
  29.           <label for="pwd">密码：</label>
  30.           <input
  31.             type="password"
  32.             name="pwd"
  33.             id="pwd"
  34.             placeholder="123456"
  35.             required
  36.           />
  37.           <button onclick="showpwd()" id="btn" type="button">显示密码</button>
  38.         </div>
  39.         <div>
  40.           <label for="rpwd">确认密码：</label>
  41.           <input type="password" name="rpwd" id="rpwd" required />
  42.         </div>
  43.       </fieldset>
  44.       <fieldset>
  45.         <legend>其他信息（选填）</legend>
  46.         <div>
  47.           <label for="secrecy">性别：</label>
  48.           <input type="radio" name="sex" id="male" /><label>男</label>
  49.           <input type="radio" name="sex" id="female" /><label>女</label>
  50.           <input type="radio" name="sex" id="secrecy" /><label>保密</label>
  51.         </div>
  52.         <div>
  53.           <label
  54.             >生日：
  55.             <input type="date" name="brithday" />
  56.           </label>
  57.         </div>
  58.         <div>
  59.           <label for=""> 爱好：</label>
  60.           <input type="checkbox" name="hobby[]" id="" />旅游
  61.           <input type="checkbox" name="hobby[]" id="" />运动
  62.           <input type="checkbox" name="hobby[]" id="" />摄影
  63.           <input type="checkbox" name="hobby[]" id="" />钓鱼
  64.           <input type="checkbox" name="hobby[]" id="" />打游戏
  65.         </div>
  66.         <div>
  67.           <label for="search">手机品牌：</label>
  68.           <input type="search" name="search" id="search" list="phone" />
  69.           <datalist id="phone">
  70.             <option value="apple" label="苹果"></option>
  71.             <option value="huawei" label="华为"></option>
  72.             <option value="xiaomi" label="小米"></option>
  73.           </datalist>
  74.         </div>
  75.       </fieldset>
  76.       <fieldset>
  77.         <legend>扩展信息</legend>
  78.         <div>
  79.           <label for="userimg">上传头像：</label>
  81.           <input type="file" name="userimg" id="userimg" />
  82.         </div>
  83.         <div>
  84.           <label for="synopsis">简介：</label>
  85.           <textarea
  86.             name="synopsis"
  87.             id="synopsis"
  88.             cols="30"
  89.             rows="5"
  90.             placeholder="不超过100字符"
  91.           ></textarea>
  92.         </div>
  93.       </fieldset>
  94.       <p><button class="btn">注册</button></p>
  95.     </form>
  96.   </body>

4.CSS代码部分：

  1.   <style>
  2.     h1 {
  3.       text-align: center;
  4.     }
  5.     form {
  6.       width: 500px;
  7.       border-top: 1px solid #000;
  8.       margin: 25px auto;
  9.     }
  10.     form fieldset {
  11.       background-color: rgb(147, 238, 238);
  12.       border: 1px solid seagreen;
  13.       box-shadow: 2px 2px 4px #bbb;
  14.       border-radius: 15px;
  15.       margin: 20px;
  16.     }
  17.     form fieldset legend {
  18.       background-color: darkorange;
  20.       color: darkslategrey;
  21.       box-shadow: 2px 2px 4px #bbb;
  22.       border-radius: 10px;
  23.     }
  24.     form p {
  25.       text-align: center;
  26.     }
  28.     .btn {
  29.       background-color: dimgrey;
  30.       color: ghostwhite;
  31.       box-shadow: 2px 2px 4px #bbb;
  32.       font-size: 1.5rem;
  33.       border-radius: 10px;
  34.     }
  35.     .btn:hover {
  36.       background-color: rgb(19, 196, 128);
  37.       font-size: 2.5rem;
  38.       cursor: pointer;
  39.     }
  40.   </style>

5.js代码部分：

  1. <script>
  2.     // 隐藏/显示密码
  3.     function showpwd() {
  4.       const btntype = document.querySelector("#pwd").type;
  5.       if (btntype == "password") {
  6.         document.querySelector("#pwd").type = "text";
  7.         document.querySelector("#btn").innerHTML = "隐藏密码";
  8.       } else {
  9.         document.querySelector("#pwd").type = "password";
  10.         document.querySelector("#btn").innerHTML = "显示密码";
  11.       }
  12.     }
  13.   </script>
上一条：第四节 举例演示简单选择器，上下文选择器 结构伪类选择器，伪类与伪元素下一条：html实战之表格表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多