欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

购物车表格实现和用户注册页面表单实现，div实现员工信息表格

程序员文章站 2022-03-24 09:45:46
...

1.购物车表格实现

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6.         <title>表格实战：购物车</title>
    7. 

  7.         <style>
    8. 

  8.             table{
    9. 

  9.                 /* 将单元格之间的间隙去掉 */
    10. 

  10.                 border-collapse: collapse;
    11. 

  11.                 width: 70%;
    12. 

  12.                 margin: auto;
    13. 

  13.                 color: #666;
    14. 

  14.                 font-weight: lighter;
    15. 

  15.                 /* text-align: center;文本居中 */
    16. 

  16.                 text-align: center;
    17. 

  17.             }
    18. 

  18.             /* 表格线直接添加到单元格上面 */
    19. 

  19.             table thead th,table td{
    20. 

  20.                 border-bottom: 1px solid #000;
    21. 

  21.                 padding: 10px;
    22. 

  22.             }
    23. 

  23.             /* 标题样式 */
    24. 

  24.             table caption{
    25. 

  25.                 font-size: 30px;
    26. 

  26.                 margin-bottom: 15px;
    27. 

  27.                 color: seagreen;
    28. 

  28.             }
    29. 

  29.             /* 设置标题栏字体 */
    30. 

  30.             table th {
    31. 

  31.                 font-weight: lighter;
    32. 

  32.                 color: seagreen;
    33. 

  33.             }
    34. 

  34.             /* 标题栏添加背景色 */
    35. 

  35.             table thead{
    36. 

  36.                 background-color: seashell;
    37. 

  37.             }
    38. 

  38.             /* 隔行变色 */
    39. 

  39.             table tbody tr:nth-of-type(even){
    40. 

  40.                 background-color: skyblue;
    41. 

  41.             }
    42. 

  42.             /* 鼠标悬停效果 */
    43. 

  43.             table tbody tr:hover{
    44. 

  44.                 background-color: snow;
    45. 

  45.             }
    46. 

  46.             /* 底部样式 */
    47. 

  47.             table tfoot td{
    48. 

  48.                 border-bottom: none;
    49. 

  49.                 color: violet;
    50. 

  50.                 font-size: 1.2rem;
    51. 

  51.                 font-weight: bolder;
    52. 

  52.             }
    53. 

    54. 

  54.             /* 结算按钮 */
    55. 

  55.            body div:last-of-type{
    56. 

  56.                 width: 70%;
    57. 

  57.                 margin: auto;
    58. 

  58.             }
    59. 

  59.             body div:first-of-type button{
    60. 

  60.                 /* 靠右 */
    61. 

  61.                 float: right;
    62. 

  62.                 width: 100px;
    63. 

  63.                 height: 32px;
    64. 

  64.                 background-color: seagreen;
    65. 

  65.                 color: wheat;
    66. 

  66.                 border: none;
    67. 

  67.                 /* 设置鼠标样式 */
    68. 

  68.                 cursor: pointer;
    69. 

  69.             }
    70. 

  70.             /* 设置鼠标悬停效果 */
    71. 

  71.             body div:first-of-type button:hover{
    72. 

  72.                 background-color: coral;
    73. 

  73.                 font-size: 1.1rem;
    74. 

  74.             }
    75. 

    76. 

  76.         </style>
    77. 

  77.     </head>
    78. 

  78.     <body>
    79. 

  79.         <!-- 表格 -->
    80. 

  80.         <table>
    81. 

  81.             <!-- 标题 -->
    82. 

  82.             <caption>购物车</caption>
    83. 

  83.             <!-- 头部 -->
    84. 

  84.             <thead>
    85. 

  85.                 <tr>
    86. 

  86.                     <th>ID</th>
    87. 

  87.                     <th>品牌名</th>
    88. 

  88.                     <th>单价/元</th>
    89. 

  89.                     <th>单位</th>
    90. 

  90.                     <th>数量</th>
    91. 

  91.                     <th>金额/元</th>
    92. 

  92.                 </tr>
    93. 

  93.             </thead>
    94. 

  94.             <!-- 主体 -->
    95. 

  95.             <tbody>
    96. 

  96.                 <tr>
    97. 

  97.                     <td>SN-1010</td>
    98. 

  98.                     <td>MacBook Pro电脑</td>
    99. 

  99.                     <td>1888</td>
    100. 

  100.                     <td>台</td>
    101. 

  101.                     <td>1</td>
    102. 

  102.                     <td>1888</td>
    103. 

  103.                 </tr>
    104. 

  104.                 <tr>
    105. 

  105.                     <td>SN-1020</td>
    106. 

  106.                     <td>华为 电脑</td>
    107. 

  107.                     <td>1999</td>
    108. 

  108.                     <td>台</td>
    109. 

  109.                     <td>1</td>
    110. 

  110.                     <td>1999</td>
    111. 

  111.                 </tr>
    112. 

  112.                 <tr>
    113. 

  113.                     <td>SN-1030</td>
    114. 

  114.                     <td>华硕电脑</td>
    115. 

  115.                     <td>2888</td>
    116. 

  116.                     <td>台</td>
    117. 

  117.                     <td>1</td>
    118. 

  118.                     <td>2888</td>
    119. 

  119.                 </tr>
    120. 

  120.                 <tr>
    121. 

  121.                     <td>SN-1040</td>
    122. 

  122.                     <td>戴尔电脑</td>
    123. 

  123.                     <td>2088</td>
    124. 

  124.                     <td>台</td>
    125. 

  125.                     <td>1</td>
    126. 

  126.                     <td>2088</td>
    127. 

  127.                 </tr>
    128. 

  128.             </tbody>
    129. 

  129.             <!-- 底部 -->
    130. 

  130.             <tfoot>
    131. 

  131.                 <tr>
    132. 

  132.                 <!-- colspan跨列 -->
    133. 

  133.                 <td colspan="4">总计：</td>
    134. 

  134.                 <td>13</td>
    135. 

  135.                 <td>12343</td>
    136. 

  136.                 </tr>
    137. 

    138. 

  138.             </tfoot>
    139. 

  139.         </table>
    140. 

  140.         <!-- 结算按钮 -->
    141. 

  141.         <div>
    142. 

  142.             <button>结算</button>
    143. 

  143.         </div>
    144. 

  144.     </body>
    145. 

  145. </html>
    146.

