登录  /  注册
博主信息
博文 8
粉丝 0
评论 0
访问量 7946
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
表单与表格
努力努力再努力
原创
964人浏览过

1.表格

一个完整的表格涉及9个标签/元素

  1. table + caption + colgroup + thead + tbody + tfoot + tr + th + td -->
  2. <!-- 常用的: -->
  3. table + caption + thead + tbody + tr + th + td
  4. <!-- 再简单点: -->
  5. table + caption + tbody + tr + th/td

a.用<table>表格做出的购物车

  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. th,td{
  10. border: 1px solid black;
  11. padding: 7px;
  12. }
  13. /* 去掉每个单元格之间的间隙 设置文本居中和表格居中*/
  14. table{
  15. border-collapse: collapse;
  16. width: 70%;
  17. height: 200px;
  18. text-align: center;
  19. margin:0 auto;
  20. }
  21. /* 设置为表格标题的样式 */
  22. table caption{
  23. font-size: 1.5rem;
  24. color: skyblue;
  25. margin-bottom: 15px;
  26. }
  27. /* 设置头部 */
  28. table thead th{
  29. font-weight: lighter;
  30. background-color:skyblue;
  31. }
  32. /* 设置主体部份 */
  33. table tbody tr:first-of-type{
  34. background-color: seagreen;
  35. }
  36. /* 设置偶数行 */
  37. table tbody tr:nth-of-type(even){
  38. background-color: burlywood;
  39. }
  40. /* 设置鼠标悬停颜色 */
  41. table tbody tr:nth-last-of-type(1):hover{
  42. background-color:blue;
  43. }
  44. table tfoot td{
  45. background-color: cadetblue;
  46. border-bottom: none;
  47. }
  48. body div:first-of-type{
  49. width: 70%;
  50. margin: 5px auto;
  51. }
  52. body div:first-of-type button{
  53. float:right;
  54. width: 50px;
  55. height: 30px;
  56. background-color:peachpuff;
  57. color:white;
  58. /* 设置鼠标小手效果 */
  59. cursor: pointer;
  60. }
  61. body div:first-of-type button:hover{
  62. background-color: blue;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <table>
  68. <caption>
  69. 购物车
  70. </caption>
  71. <!-- 头部 -->
  72. <thead>
  73. <th>ID</th>
  74. <th>品名</th>
  75. <th>单价/元</th>
  76. <th>单位</th>
  77. <th>数量</th>
  78. <th>金额/元</th>
  79. </thead>
  80. <tbody>
  81. <tr>
  82. <td>SN-1010</td>
  83. <td>MacBook Pro电脑</td>
  84. <td>18999</td>
  85. <td></td>
  86. <td>1</td>
  87. <td>18999</td>
  88. </tr>
  89. <tr>
  90. <td>SN-1020</td>
  91. <td>iPhone手机</td>
  92. <td>4999</td>
  93. <td></td>
  94. <td>2</td>
  95. <td>9998</td>
  96. </tr>
  97. <tr>
  98. <td>SN-1030</td>
  99. <td>智能AI音箱</td>
  100. <td>399</td>
  101. <td></td>
  102. <td>5</td>
  103. <td>1995</td>
  104. </tr>
  105. <tr>
  106. <td>SN-1040</td>
  107. <td>SSD移动硬盘</td>
  108. <td>888</td>
  109. <td></td>
  110. <td>2</td>
  111. <td>1776</td>
  112. </tr>
  113. <tr>
  114. <td>SN-1050</td>
  115. <td>黄山毛峰</td>
  116. <td>999</td>
  117. <td></td>
  118. <td>3</td>
  119. <td>2997</td>
  120. </tr>
  121. </tr>
  122. <tfoot>
  123. <tr>
  124. <td colspan="4">总计</td>
  125. <td>13</td>
  126. <td>21321</td>
  127. </tr>
  128. </tfoot>
  129. </tbody>
  130. </table>
  131. <div><button>结算</button></div>
  132. </body>
  133. </html>

b.用<div>和display属性做出的购物车

  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>Document</title>
  7. <style>
  8. /* 表格 */
  9. .table {
  10. display: table;
  11. width: 70%;
  12. text-align: center;
  13. margin: auto;
  14. padding: 10px;
  15. }
  16. /* 标题 */
  17. .table-caption {
  18. display: table-caption;
  19. }
  20. /* 列分组 */
  21. .table-colgroup {
  22. display: table-column-group;
  23. }
  24. /* 设置第一列样式 */
  25. .table-colgroup .table-col:first-of-type {
  26. display: table-column;
  27. background-color: sandybrown;
  28. }
  29. /* 设置剩下两列列样式 */
  30. .table-colgroup .table-col {
  31. display: table-column;
  32. background-color: lawngreen;
  33. }
  34. /* 表头 */
  35. .table-thead {
  36. display: table-header-group;
  37. background-color: skyblue;
  38. }
  39. /* 行 */
  40. .table-row {
  41. display: table-row;
  42. }
  43. /* 列 */
  44. .table-cell {
  45. display: table-cell;
  46. border: 1px solid black;
  47. padding: 5px;
  48. }
  49. /* 主体 */
  50. .table-tbody {
  51. display: table-row-group;
  52. }
  53. /* 底部 */
  54. .table-footer {
  55. display: table-footer-group;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <!-- 表格 -->
  61. <div class="table">
  62. <!-- 标题 -->
  63. <div class="table-caption">购物车</div>
  64. <!-- 列分组 -->
  65. <div class="table-colgroup">
  66. <div class="table-col"></div>
  67. <div class="table-col"></div>
  68. <div class="table-col"></div>
  69. <div class="table-col"></div>
  70. <div class="table-col"></div>
  71. <div class="table-col"></div>
  72. </div>
  73. <!-- 表头 -->
  74. <div class="table-thead">
  75. <div class="table-row">
  76. <div class="table-cell">ID</div>
  77. <div class="table-cell">类型</div>
  78. <div class="table-cell">单价/元</div>
  79. <div class="table-cell">单位</div>
  80. <div class="table-cell">数量</div>
  81. <div class="table-cell">金额/元</div>
  82. </div>
  83. </div>
  84. <!-- 表主体 -->
  85. <div class="table-tbody">
  86. <div class="table-row">
  87. <div class="table-cell">SN-1010</div>
  88. <div class="table-cell">MacBook Pro电脑</div>
  89. <div class="table-cell">18999</div>
  90. <div class="table-cell"></div>
  91. <div class="table-cell">1</div>
  92. <div class="table-cell">18999</div>
  93. </div>
  94. <div class="table-row">
  95. <div class="table-cell">SN-1030</div>
  96. <div class="table-cell">智能AI音箱</div>
  97. <div class="table-cell">399</div>
  98. <div class="table-cell"></div>
  99. <div class="table-cell">5</div>
  100. <div class="table-cell">1995</div>
  101. </div>
  102. <div class="table-row">
  103. <div class="table-cell">SN-1040</div>
  104. <div class="table-cell">SSD移动硬盘</div>
  105. <div class="table-cell">888</div>
  106. <div class="table-cell"></div>
  107. <div class="table-cell">2</div>
  108. <div class="table-cell">1776</div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </body>
  114. </html>

2.表单<input>

常用类型type:text(文本型)、password(密码)、email(邮件)、radio(单选)、checkbox(复选框)、search(选项列表 配合<datalist>使用 id要一致)、file(文件)、hidden(隐藏)

特殊:<textarea> 文本域

属性:autofocus(自动获取焦点),placeholder(说明),required (必需在提交之前填写输入字段)

  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></style>
  8. </head>
  9. <body>
  10. <h3>用户注册</h3>
  11. <from action="" method="POST">
  12. <!-- 控制键 -->
  13. <fieldset>
  14. <legend>基本信息(必填)</legend>
  15. <div>
  16. <label for="username">用户名</label>
  17. <!-- autofocus自动获取焦点 -->
  18. <input
  19. id="username"
  20. type="text"
  21. name="usernmae"
  22. placeholder="6-11个单位长度"
  23. autofocus
  24. required="required"
  25. />
  26. </div>
  27. <div>
  28. <label
  29. >密 码:
  30. <input
  31. type="password"
  32. name="password"
  33. required="required"
  34. placeholder="6-11单位长度"
  35. id="password"
  36. />
  37. </label>
  38. <button onclick="showPwd()">显示密码</button>
  39. </div>
  40. <div>
  41. <label
  42. >确认密码:
  43. <input
  44. type="password1"
  45. name="password1"
  46. required="required"
  47. placeholder="6-11单位长度"
  48. />
  49. </label>
  50. </div>
  51. </fieldset>
  52. <fieldset>
  53. <legend>扩展信息(选填)</legend>
  54. <div>
  55. <label
  56. >生日
  57. <input type="date" name="birthday" />
  58. </label>
  59. </div>
  60. <div>
  61. <!-- 单元按钮 radio name值必须相同-->
  62. <label for="gender"
  63. >性别: <input type="radio" name="gender" value="mela" />
  64. <input type="radio" name="gender" value="mela" />
  65. <input type="radio" name="gender" value="mela" id="gender" />保密
  66. </label>
  67. </div>
  68. <div>
  69. <!--复选框 checkbox-->
  70. <label for="like"
  71. >爱好:
  72. <!-- 因为复选框返回是一个或多个值,最方便后端用数组来处理, 所以将name名称设置为数组形式便于后端脚本处理 -->
  73. <input type="checkbox" name="hobby[]" value="game" /> 打游戏
  74. <input type="checkbox" name="hobby[]" value="shoot" />摄影
  75. <input
  76. type="checkbox"
  77. name="hobby[]"
  78. value="programme"
  79. id="like"
  80. checked
  81. />编程
  82. </label>
  83. </div>
  84. <div>
  85. id
  86. <label
  87. >手机
  88. <!-- 选项列表 -->
  89. <input type="search" list="phone-123" id="phone" name="phone" />
  90. <datalist id="phone-123">
  91. <!-- 文本和label作用一样 -->
  92. <option value="apple">苹果</option>
  93. <option value="huawei" label="华为"></option>
  94. <option value="mi" label="小米"></option>
  95. </datalist>
  96. </label>
  97. </div>
  98. </fieldset>
  99. <fieldset>
  100. <legend>其他信息(选填)</legend>
  101. <div>
  102. <label>
  103. 上传文件:
  104. <input type="file" name="file" />
  105. </label>
  106. </div>
  107. <div>
  108. <label for="resume">简历:</label>
  109. <textarea
  110. name="resume"
  111. id="resume"
  112. cols="30"
  113. rows="10"
  114. placeholder="不超过100字"
  115. ></textarea>
  116. </div>
  117. </fieldset>
  118. <button>提交</button>
  119. </from>
  120. <script>
  121. // 显示密码
  122. function showPwd() {
  123. pwd = document.querySelector("#password");
  124. if (pwd.type == "password") {
  125. pwd.type = "text";
  126. } else {
  127. pwd.type = "password";
  128. }
  129. }
  130. </script>
  131. </body>
  132. </html>

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:做得不错, 代码也清楚规范
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学