亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 55
粉絲 3
評(píng)論 0
訪問量 69525
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
表格與表單實(shí)戰(zhàn)練習(xí)
王佳祥
原創(chuàng)
938人瀏覽過

表格與表單實(shí)戰(zhàn)練習(xí)

一、表格(購物車)

  • 代碼:

    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. font-size: 16px;
    10. /* 設(shè)置全局字體大小 */
    11. }
    12. /* 設(shè)置表格寬度,居中顯示在網(wǎng)頁上,并且內(nèi)部居中對(duì)齊 */
    13. table {
    14. width: 70%;
    15. margin: auto;
    16. text-align: center;
    17. }
    18. /* 設(shè)置標(biāo)題字體大小,字體顏色,位置 */
    19. caption {
    20. font-size: 2rem;
    21. color: lightgreen;
    22. margin: 20px 0;
    23. }
    24. /* 設(shè)置單元格的下邊框,內(nèi)邊距 */
    25. td,
    26. th {
    27. border-top: 2px solid #ccc;
    28. padding: 10px;
    29. }
    30. /* 設(shè)置最后一個(gè)div標(biāo)簽,用偽類表示 ,寬度70%,為了和表格對(duì)齊,在頁面居中*/
    31. div:last-of-type {
    32. width: 70%;
    33. margin: auto;
    34. }
    35. /* 設(shè)置結(jié)算按鈕的樣式,浮動(dòng),寬高,背景顏色,去掉默認(rèn)邊框,相對(duì)定位 */
    36. div:last-of-type button {
    37. float: right;
    38. width: 150px;
    39. height: 50px;
    40. background: lightgreen;
    41. border: none;
    42. position: relative;
    43. top: 20px;
    44. }
    45. /* 設(shè)置button的鼠標(biāo)點(diǎn)擊狀態(tài)為小手,字體為藍(lán)色,背景為淺橘色,字體為25px; */
    46. div:last-of-type button:hover {
    47. font-size: 25px;
    48. color: blue;
    49. background: lightsalmon;
    50. cursor: pointer;
    51. }
    52. /* 設(shè)置thead的背景顏色, */
    53. thead {
    54. background: lightskyblue;
    55. }
    56. /* 設(shè)置表格主體的偶數(shù)行背景顏色 */
    57. tbody > tr:nth-of-type(even) {
    58. background: #e1d5d5;
    59. }
    60. /* 設(shè)置表格尾部字體大小,顏色,字寬 */
    61. tfoot {
    62. font-size: 1.2rem;
    63. color: #ff2913;
    64. font-weight: bolder;
    65. }
    66. /* 設(shè)置鼠標(biāo)滑過表格主體內(nèi)容時(shí)的背景顏色 */
    67. tbody > tr:hover {
    68. background: mediumaquamarine;
    69. }
    70. </style>
    71. </head>
    72. <body>
    73. <table cellspacing="0" cellpadding="0">
    74. <caption>
    75. 購物車
    76. </caption>
    77. <thead>
    78. <tr>
    79. <th>ID</th>
    80. <th>品名</th>
    81. <th>單價(jià)/元</th>
    82. <th>單位</th>
    83. <th>數(shù)量</th>
    84. <th>金額/元</th>
    85. </tr>
    86. </thead>
    87. <tbody>
    88. <tr>
    89. <td>1</td>
    90. <td>HUAWEI MateBook X Pro 2020</td>
    91. <td>9988.00</td>
    92. <td>臺(tái)</td>
    93. <td>1</td>
    94. <td>9988.00</td>
    95. </tr>
    96. <tr>
    97. <td>2</td>
    98. <td>HUAWEI Mate 30 Pro 5G</td>
    99. <td>6399.00</td>
    100. <td></td>
    101. <td>2</td>
    102. <td>12798.00</td>
    103. </tr>
    104. <tr>
    105. <td>3</td>
    106. <td>小度在家X8智能音箱</td>
    107. <td>589.00</td>
    108. <td></td>
    109. <td>1</td>
    110. <td>589.00</td>
    111. </tr>
    112. <tr>
    113. <td>4</td>
    114. <td>小米全面屏65英寸 E65A</td>
    115. <td>2599.00</td>
    116. <td>臺(tái)</td>
    117. <td>1</td>
    118. <td>2599.00</td>
    119. </tr>
    120. <tr>
    121. <td>5</td>
    122. <td>小米AloT路由器 AX3600</td>
    123. <td>599.00</td>
    124. <td>個(gè)</td>
    125. <td>1</td>
    126. <td>599.00</td>
    127. </tr>
    128. <tr>
    129. <td>6</td>
    130. <td>iPhone Xs Max 4G</td>
    131. <td>5599.00</td>
    132. <td></td>
    133. <td>1</td>
    134. <td>5599.00</td>
    135. </tr>
    136. </tbody>
    137. <tfoot>
    138. <tr>
    139. <td colspan="4">總計(jì):</td>
    140. <td>數(shù)量:7</td>
    141. <td>32172.00</td>
    142. </tr>
    143. </tfoot>
    144. </table>
    145. <div class=""><button>去結(jié)算</button></div>
    146. </body>
    147. </html>
  • 顯示結(jié)果:


  • 鼠標(biāo)停留在表格上時(shí):

  • 鼠標(biāo)停留在結(jié)算按鈕上時(shí):