购物车表格实现和用户注册页面表单实现，div实现员工信息表格

2.用户注册页面表单实现

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    6. 

  6.         <title>用户注册</title>
    7. 

  7.         <style>
    8. 

  8.             body {
    9. 

  9.               color: #555;
    10. 

  10.             }
    11. 

  11.             h3 {
    12. 

  12.               text-align: center;
    13. 

  13.             }
    14. 

  14.             form {
    15. 

  15.               width: 450px;
    16. 

  16.               margin: 30px auto;
    17. 

  17.               border-top: 1px solid #aaa;
    18. 

  18.             }
    19. 

  19.             form fieldset {
    20. 

  20.               border: 1px solid seagreen;
    21. 

  21.               background-color: lightcyan;
    22. 

  22.               box-shadow: 2px 2px 4px #bbb;
    23. 

  23.               border-radius: 10px;
    24. 

  24.               margin: 20px;
    25. 

  25.             }
    26. 

  26.             form fieldset legend {
    27. 

  27.               background-color: rgb(178, 231, 201);
    28. 

  28.               border-radius: 10px;
    29. 

  29.               color: seagreen;
    30. 

  30.               padding: 5px 15px;
    31. 

  31.             }
    32. 

    33. 

  33.             form div {
    34. 

  34.               margin: 5px;
    35. 

  35.             }
    36. 

    37. 

  37.             form p {
    38. 

  38.               text-align: center;
    39. 

  39.             }
    40. 

  40.             form .btn {
    41. 

  41.               width: 80px;
    42. 

  42.               height: 30px;
    43. 

  43.               border: none;
    44. 

  44.               background-color: seagreen;
    45. 

  45.               color: #ddd;
    46. 

  46.             }
    47. 

  47.             form .btn:hover {
    48. 

  48.               background-color: coral;
    49. 

  49.               color: white;
    50. 

  50.               cursor: pointer;
    51. 

  51.             }
    52. 

    53. 

  53.             input:focus {
    54. 

  54.               background-color: rgb(226, 226, 175);
    55. 

  55.             }
    56. 

  56.           </style>
    57. 

  57.     </head>
    58. 

  58.     <body>
    59. 

  59.         <h3>用户注册</h3>
    60. 

  60.         <!-- form+input -->
    61. 

  61.         <form action="" method="POST">
    62. 

  62.             <!-- 控件组 -->
    63. 

  63.             <fieldset>
    64. 

  64.                 <legend>基本信息(必填)</legend>
    65. 

  65.                 <div>
    66. 

  66.                     <label for="my-usernam">账号：</label>
    67. 

  67.                     <input type="text" 
    68. 

  68.                     id="my-usernam" 
    69. 

  69.                     name="usernam" 
    70. 

  70.                     placeholder="6-15位字符"
    71. 

  71.                     autofocus
    72. 

  72.                     required
    73. 

  73.                     >
    74. 

  74.                 </div>
    75. 

  75.                 <div>
    76. 

  76.                     <label for="email-id">邮箱：</label>
    77. 

  77.                     <input type="email" 
    78. 

  78.                     name="email" 
    79. 

  79.                     id="email-id"
    80. 

  80.                     placeholder="demo@abc.com"
    81. 

  81.                     required
    82. 

  82.                     >
    83. 

  83.                 </div>
    84. 

  84.                 <!-- 密码 -->
    85. 

  85.                 <div>
    86. 

  86.                     <label for="pwd">密码：</label>
    87. 

  87.                     <input type="password" 
    88. 

  88.                     name="password1" 
    89. 

  89.                     id="pwd"
    90. 

  90.                     placeholder="不少于六位且字母+数字"
    91. 

  91.                     >
    92. 

  92.                     <button onclick="showPwd(this)" id="btn" type="button">显示密码</button>
    93. 

  93.                 </div>
    94. 

  94.                 <div>
    95. 

  95.                     <label for="pwd-1">确认密码：</label>
    96. 

  96.                     <input type="password" name="password2" id="pwd-1">
    97. 

  97.                 </div>
    98. 

  98.             </fieldset>
    99. 

  99.             <fieldset>
    100. 

  100.                 <legend>扩展信息（选填）</legend>
    101. 

  101.                 <div>
    102. 

  102.                     <label for="birthday">生日：</label>
    103. 

  103.                     <input type="date" name="birthday" id="birthday">
    104. 

  104.                 </div>
    105. 

  105.                 <div>
    106. 

  106.                     <!-- 单选按钮 -->
    107. 

  107.                 <label for="secret">性别:</label>
    108. 

  108.                 <!-- 单选按钮中的name属性名必须相同 -->
    109. 

  109.                 <input type="radio" name="gender" id="male" id="male">
    110. 

  110.                 <label for="male">男</label>
    111. 

  111.                 <input type="radio" name="gender" id="female" id="female">
    112. 

  112.                 <label for="female">女</label>
    113. 

  113.                 <input type="radio" name="gender" id="secret" id="secret" checked>
    114. 

  114.                 <label for="secret">保密</label>
    115. 

  115.                 </div>
    116. 

    117. 

  117.                 <div>
    118. 

  118.                     <!-- 复选框 -->
    119. 

  119.                 <label for="programe">爱好</label>
    120. 

  120.                 <!-- 复选框返回是一个或多个值，最方便后端用数组来处理，所以将name名称设置为数组形式便于后端脚本处理 -->
    121. 

  121.                 <input type="checkbox" name="hoddy[]" id="game" value="game">
    122. 

  122.                 <label for="game">打游戏</label>
    123. 

  123.                 <input type="checkbox" name="hoddy[]" id="shoot" value="shoot">
    124. 

  124.                 <label for="shoot">摄影</label>
    125. 

  125.                 <input type="checkbox" name="hoddy[]" id="programe" value="programe" checked>
    126. 

  126.                 <label for="programe">编程</label>
    127. 

  127.                 </div>
    128. 

    129. 

  129.                 <div>
    130. 

  130.                     <!-- 选项列表 -->
    131. 

  131.                     <label for="brand">手机</label>
    132. 

  132.                     <input type="search" name="brand" id="brand" list="phone">
    133. 

  133.                     <datalist id="phone">
    134. 

  134.                         <option value="apple" ></option>
    135. 

  135.                         <option value="huawei" label="华为"></option>
    136. 

  136.                         <option value="mi">小米</option>
    137. 

  137.                     </datalist>
    138. 

    139. 

  139.                 </div>
    140. 

  140.             </fieldset>
    141. 

    142. 

  142.             <fieldset>
    143. 

  143.                 <legend>其他信息(选填)</legend>
    144. 

  144.                 <!-- 文件上传 -->
    145. 

  145.                 <div>
    146. 

  146.                     <label for="uploads">上传头像:</label>
    147. 

  147.                     <input type="file" name="user_pic" 
    148. 

  148.                     id="uploads" accept="image/png,image/jpeg,image/gif">
    149. 

  149.                 </div>
    150. 

  150.                 <div>
    151. 

  151.                     <label for="resume">简历：</label>
    152. 

  152.                     <!-- 注意文本域没有value属性 -->
    153. 

  153.                     <textarea name="resume" id="resume" cols="30" rows="10"></textarea>
    154. 

  154.                 </div>
    155. 

  155.             </fieldset>
    156. 

  156.             <!-- 隐藏域，例如用户的ID，注册，登录的时间。。。。。 -->
    157. 

  157.             <input type="hidden" name="user_id" value="123">
    158. 

  158.             <p>
    159. 

  159.                 <input type="submit" value="提交" class="btn">
    160. 

  160.                 <button class="btn">提交</button>
    161. 

  161.             </p>
    162. 

  162.         </form>
    163. 

  163.         <script>
    164. 

  164.             // 显示密码
    165. 

  165.             function showPwd(ele){
    166. 

  166.                 // const pwd=document.querySelector("#pwd").type="text";
    167. 

  167.                 const pwd=document.querySelector("#pwd");
    168. 

  168.                pwd.type="text"
    169. 

  169.             }
    170. 

    171. 

    172. 

  172.         </script>
    173. 

  173.     </body>
    174. 

  174. </html>
    175.

