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

搜索
博主信息
博文 10
粉絲 0
評論 0
訪問量 12647
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
表格與表單實戰(zhàn)教程
天涯
原創(chuàng)
1480人瀏覽過

表格與表單實戰(zhàn)教程

購物車實戰(zhàn)

body主體代碼

  1. <body>
  2.     <!-- 表格 -->
  3.     <table>
  4.       <!-- 標(biāo)題 -->
  5.       <caption>
  6.         購物車
  7.       </caption>
  9.       <!-- 頭部 -->
  10.       <thead>
  11.         <tr>
  12.           <th>ID</th>
  13.           <th>品名</th>
  14.           <th>單價/元</th>
  15.           <th>單位</th>
  16.           <th>數(shù)量</th>
  17.           <th>金額/元</th>
  18.         </tr>
  19.       </thead>
  21.       <!-- 主體 -->
  22.       <tbody>
  23.         <tr>
  24.           <td>SN-1010</td>
  25.           <td>MacBook Pro電腦</td>
  26.           <td>18999</td>
  27.           <td>臺</td>
  28.           <td>1</td>
  29.           <td>18999</td>
  30.         </tr>
  31.         <tr>
  32.           <td>SN-1020</td>
  33.           <td>iPhone手機</td>
  34.           <td>4999</td>
  35.           <td>部</td>
  36.           <td>2</td>
  37.           <td>9998</td>
  38.         </tr>
  39.         <tr>
  40.           <td>SN-1030</td>
  41.           <td>智能AI音箱</td>
  42.           <td>399</td>
  43.           <td>只</td>
  44.           <td>5</td>
  45.           <td>1995</td>
  46.         </tr>
  47.         <tr>
  48.           <td>SN-1040</td>
  49.           <td>SSD移動硬盤</td>
  50.           <td>888</td>
  51.           <td>個</td>
  52.           <td>2</td>
  53.           <td>1776</td>
  54.         </tr>
  55.         <tr>
  56.           <td>SN-1050</td>
  57.           <td>黃山毛峰</td>
  58.           <td>999</td>
  59.           <td>斤</td>
  60.           <td>3</td>
  61.           <td>2997</td>
  62.         </tr>
  63.       </tbody>
  64.       <!-- 底部 -->
  65.       <tfoot>
  66.         <tr>
  67.           <td colspan="4">總計:</td>
  68.           <td>13</td>
  69.           <td>35765</td>
  70.         </tr>
  71.       </tfoot>
  72.     </table>
  74.     <!-- 結(jié)算按鈕 -->
  75.     <div>
  76.       <button>結(jié)算</button>
  77.     </div>
  78.   </body>

樣式代碼

  1.     <style>
  2.       html {
  3.         font-size: 14px;
  4.       }
  5.       table {
  6.         /* 去掉間隙 */
  7.         border-collapse: collapse;
  8.         /* 寬度設(shè)置為窗口的70% */
  9.         width: 70%;
  10.         /* 橫向居中 */
  11.         margin: auto;
  12.         color: #666;
  13.         /* 字體變細 */
  14.         font-weight: lighter;
  15.         /* 文體居中 */
  16.         text-align: center;
  17.       }
  18.       /* 為單元格添加邊框 th為頭單元格，td為表體單元格 */
  19.       table thead th,
  20.       table td {
  21.         /* 添加底邊框 線粗1px，solid 實線 */
  22.         border-bottom: 1px solid #ccc;
  23.         /* 內(nèi)邊柜 */
  24.         padding: 10px;
  25.       }
  27.       /* 標(biāo)題樣式 */
  28.       table caption {
  29.         /* rem指原始字體的倍數(shù)，如原始字體為14px,則1.5rem=14px*1.5=21px */
  30.         font-size: 1.5rem;
  31.         /* 外邊柜，這里以table thead 作為參照物 */
  32.         margin-bottom: 15px;
  33.         color: green;
  34.       }
  36.       /* 設(shè)置表頭欄字體及顏色 */
  37.       table th {
  38.         font-weight: lighter;
  39.         color: green;
  40.       }
  42.       /* 設(shè)置表頭欄背景色 */
  43.       table thead tr:first-of-type {
  44.         background-color: cyan;
  45.       }
  47.       /* 設(shè)置偶數(shù)行為背景色為黃色 */
  48.       table tbody tr:nth-of-type(even) {
  49.         background-color: yellow;
  50.       }
  51.       /* 設(shè)置鼠標(biāo)移動到行的懸停效果 移上變換背景色為粉色*/
  52.       table tbody tr:hover {
  53.         background-color: pink;
  54.       }
  56.       /* 設(shè)置表底樣式 */
  57.       table tfoot td {
  58.         /* 不顯示底部邊框 */
  59.         border-bottom: none;
  60.         color: coral;
  61.         font-size: 1.2rem;
  62.         font-weight: bolder;
  63.       }
  65.       /* 結(jié)算按鈕 */
  66.       /* 用分組結(jié)構(gòu)選擇器取最后一個DIV */
  67.       body div:last-of-type {
  68.         width: 70%;
  69.         margin: 10px auto;
  70.       }
  72.       /* 用分組結(jié)構(gòu)選擇器取第一個DIV 因文檔body中只有一個div,所以和最后一個div是同一個*/
  73.       body div:first-of-type button {
  74.         /* 元素靠右，相對父元素 */
  75.         float: right;
  77.         width: 120px;
  78.         height: 32px;
  79.         background-color: seagreen;
  80.         color: white;
  81.         border: none;
  82.         /* cursor設(shè)置鼠標(biāo)樣式,pointer為手狀 */
  83.         cursor: pointer;
  84.       }
  86.       /* 設(shè)置按鈕鼠標(biāo)懸停樣式 */
  87.       body div:first-of-type button:hover {
  88.         background-color: coral;
  89.         font-size: 1.1rem;
  90.       }
  91.     </style>

