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

博客列表 >用表格制作简单的购物车和用户注册页面-web前端第5章6.12

用表格制作简单的购物车和用户注册页面-web前端第5章6.12

希望
希望原创
2020年06月17日 17:55:51876浏览

1.用表格制作简单的购物车

  • 如图：分为三部分：头部，主体，底部。

购物车

  • 以下是整体代码：

    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.   <style>
    8.     html {
    9.       font-size: 14px;
    10.     }
    11.     table {
    12.       /* 把单元格之间的间隙去除 */
    13.       border-collapse: collapse;
    14.       /* 父容器的70% */
    15.       width: 70%;
    16.       /* 居中 */
    17.       margin: auto;
    18.       color: #666;
    19.       /* 字体变细 */
    20.       font-weight: lighter;
    21.       /* 表格内容全部居中 */
    22.       text-align: center;
    23.     }
    24.     /* 表格线直接添加到单元格上面 */
    25.     table thead th,
    26.     table td {
    27.       /* 只加下边框 */
    28.       border-bottom: 1px solid #000;
    29.       /* 表格中内容与边框的距离拉大些 */
    30.       padding: 10px;
    31.     }
    32.     /* 标题样式 */
    33.     table caption {
    34.       /* html的字体为参照 */
    35.       font-size: 1.5rem;
    36.       margin-bottom: 15px;
    37.       /* 设置购物车这几个字的样式 */
    38.       color: orange;
    39.     }
    41.     table th {
    42.       /* id栏设置样式 */
    43.       font-weight: lighter;
    44.       color: hotpink;
    45.     }
    46.     /* id栏的背景色 */
    47.     table thead {
    48.       background-color: papayawhip;
    49.     }
    50.     /* 隔行变色 */
    51.     table tbody tr:nth-of-type(even) {
    52.       background-color: #efef;
    53.     }
    55.     /* 鼠标悬停时背景色 */
    56.     table tbody tr:hover {
    57.       background-color: skyblue;
    58.     }
    59.     /* 底部样式 */
    60.     table tfoot td {
    61.       /* 底部边框去掉 */
    62.       border-bottom: none;
    63.       color: tomato;
    64.       font-size: 1.2rem;
    65.       font-weight: bolder;
    66.     }
    67.     /* 结算样式 */
    68.     body div:last-of-type {
    69.       width: 70%;
    70.       margin: 10px auto;
    71.     }
    72.     /* 结算按钮 */
    73.     body div:first-of-type button {
    74.       float: right;
    75.       width: 120px;
    76.       height: 34px;
    77.       background-color: teal;
    78.       color: white;
    79.       border: none;
    80.       /* 鼠标样式 变成手*/
    81.       cursor: pointer;
    82.     }
    83.     /* 结算移入时效果 */
    84.     body div:first-of-type button:hover {
    85.       background-color: thistle;
    86.       font-size: 1.1rem;
    87.     }
    88.   </style>
    89. </head>
    90. <body>
    91.   <!-- 表格 -->
    92.   <table>
    93.     <!-- 标题 -->
    94.     <caption>
    95.       购物车
    96.     </caption>
    98.     <!-- 头部 -->
    99.     <thead>
    100.       <tr>
    101.         <th>ID</th>
    102.         <th>品名</th>
    103.         <th>单价/元</th>
    104.         <th>单位</th>
    105.         <th>数量</th>
    106.         <th>金额/元</th>
    107.       </tr>
    108.     </thead>
    110.     <!-- 主体 -->
    111.     <tbody>
    112.       <tr>
    113.         <td>SN-1010</td>
    114.         <td>MacBook Pro电脑</td>
    115.         <td>18999</td>
    116.         <td>台</td>
    117.         <td>1</td>
    118.         <td>18999</td>
    119.       </tr>
    120.       <tr>
    121.         <td>SN-1020</td>
    122.         <td>iPhone手机</td>
    123.         <td>4999</td>
    124.         <td>部</td>
    125.         <td>2</td>
    126.         <td>9998</td>
    127.       </tr>
    128.       <tr>
    129.         <td>SN-1030</td>
    130.         <td>智能AI音箱</td>
    131.         <td>399</td>
    132.         <td>只</td>
    133.         <td>5</td>
    134.         <td>1995</td>
    135.       </tr>
    136.       <tr>
    137.         <td>SN-1040</td>
    138.         <td>SSD移动硬盘</td>
    139.         <td>888</td>
    140.         <td>个</td>
    141.         <td>2</td>
    142.         <td>1776</td>
    143.       </tr>
    144.       <tr>
    145.         <td>SN-1050</td>
    146.         <td>黄山毛峰</td>
    147.         <td>999</td>
    148.         <td>斤</td>
    149.         <td>3</td>
    150.         <td>2997</td>
    151.       </tr>
    152.     </tbody>
    153.     <!-- 底部 -->
    154.     <tfoot>
    155.       <!-- 总计合并 -->
    156.       <tr>
    157.         <td colspan="4">总计：</td>
    158.         <td>13</td>
    159.         <td>35765</td>
    160.       </tr>
    161.     </tfoot>
    162.   </table>
    163.   <!-- 结算按钮 -->
    164.   <div>
    165.     <button>结算</button>
    166.   </div>
    167. </body>
    168. </html>