购物车表格实现和用户注册页面表单实现，div实现员工信息表格

3.div实现员工信息表格

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6.         <title>div实现员工信息表</title>
    7. 

  7.         <style>
    8. 

  8.             /* 表格 */
    9. 

  9.             .table{
    10. 

  10.                 /* display: 规定元素应该生成的框的类型 */
    11. 

  11.                 display: table;
    12. 

  12.                 border: 1px solid #000;
    13. 

  13.                 width: 300px;
    14. 

  14.                 text-align: center;
    15. 

  15.                 margin: auto;
    16. 

  16.             }
    17. 

  17.             /* 标题 */
    18. 

  18.             .table-caption{
    19. 

  19.                 display: table-caption;
    20. 

  20.                 margin-bottom: 10px;
    21. 

  21.                 font-size: 1.4rem;
    22. 

    23. 

  23.             }
    24. 

  24.             /* 表头 */
    25. 

  25.             .table-thead{
    26. 

  26.                 display: table-header-group;
    27. 

  27.                 background-color: darkcyan;
    28. 

  28.             }
    29. 

  29.             /* 行 */
    30. 

  30.             .table-row{
    31. 

  31.                 display: table-row;
    32. 

  32.             }
    33. 

  33.             /* 列 */
    34. 

  34.             .table-cell{
    35. 

  35.                 display: table-cell;
    36. 

  36.                 border: 1px solid #000;
    37. 

  37.                 padding: 5px;
    38. 

  38.             }
    39. 

    40. 

  40.             /* 主体 */
    41. 

  41.             .table-tbody{
    42. 

  42.                 display: table-row-group;
    43. 

  43.             }
    44. 

  44.             /* 底部 */
    45. 

  45.             .table-tfoot{
    46. 

  46.                 display: table-footer-group;
    47. 

  47.             }
    48. 

  48.             /* 列分组table-colgroup */
    49. 

  49.             .table-colgroup{
    50. 

  50.                 display: table-column-group;
    51. 

  51.             }
    52. 

  52.             /* 第一列 */
    53. 

  53.             .table-colgroup .table-col:first-of-type{
    54. 

  54.                 display: table-column;
    55. 

  55.                 background-color: darkgray;
    56. 

  56.             }
    57. 

  57.             /* 其他列 */
    58. 

  58.             .table-colgroup .table-col{
    59. 

  59.                 display: table-column;
    60. 

  60.                 background-color:darksalmon;
    61. 

  61.             }
    62. 

  62.         </style>
    63. 

  63.     </head>
    64. 

  64.     <body>
    65. 

  65.         <!-- 表格：<table> -->
    66. 

  66.         <div class="table">
    67. 

  67.             <div class="table-caption">员工信息表</div>
    68. 

  68.             <!-- 列分组<colgroup> -->
    69. 

  69.                 <div class="table-colgroup">
    70. 

  70.                     <div class="table-col"></div>
    71. 

  71.                     <div class="table-col"></div>
    72. 

  72.                     <div class="table-col"></div>
    73. 

  73.                 </div>
    74. 

    75. 

  75.                 <!-- 表头:<thead> -->
    76. 

  76.                 <div class="table-thead">
    77. 

  77.                     <div class="table-row">
    78. 

  78.                         <div class="table-cell">ID</div>
    79. 

  79.                         <div class="table-cell">姓名</div>
    80. 

  80.                         <div class="table-cell">职务</div>
    81. 

  81.                     </div>
    82. 

  82.                 </div>
    83. 

  83.                 <!-- 主体 -->
    84. 

  84.                 <div class="table-tbody">
    85. 

  85.                     <div class="table-row">
    86. 

  86.                         <div class="table-cell">1</div>
    87. 

  87.                         <div class="table-cell">康师傅</div>
    88. 

  88.                         <div class="table-cell">拉面</div>
    89. 

  89.                     </div>
    90. 

  90.                 </div>
    91. 

  91.                 <div class="table-tbody">
    92. 

  92.                     <div class="table-row">
    93. 

  93.                         <div class="table-cell">2</div>
    94. 

  94.                         <div class="table-cell">程序猿</div>
    95. 

  95.                         <div class="table-cell">IT</div>
    96. 

  96.                     </div>
    97. 

  97.                 </div>
    98. 

  98.                 <div class="table-tbody">
    99. 

  99.                     <div class="table-row">
    100. 

  100.                         <div class="table-cell">2</div>
    101. 

  101.                         <div class="table-cell">码农</div>
    102. 

  102.                         <div class="table-cell">小农农</div>
    103. 

  103.                     </div>
    104. 

  104.                 </div>
    105. 

    106. 

  106.                 <!-- 底部：<tfoot> -->
    107. 

  107.                 <div class="table-tfoot">
    108. 

  108.                     <div class="table-row">
    109. 

  109.                         <div class="table-cell">ds</div>
    110. 

  110.                         <div class="table-cell">bs</div>
    111. 

  111.                         <div class="table-cell">cs</div>
    112. 

  112.                     </div>
    113. 

  113.                 </div>
    114. 

  114.         </div>
    115. 

  115.     </body>
    116. 

  116. </html>
    117.

购物车表格实现和用户注册页面表单实现，div实现员工信息表格

上一篇： flex,简单丑陋的二级下拉菜单，

下一篇： 轮播图自动翻页功能实现

推荐阅读