顯示效果

購物車實戰(zhàn)

登錄界面實戰(zhàn)

body主體代碼

  1.   <body>
  2.     <h3>用戶注冊</h3>
  3.     <!-- form+input.... -->
  4.     <!-- form:表單固定元素名，action提交目標(biāo)，method為提交方式，常用的值有post、get -->
  5.     <form action="" method="POST">
  6.       <!--fieldset 控件組 -->
  7.       <fieldset>
  8.         <!-- legeng為本控件組定義個標(biāo)題，與fieldset配合使用，不用legeng,默認為無標(biāo)題 -->
  9.         <legend>基本信息(必填)</legend>
  10.         <div>
  11.           <!-- label:標(biāo)簽控件，for屬性的值為需綁定控件的ID值，可以與其它控件綁定，綁定后，點擊label控件，
  12.              則焦點轉(zhuǎn)換到被綁定的控件上。for為空時則不綁定任何控件，獨立顯示，點擊無效 -->
  13.           <label for="my-username">賬號:</label>
  14.           <!-- input:文本錄入控件
  15.               type常用屬性值:text(文本)、email(郵箱)、password(密碼)、date(日期)、radio(單選框)、
  16.               checkbox(復(fù)選框)、search(搜索框，與datalist配合使用時，可顯示下拉提示效果) -->
  17.           <input
  18.             type="text"
  19.             id="my-username"
  20.             name="username"
  21.             placeholder="6-15位字符"
  22.             autofocus
  23.           />
  24.         </div>
  25.         <div>
  26.           <label for="email-id">郵箱:</label>
  27.           <input
  28.             type="email"
  29.             name="email"
  30.             id="email-id"
  31.             placeholder="demo@example.com"
  32.           />
  33.         </div>
  34.         <!-- 密碼 -->
  35.         <div>
  36.           <label for="pwd-1">密碼:</label>
  37.           <!-- placeholder顯示提示條件，當(dāng)文本框為空值時顯示 -->
  38.           <input type="password"" name="password1" id="pwd-1"
  39.           placeholder="不少于6位且字母+數(shù)字" />
  40.         </div>
  41.         <div>
  42.           <label for="pwd-2">確認:</label>
  43.           <input type="password" name="password2" id="pwd-2" />
  44.         </div>
  45.       </fieldset>
  47.       <fieldset>
  48.         <legend>擴展信息(選填)</legend>
  49.         <div>
  50.           <label
  51.             >生日:
  52.             <input type="date" name="birthday" />
  53.           </label>
  54.         </div>
  55.         <!-- 以下單選按鈕用DIV包裝后，起到一組按鈕的效果 -->
  56.         <div>
  57.           <!-- 單選按鈕 -->
  58.           <label for="secret">性別:</label>
  59.           <!-- 單選按鈕中的name屬性名必須相同 -->
  60.           <input type="radio" name="gender" value="male" id="male" /><label
  61.             for="male"
  62.             >男</label
  63.           >
  64.           <input type="radio" name="gender" value="female" id="female" /><label
  65.             for="female"
  66.             >女</label
  67.           >
  68.           <input
  69.             type="radio"
  70.             name="gender"
  71.             value="secret"
  72.             id="secret"
  73.             checked
  74.           /><label for="secret">保密</label>
  75.         </div>
  77.         <div>
  78.           <!-- 復(fù)選框 -->
  79.           <label for="programme">愛好</label>
  80.           <!-- 因為復(fù)選框返回是一個或多個值，最方便后端用數(shù)組來處理， 所以將name名稱設(shè)置為數(shù)組形式便于后端腳本處理 -->
  81.           <!-- checkbox的name屬性值強烈建議加“[]”,為后端處理做準(zhǔn)備 -->
  82.           <input type="checkbox" name="hobby[]" id="game" value="game" /><label
  83.             for="game"
  84.             >打游戲</label
  85.           >
  87.           <!-- checked 默認選中 -->
  88.           <input
  89.             type="checkbox"
  90.             name="hobby[]"
  91.             value="shoot"
  92.             id="shoot"
  93.           /><label for="shoot">攝影</label>
  94.           <input
  95.             type="checkbox"
  96.             name="hobby[]"
  97.             value="programme"
  98.             id="programme"
  99.             checked
  100.           /><label for="programme">編程</label>
  101.         </div>
  103.         <div>
  104.           <!-- 選項列表 -->
  105.           <label for="brand">手機:</label>
  106.           <!-- search：搜索框，與下面的datalist(數(shù)據(jù)列表)配合使用，起到提示效果 -->
  107.           <input type="search" list="phone" name="brand" id="brand" />
  108.           <datalist id="phone">
  109.             <option value="apple"> </option>
  110.             <option value="huawei" label="華為"></option>
  111.             <option value="mi" label="小米"> </option>
  112.           </datalist>
  113.         </div>
  114.       </fieldset>
  116.       <fieldset>
  117.         <legend>其它信息(選填)</legend>
  118.         <!--文件上傳-->
  119.         <div>
  120.           <label for="uploads">上傳頭像:</label>
  121.           <input
  122.             type="file"
  123.             name="user_pic"
  124.             id="uploads"
  125.             accept="image/png, image/jpeg, image/gif"
  126.           />
  127.         </div>
  129.         <!--文本域-->
  130.         <div>
  131.           <label for="resume">簡歷:</label>
  132.           <!--注意文本域沒有value屬性-->
  133.           <textarea
  134.             name="resume"
  135.             id="resume"
  136.             cols="30"
  137.             rows="5"
  138.             placeholder="不超過100字"
  139.           ></textarea>
  140.         </div>
  141.       </fieldset>
  143.       <!-- 隱藏域, 例如用戶的Id, 注冊，登錄的時間。。。。
  144.          隱藏域是為后端取數(shù)存數(shù)準(zhǔn)備的，無須顯示但必須存在的數(shù)據(jù)可以用隱藏域
  145.         用JS控制后，也可實現(xiàn)顯示/隱藏效果 -->
  146.       <input type="hidden" name="user_id" value="123" />
  148.       <p>
  149.         <!-- submit為提交按鈕控件，現(xiàn)在流行直接加button,不建議用submit,因樣式控制沒有button方便 -->
  150.         <input type="submit" value="提交" class="btn" />
  151.         <button class="btn">提交</button>
  152.       </p>
  153.     </form>
  154.   </body>

