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

搜索
博主信息
博文 19
粉絲 0
評論 0
訪問量 17632
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
表單元素、選擇器權(quán)重以及上下文選擇器實戰(zhàn)
王浩
原創(chuàng)
583人瀏覽過
  1. 作業(yè)內(nèi)容：
  2. 1. 制作一個用戶注冊表單,盡可能將常用控件都用一遍; 
  3. 2. 實例演示選擇器權(quán)重的計算過程; 
  4. 3. 實例演示上下文選擇器

1. 這是一個常用的表單元素示例頁面

具體代碼實現(xiàn)如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CH">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>用戶注冊</title>
  8.         <style>
  9.             form {
  10.                 display: grid;
  11.                 gap: 0.5em;
  12.                 margin-left: 30%;
  13.                 margin-right: 30%;
  14.             }
  15.             div {
  16.                 padding: 5px;
  17.                 text-align: center;
  18.             }
  19.             span {
  20.                 color: red;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <form action="login.php" method="post">
  26.             <fieldset>
  27.                 <legend>用戶注冊（帶*號為必填項）</legend>
  28.                 <!-- 普通文本輸入框 -->
  29.                 <div>
  30.                     <label for="username">帳號：</label>
  31.                     <input
  32.                         type="text"
  33.                         name="username"
  34.                         id="username"
  35.                         placeholder="請?zhí)顚懽缘挠脩裘?
  36.                         required
  37.                         autofocus
  38.                     /><span>*</span>
  39.                 </div>
  40.                 <!-- 隱藏密碼輸入框 -->
  41.                 <div>
  42.                     <label for="passwd">密碼：</label>
  43.                     <input
  44.                         type="password"
  45.                         name="passwd"
  46.                         id="passwd"
  47.                         placeholder="請?zhí)顚懨艽a"
  48.                         required
  49.                     /><span>*</span>
  50.                 </div>
  51.                 <!-- 帶有郵箱驗證的輸入框 -->
  52.                 <div>
  53.                     <label for="email">郵箱：</label>
  54.                     <input type="email" name="email" id="email" required /><span
  55.                         >*</span
  56.                     >
  57.                 </div>
  58.                 <!-- 單選框 -->
  59.                 <div>
  60.                     <label for="secret">性別：</label>
  61.                     <input type="radio" name="sex" id="male" />
  62.                     <label for="male">帥哥</label>
  63.                     <input type="radio" name="sex" id="female" />
  64.                     <label for="female">美女</label>
  65.                     <input type="radio" name="sex" id="secret" checked />
  66.                     <label for="secret">保密</label>
  67.                 </div>
  68.                 <!-- 多選框 -->
  69.                 <div>
  70.                     <label>想學(xué)：</label>
  71.                     <input name="study[]" id="html" type="checkbox" /><label
  72.                         for="html"
  73.                         >HTML</label
  74.                     >
  75.                     <input name="study[]" id="css" type="checkbox" /><label
  76.                         for="css"
  77.                         >CSS</label
  78.                     >
  79.                     <input name="study[]" id="php" type="checkbox" /><label
  80.                         for="php"
  81.                         >PHP</label
  82.                     >
  83.                 </div>
  84.                 <!-- 下拉菜單 -->
  85.                 <div>
  86.                     <label for="occupation">職業(yè)：</label>
  87.                     <select name="occupation" id="occupation">
  88.                         <option value="0">請選擇您的職業(yè)</option>
  89.                         <option value="1">上班族</option>
  90.                         <option value="2">公務(wù)人員</option>
  91.                         <option value="3">創(chuàng)業(yè)者</option>
  92.                         <option value="4">無業(yè)</option>
  93.                     </select>
  94.                 </div>
  95.                 <!-- 自定義下拉菜單 -->
  96.                 <div>
  97.                     <label for="message">備注：</label>
  98.                     <input type="search" id="message" name="message" list="data" />
  99.                     <datalist id="data">
  100.                         <option value="我每天晚上8點后才有時間上課">
  101.                             我每天晚上8點后才有時間上課
  102.                         </option>
  103.                         <option value="我只有周末有時間上課">
  104.                             我只有周末有時間上課
  105.                         </option>
  106.                         <option value="我任何時候都有時間上課">
  107.                             我任何時候都有時間上課
  108.                         </option>
  109.                     </datalist>
  110.                 </div>
  111.             </fieldset>
  112.             <button>提交</button>
  113.         </form>
  114.     </body>
  115. </html>

權(quán)重計算

  1. <div>這是個div</div>
  2. <!-- 0, 0, 1 標簽選擇器，權(quán)重為1 -->
  3. <style>
  4.     div {
  5.         color: red;
  6.     }
  7. </style>
  9. <div class="a">這是個帶有a類的div</div>
  10. <!-- 0, 1, 0 類選擇器，權(quán)重為10 -->
  11. <style>
  12.     .a {
  13.         color: blue;
  14.     }
  15. </style>
  17. <div id="b">這是一個id為b的div</div>
  18. <!-- 1, 0, 0 ID選擇器，權(quán)重為100 -->
  19. <style>
  20.     #b {
  21.         color: green;
  22.     }
  23. </style>
  25. <div id="c" class="d">這是既帶類，又帶id的div</div>
  26. <!-- 1, 1, 0 即帶類，又帶id的選擇器，權(quán)重為110 -->
  27. <style>
  28.     #c.d {
  29.         color: chocolate;
  30.     }
  31. </style>
  32. <!-- 1, 1, 1 這個既帶類，又帶id，并且還帶標簽的選擇器，權(quán)重為111，所以會覆蓋上述樣式 -->
  33. <style>
  34.     div#c.d {
  35.         color: darkviolet;
  36.     }
  37. </style>

【總結(jié)】權(quán)重順序：!important > style > id > class > 標簽

上下文選擇器

  1. <div class="list">
  2.     <ul>
  3.         <li><a href="#">item1</a></li>
  4.         <li class="li">
  5.             <a href="#">item2</a>
  6.             <ul>
  7.                 <li>111</li>
  8.                 <li>222</li>
  9.                 <li>333</li>
  10.             </ul>
  11.         </li>
  12.         <li><a href="#">item3</a></li>
  13.         <li><a href="#">item4</a></li>
  14.         <li><a href="#">item5</a></li>
  15.     </ul>
  16. </div>
  17. <style>
  18.     /* 子選擇器 ：>  */
  19.     .list > ul > li {
  20.         border: 1px solid red;
  21.     }
  23.     /* 后代選擇器 ：空格 */
  24.     .list li {
  25.         border: 2px solid green;
  26.     }
  27.     /* 相鄰/next/下一個，用+號即可 */
  28.     .list .li + li {
  29.         text-align: center;
  30.     }
  31.     /* 所有兄弟元素，用~ */
  32.     .li ~ * {
  33.         background-color: #eee;
  34.     }
  35. </style>
批改老師：PHPzPHPz

批改狀態(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é)