2.用表格制作用户注册页面

  • 如图：了解表单的基本元素，注意点，样式

用户注册页面

  • 代码如下：

    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.   <style>
    8.     /* 用户注册颜色灰一点并居中 */
    9.     body {
    10.       color: #555;
    11.     }
    12.     h3 {
    13.       text-align: center;
    14.     }
    15.     form {
    16.       width: 450px;
    17.       margin: 30px auto;
    18.       border-top: 1px solid #aaa;
    19.     }
    20.     /* 表的背景上色，椭圆角 */
    21.     form fieldset {
    22.       border: 1px solid seagreen;
    23.       background-color: lightcyan;
    24.       box-shadow: 2px 2px 4px #bbb;
    25.       border-radius: 10px;
    26.       margin: 20px;
    27.     }
    28.     /* 表头组件颜色，椭圆角 */
    29.     form fieldset legend {
    30.       background-color: rgb(178, 231, 201);
    31.       border-radius: 10px;
    32.       color: seagreen;
    33.       padding: 5px 15px;
    34.     }
    36.     form div {
    37.       margin: 5px;
    38.     }
    39.     /* 表格输入时底部颜色 */
    40.     input:focus {
    41.       background-color: darkgrey;
    42.     }
    43.     body p:first-of-type button {
    44.       float: right;
    45.       width: 120px;
    46.       height: 34px;
    47.       background-color: teal;
    48.       color: white;
    49.       border: none;
    50.       /* 鼠标样式 变成手*/
    51.       cursor: pointer;
    52.     }
    53.     /* 结算移入时效果 */
    54.     body p:first-of-type button:hover {
    55.       background-color: thistle;
    56.       font-size: 1.1rem;
    57.     }
    58.   </style>
    59. </head>
    60. <body>
    61.   <h3>用户注册</h3>
    62.   <form action="" method="POST">
    63.     <!-- 1.控件组 -->
    64.     <fieldset>
    65.       <legend>基本信息（必填）</legend>
    66.       <div>
    67.         <label for="username1">账号：</label>
    68.         <input
    69.           type="text"
    70.           id="username1"
    71.           name="username"
    72.           placeholder="6-15个字符"
    73.           autofocus
    74.           required
    75.         />
    76.       </div>
    77.       <div>
    78.         <label for="email-id">邮箱：</label>
    79.         <input
    80.           type="email"
    81.           name="email"
    82.           id="email-id"
    83.           placeholder="demo@example.com"
    84.           required
    85.         />
    86.       </div>
    87.       <!-- 密码 -->
    88.       <div>
    89.         <label for="pwd-1">密码：</label>
    90.         <input
    91.           type="password"
    92.           name="password1"
    93.           id="pwd-1"
    94.           placeholder="不少于6位且字母+数字"
    95.         />
    96.         <button onclick="showPwd()" id="btn" type="button">显示密码</button>
    97.       </div>
    99.       <div>
    100.         <label for="pwd-2">确认：</label>
    101.         <input type="password" name="password2" id="pwd-2" />
    102.       </div>
    103.     </fieldset>
    104.     <!-- <button>提交</button> -->
    105.     <script>
    106.       function showPwd(ele) {
    107.         document.querySelector("#pwd-1").type = "text";
    108.       }
    109.     </script>
    111.     <fieldset>
    112.       <legend>扩展信息（选填）</legend>
    113.       <div>
    114.         <label for="birthday"
    115.           >生日
    116.           <input type="date" name="birthday" />
    117.         </label>
    118.       </div>
    119.       <div>
    120.         <!-- 单选按钮 ：性别-->
    121.         <label for="secret">性别</label>
    122.         <input type="radio" name="gender" value="male" id="" />
    123.         <label for="">男</label>
    124.         <input type="radio" name="gender" value="famale" id="" />
    125.         <label for="">女</label>
    126.         <input type="radio" name="gender" value="secret" id="" checked />
    127.         <label for="">保密</label>
    128.       </div>
    129.       <div>
    130.         <!-- 复选框 -->
    131.         <label for="">爱好</label>
    132.         <input type="checkbox" name="hobby[]" id="game" value="game" />
    133.         <label for="game">打游戏</label>
    134.         <input
    135.           type="checkbox"
    136.           name="hobby[]"
    137.           value="shoot"
    138.           id="shoot"
    139.         /><label for="shoot">摄影</label>
    140.         <input
    141.           type="checkbox"
    142.           name="hobby[]"
    143.           value="programme"
    144.           id="programme"
    145.           checked
    146.         /><label for="programme">编程</label>
    147.       </div>
    149.       <!-- 选项列表 -->
    150.       <div>
    151.         <label for="brand">手机：</label>
    152.         <input type="search" list="phone" name="brand" id="brand" />
    153.         <datalist id="phone">
    154.           <option value="apple"></option>
    155.           <option value="huawei"></option>
    156.           <option value="mi" label="小米"></option>
    157.         </datalist>
    158.       </div>
    159.     </fieldset>
    160.     <fieldset>
    161.       <legend>其它信息(选填)</legend>
    162.       <!--文件上传 ，用file上传文件-->
    163.       <div>
    164.         <label for="uploads">上传头像:</label>
    165.         <input
    166.           type="file"
    167.           name="user_pic"
    168.           id="uploads"
    169.           accept="image/png, image/jpeg, image/gif"
    170.         />
    171.       </div>
    173.       <!--文本域-->
    174.       <div>
    175.         <label for="resume">简历:</label>
    176.         <!--注意文本域没有value属性-->
    177.         <textarea
    178.           name="resume"
    179.           id="resume"
    180.           cols="30"
    181.           rows="5"
    182.           placeholder="不超过100字"
    183.         ></textarea>
    184.       </div>
    185.     </fieldset>
    187.     <!-- 隐藏域, 用户Id, 注册，登录时间。。。。 -->
    188.     <input type="hidden" name="user_id" value="123" />
    189.     <p>
    190.       <!-- <input type="submit" value="提交" class="btn" /> -->
    191.       <!-- 一般用下面的botton -->
    192.       <!-- <input type="submit" value="提交" class="btn" /> -->
    193.       <button class="btn">提交</button>
    194.     </p>
    195.   </form>
    196. </body>
    197. </html>
上一条：表格和表单的学习与应用下一条：前端表格实现购物车和表单实现用户注册界面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多