樣式代碼

  1. <style>
  2.       body {
  3.         color: #555;
  4.       }
  5.       h3 {
  6.         /* 文本居中 */
  7.         text-align: center;
  8.       }
  9.       form {
  10.         width: 450px;
  11.         /* 外邊距 */
  12.         margin: 30px auto;
  13.         border-top: 1px solid #aaa;
  14.       }
  15.       form fieldset {
  16.         border: 1px solid seagreen;
  17.         background-color: lightcyan;
  18.         box-shadow: 2px 2px 4px #bbb;
  19.         border-radius: 10px;
  20.         margin: 20px;
  21.       }
  22.       form fieldset legend {
  23.         background-color: rgb(178, 231, 201);
  24.         /* border-radius：給元素添加圓角邊框 */
  25.         border-radius: 10px;
  26.         color: seagreen;
  28.         padding: 5px 15px;
  29.       }
  31.       form div {
  32.         margin: 5px;
  33.       }
  35.       form p {
  36.         text-align: center;
  37.       }
  38.       form .btn {
  39.         width: 80px;
  40.         height: 30px;
  41.         border: none;
  42.         background-color: seagreen;
  43.         color: #ddd;
  44.       }
  45.       /* 按鈕鼠標(biāo)懸停樣式 */
  46.       form .btn:hover {
  47.         background-color: coral;
  48.         color: white;
  49.         cursor: pointer;
  50.       }
  51.       /* 文本框得到焦點后的樣式 */
  52.       input:focus {
  53.         background-color: rgb(226, 226, 175);
  54.       }
  55.     </style>

顯示效果

登錄界面實戰(zhàn)

批改老師：WJWJ

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

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

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

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