二、表單(注冊(cè)頁面)

  • 代碼:

    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>注冊(cè)</title>
    7. <style>
    8. body {
    9. color: #555;
    10. /* 設(shè)置全部字體顏色 */
    11. }
    12. h2 {
    13. text-align: center;
    14. /* 把h3居中 */
    15. }
    16. form {
    17. width: 450px;
    18. margin: 30px auto;
    19. border-top: 1px solid #aaa;
    20. /*設(shè)置表單寬度 外邊距且居中顯示,上邊框?yàn)?像素*/
    21. }
    22. form fieldset {
    23. border: 1px solid seagreen;
    24. background-color: lightcyan;
    25. box-shadow: 2px 2px 4px #bbb;
    26. border-radius: 10px;
    27. margin: 20px;
    28. /*設(shè)置控件樣式,邊框?yàn)?px,背景顏色,邊框陰影,圓角,外邊距*/
    29. }
    30. form fieldset legend {
    31. background-color: rgb(178, 231, 201);
    32. border-radius: 10px;
    33. color: seagreen;
    34. padding: 5px 15px;
    35. /*設(shè)置legend元素背景顏色,圓角,字體顏色,內(nèi)邊距*/
    36. }
    37. form div {
    38. margin: 5px; /*div外邊距*/
    39. }
    40. form > div:last-of-type {
    41. text-align: center; /*字體居中*/
    42. }
    43. form .btn {
    44. width: 80px;
    45. height: 30px;
    46. border: none;
    47. background-color: seagreen;
    48. color: #ddd;
    49. /*按鈕寬高,邊框,背景顏色,字體顏色*/
    50. }
    51. form .btn:hover {
    52. background-color: coral;
    53. color: white;
    54. cursor: pointer;
    55. /*當(dāng)鼠標(biāo)停留在按鈕上時(shí)背景顏色,字體顏色,鼠標(biāo)樣式*/
    56. }
    57. input:focus {
    58. background-color: rgb(226, 226, 175);
    59. /*光標(biāo)在輸入框時(shí),輸入框的背景顏色*/
    60. }
    61. </style>
    62. </head>
    63. <body>
    64. <h2>用戶注冊(cè)</h2>
    65. <form action="" method="POST">
    66. <!-- 控件組 -->
    67. <fieldset>
    68. <legend>基本信息(必填)</legend>
    69. <div>
    70. <label for="username">賬號(hào):</label>
    71. <input
    72. type="text"
    73. id="username"
    74. name="username"
    75. placeholder="6到15位字符"
    76. autofocus
    77. required
    78. />
    79. </div>
    80. <div>
    81. <label for="email">郵箱:</label>
    82. <input
    83. type="email"
    84. id="email"
    85. name="email"
    86. placeholder="demo@example.com"
    87. required
    88. />
    89. </div>
    90. <div>
    91. <label for="password">密碼:</label>
    92. <input
    93. type="password"
    94. name="password"
    95. id="password"
    96. required
    97. placeholder="不少于6位,且字母加數(shù)字"
    98. />
    99. <button onclick="showpwd()" id="btn" type="button">顯示密碼</button>
    100. </div>
    101. <div>
    102. <label for="password1">確認(rèn):</label>
    103. <input
    104. type="password"
    105. name="password1"
    106. id="password1"
    107. required
    108. placeholder="不少于6位,且字母加數(shù)字"
    109. />
    110. </div>
    111. </fieldset>
    112. <fieldset>
    113. <legend>擴(kuò)展信息(選填)</legend>
    114. <div>
    115. <label for="date">生日:</label>
    116. <input type="date" id="date" name="date" />
    117. </div>
    118. <div>
    119. <label for="baomi">性別:</label>
    120. <input type="radio" name="gender" value="man" id="man" />
    121. <label for="man"></label>
    122. <input type="radio" name="gender" value="woman" id="woman" />
    123. <label for="woman"></label>
    124. <input type="radio" name="gender" value="baomi" id="baomi" checked />
    125. <label for="baomi">保密</label>
    126. </div>
    127. <div>
    128. <!-- 因?yàn)閺?fù)選框返回的是一個(gè)值或多個(gè)值,最方便用后端數(shù)組來處理,所有將name名稱設(shè)置為數(shù)組形式便于后端腳本處理 -->
    129. <label for="biancheng">愛好:</label>
    130. <input type="checkbox" name="hobby[]" id="game" value="game" />
    131. <label for="game">打游戲</label>
    132. <input type="checkbox" name="hobby[]" id="sheying" value="sheying" />
    133. <label for="sheying">攝影</label>
    134. <input
    135. type="checkbox"
    136. name="hobby[]"
    137. id="biancheng"
    138. value="biancheng"
    139. checked
    140. />
    141. <label for="biancheng">編程</label>
    142. </div>
    143. <div>
    144. <!-- 選項(xiàng)列表 -->
    145. <label for="">手機(jī):</label>
    146. <input type="search" list="phone" name="brand" />
    147. <datalist id="phone">
    148. <option value="apple"></option>
    149. <option value="huawei"></option>
    150. <option value="xiaomi"></option>
    151. <option value="oppo"></option>
    152. <option value="vivo"></option>
    153. </datalist>
    154. </div>
    155. </fieldset>
    156. <fieldset>
    157. <legend>其它信息(選填)</legend>
    158. <div>
    159. <label for="uploads">上傳頭像</label>
    160. <input
    161. type="file"
    162. id="uploads"
    163. name="user_pic"
    164. accept="image/png,image/jpeg,image/gif"
    165. />
    166. </div>
    167. <div>
    168. <label for=""></label>
    169. <textarea
    170. name="resume"
    171. id="resume"
    172. cols="30"
    173. rows="5"
    174. placeholder="不超過100字??!"
    175. ></textarea>
    176. </div>
    177. </fieldset>
    178. <!-- 隱藏域 hidden 不需要用戶填寫,可以將用戶注冊(cè)時(shí)間,用戶id,登錄時(shí)間隨表單上傳到服務(wù)器-->
    179. <input type="hidden" name="user_id" value="123" />
    180. <div>
    181. <button class="btn">提交</button>
    182. <input type="submit" value="提交" class="btn" />
    183. </div>
    184. </form>
    185. </body>
    186. <script>
    187. function showpwd() {
    188. document.querySelector("#password").type = "text";
    189. const btn = document.querySelector("#btn").innerHTML;
    190. console.log(btn);
    191. if (btn == "顯示密碼") {
    192. document.querySelector("#btn").innerHTML = "隱藏密碼";
    193. }
    194. if (btn == "隱藏密碼") {
    195. document.querySelector("#password").type = "password";
    196. document.querySelector("#btn").innerHTML = "顯示密碼";
    197. }
    198. }
    199. </script>
    200. </html>
  • 顯示結(jié)果:
  • 顯示密碼:
  • 隱藏密碼:

三、換個(gè)姿勢(shì)玩表格

  • 代碼:

    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>換個(gè)姿勢(shì)玩表格</title>
    7. <style>
    8. * {
    9. font-size: 20px;
    10. }
    11. /* 表格 */
    12. .table {
    13. display: table;
    14. border: 1px solid #000;
    15. width: 500px;
    16. text-align: center;
    17. }
    18. /* 標(biāo)題 */
    19. .table-caption {
    20. display: table-caption;
    21. }
    22. /* 表頭 */
    23. .table-thead {
    24. display: table-header-group;
    25. }
    26. /* 行 */
    27. .table-row {
    28. display: table-row;
    29. }
    30. /* 列 */
    31. .table-cell {
    32. display: table-cell;
    33. border: 1px solid #000;
    34. padding: 10px;
    35. }
    36. /* 主體 */
    37. .table-tbody {
    38. display: table-row-group;
    39. }
    40. /* 底部 */
    41. .table-tfoot {
    42. display: table-footer-group;
    43. }
    44. /* 列分組樣式 */
    45. .table-colgroup {
    46. display: table-column-group;
    47. }
    48. .table-colgroup .table-col:first-of-type {
    49. display: table-column;
    50. background-color: cyan;
    51. }
    52. </style>
    53. </head>
    54. <body>
    55. <!-- 表格 -->
    56. <div class="table">
    57. <!-- 表格標(biāo)題 -->
    58. <div class="table-caption">員工信息表</div>
    59. <!-- 列分組 -->
    60. <div class="table-colgroup">
    61. <div class="table-col"></div>
    62. <div class="table-col"></div>
    63. <div class="table-col"></div>
    64. </div>
    65. <!-- 表頭:thead -->
    66. <div class="table-thead">
    67. <!-- 行 -->
    68. <div class="table-row">
    69. <div class="table-cell">ID</div>
    70. <div class="table-cell">姓名</div>
    71. <div class="table-cell">職務(wù)</div>
    72. </div>
    73. </div>
    74. <!-- 表格主體 -->
    75. <div class="table-tbody">
    76. <div class="table-row">
    77. <div class="table-cell">1</div>
    78. <div class="table-cell">張三</div>
    79. <div class="table-cell">程序員</div>
    80. </div>
    81. </div>
    82. <div class="table-tbody">
    83. <div class="table-row">
    84. <div class="table-cell">2</div>
    85. <div class="table-cell">李四</div>
    86. <div class="table-cell">組長(zhǎng)</div>
    87. </div>
    88. </div>
    89. <div class="table-tbody">
    90. <div class="table-row">
    91. <div class="table-cell">3</div>
    92. <div class="table-cell">王五</div>
    93. <div class="table-cell">程序員</div>
    94. </div>
    95. </div>
    96. <!-- 表格尾部 -->
    97. <div class="table-tfoot">
    98. <div class="table-row">
    99. <div class="table-cell">a</div>
    100. <div class="table-cell">b</div>
    101. <div class="table-cell">c</div>
    102. </div>
    103. </div>
    104. </div>
    105. </body>
    106. </html>
  • 顯示結(jié)果:

四、學(xué)習(xí)總結(jié)

1.表格:

  • <table></table>:表格

  • <caption></caption>:表格標(biāo)題

  • <thead></thead>:表格頭部

  • <tr></tr>:表示行

  • <th></th>:表格頭部單元格

  • <tbody></tbody>:表格主體內(nèi)容

  • <td></td>:單元格

  • <tfoot></tfoot>:表格尾部?jī)?nèi)容

2.另一種表格:

  • 用css樣式與div結(jié)合來表示

  • .table:就表示<table>標(biāo)簽,并設(shè)置display:table

  • .table-caption:就表示<caption>標(biāo)簽,并設(shè)置display:table-caption

  • .table-thead:就表示<thead>標(biāo)簽,并設(shè)置display:table-header-group

  • .table-row:就表示<tr>標(biāo)簽,并設(shè)置display:table-row

  • .table-cell:就表示單元格,并設(shè)置display:table-cell

  • .table-tbody:就表示<tbody>標(biāo)簽,并設(shè)置display:table-row-group

  • .table-tfoot:就表示<tfoot>標(biāo)簽,并設(shè)置display:table-footer-group

  • .table-colgroup:表示列分組樣式,設(shè)置display: table-column-group;

3.表單:

  • <form action="跳轉(zhuǎn)地址" method="get/post">表單內(nèi)容</form>

  • <fieldset><legend>信息</legend></fieldset>: 控件組

  • <label for="#id">名稱:</label>:綁定到input標(biāo)簽

  • <input type="text" id="" name="變量名稱" placeholder="占位符" autofocuse required/> 文本框

  • autofocuse輸入框默認(rèn)顯示光標(biāo),required提交時(shí)對(duì)輸入框內(nèi)容進(jìn)行判斷是否符合要求

  • <input type="password" id="" name="變量名稱" placeholder="占位符"> 密碼框

  • <input type="email" id="" name="" /> 郵箱

  • <input type="radio" id="" name="name" value="" /> 單選框

  • <input type="radio" id="" name="name" value="" /> 單選框

  • radio屬性name必須是相同的

  • <input type="checkbox" id="" name="name[]" value="" /> 多選框

  • 因?yàn)閺?fù)選框返回的是一個(gè)值或多個(gè)值,最方便用后端數(shù)組來處理,所有將name名稱設(shè)置為數(shù)組形式便于后端腳本處理

  • <input type="file" id="" name="" accept="image/png,image/jpeg" />上傳文件

  • <input type="search" list="" name="name" />選項(xiàng)列表

  • 選項(xiàng)列表與datalist綁定<datalist id="name"><option value=""></option></datalist>

  • <textarea name="" id="" rows="" cols=""></textarea>多行文本框

  • <input type="hidden" name="" value="" />隱藏域,用于提交用戶信息,登錄時(shí)間

  • <input type="submit" value="提交" />提交按鈕,用于向服務(wù)端提交數(shù)據(jù)

批改老師:WJWJ

批改狀態(tài):合格

老師批語:寫的很認(rèn)真仔細(xì),也很漂亮!
本博文版權(quán)歸博主所有,轉(zhuǎn)載請(qǐng)注明地址!如有侵權(quán)、違法,請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理!
全部評(píng)論 文明上網(wǎng)理性發(fā)言,請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)