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

搜索
博主信息
博文 5
粉絲 0
評論 0
訪問量 8481
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
HTML注冊表單控件實(shí)例、CSS模塊化理解與CSS基本/上下文選擇器的掌握
不在線先生
原創(chuàng)
1204人瀏覽過

課程作業(yè)：

  1. 制作一個(gè)用戶注冊表單,將課堂上提到的表單控件全部用到;

  2. 理解css模塊的思想,并試寫一個(gè)案例(選做)

  3. 實(shí)例演示基本選擇器與上下文選擇器

  4. 預(yù)習(xí)偽類選擇器與常用元素的css樣式設(shè)置,盒模型知識等

課程內(nèi)容：

1. 制作一個(gè)用戶注冊表單,將課堂上提到的表單控件全部用到;

1.1 作業(yè)效果：

1.2 實(shí)操代碼：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   </head>
  9.   <style>
  10.     div {
  11.       padding: 10px;
  12.     }
  13.   </style>
  14.   <body>
  15.     <h1>新用戶注冊登記表</h1>
  16.     <form action="" method="post">
  17.       <fieldset>
  18.         <legend>1.用戶賬號信息(必填):</legend>
  19.         <!-- 單行文本框 -->
  20.         <div>
  21.           <label for="username">注冊賬號:</label>
  22.           <input
  23.             type="text"
  24.             id="username"
  25.             autofocus
  26.             required
  27.             placeholder="必須是6-8位數(shù)"
  28.             maxlength="8"
  29.           />
  30.         </div>
  31.         <!-- 密碼框 -->
  32.         <div>
  33.           <label for="password">用戶密碼:</label>
  34.           <input
  35.             type="password"
  36.             id="password"
  37.             required
  38.             placeholder="必須是字母+數(shù)字的組合"
  39.           />
  40.         </div>
  41.       </fieldset>
  42.       <fieldset>
  43.         <legend>2.其他個(gè)人信息</legend>
  44.         <!-- 單選框 -->
  45.         <div>
  46.           <label for="">性別:</label>
  47.           <input type="radio" name="gender" value="male" id="male" />
  48.           <label>男</label>
  49.           <input type="radio" name="gender" value="female" id="female" />
  50.           <label>女</label>
  51.           <input
  52.             type="radio"
  53.             name="gender"
  54.             value="secret"
  55.             id="secret"
  56.             checked
  57.           />
  58.           <label>保密</label>
  59.         </div>
  60.         <!-- 多選框 -->
  61.         <div>
  62.           <label for="">愛好:</label>
  63.           <!-- 因?yàn)樵试S同時(shí)提交多個(gè)值，所以name屬性要寫成數(shù)組格式 -->
  64.           <input type="checkbox" name="hobby[]" id="meishi" /><label
  65.             for="meishi"
  66.             >美食</label
  67.           >
  68.           <input type="checkbox" name="hobby[]" id="lvyou" /><label for="lvyou"
  69.             >旅游</label
  70.           >
  71.           <input type="checkbox" name="hobby[]" id="shuma" /><label for="shuma"
  72.             >數(shù)碼</label
  73.           >
  74.           <input type="checkbox" name="hobby[]" id="biancheng" checked /><label
  75.             for="biancheng"
  76.             >編程</label
  77.           >
  78.         </div>
  79.         <!-- 下拉列表 -->
  80.         <div>
  81.           <label for="">目前的會(huì)員身份</label>
  82.           <select name="level" id="">
  83.             <option value="1" selected>不是會(huì)員</option>
  84.             <option value="2">初級會(huì)員</option>
  85.             <option value="3">中級會(huì)員</option>
  86.             <option value="4">高級會(huì)員</option>
  87.           </select>
  88.         </div>
  89.         <!-- 多行文本框 - 文本域 -->
  90.         <div>
  91.           <label for="jieshao">自我介紹:</label>
  92.           <textarea
  93.             name="jieshao"
  94.             id="jieshao"
  95.             cols="22"
  96.             rows="5"
  97.             placeholder="介紹一下你自己的經(jīng)歷"
  98.           ></textarea>
  99.         </div>
  100.       </fieldset>
  101.       <fieldset>
  102.         <legend>3.附件上傳</legend>
  103.         <!-- 文件上傳 -->
  104.         <div>
  105.           <label for="">照片上傳:</label>
  106.           <input type="file" name="userimg" />
  107.           <input type="submit" value="點(diǎn)擊上傳圖片" />
  108.         </div>
  109.       </fieldset>
  111.       <fieldset>
  112.         <legend>4.其他補(bǔ)充信息</legend>
  113.         <!-- 日期選擇控件 -->
  114.         <div>
  115.           <label for="">生日日期:</label>
  116.           <input type="date" name="depart" />
  117.         </div>
  118.         <!-- 電子郵箱 -->
  119.         <div>
  120.           <label for="email">郵箱地址:</label>
  121.           <input
  122.             type="email"
  123.             name="email"
  124.             id="email"
  125.             placeholder="demo@xxx.com"
  126.           />
  127.         </div>
  128.         <!-- datalist 搜索框 自定義輸入+預(yù)選 -->
  129.         <div>
  130.           <label for="">邀請人:</label>
  131.           <input type="search" name="search" list="my-key" />
  132.           <datalist id="my-key">
  133.             <option value="張三"></option>
  134.             <option value="李四"></option>
  135.             <option value="王五"></option>
  136.           </datalist>
  137.         </div>
  138.       </fieldset>
  139.       <div>
  140.         <input type="submit" name="touxiang" value="點(diǎn)擊提交表單" />
  141.       </div>
  142.     </form>
  143.   </body>
  144. </html>

2. 理解css模塊的思想,并試寫一個(gè)案例(選做)

CSS模塊化是為了使開發(fā)者更好的維護(hù)代碼，同時(shí)根據(jù)實(shí)際的需求按需加載，減少負(fù)荷、提高效率，可以實(shí)現(xiàn)分區(qū)獨(dú)立控制；

作業(yè)內(nèi)容：

作業(yè)代碼：

  • HTML頁面代碼：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width= , initial-scale=1.0" />
  7.     <title>CSS模塊化開發(fā)</title>
  8.     <link rel="stylesheet" href="css/style.css" />
  10.     <!-- 另外一種引入方式 -->
  11.     <!-- <style>
  12.       @import url(css/style.css);
  13.     </style> -->
  14.   </head>
  15.   <body>
  16.     <!-- 頁頭 -->
  17.     <header>
  18.       <!-- 導(dǎo)航欄 -->
  19.       <nav>
  20.         <ul>
  21.           <li>首頁</li>
  22.           <li>博客</li>
  23.           <li>快訊</li>
  24.           <li>友鏈</li>
  25.           <li>關(guān)于</li>
  26.         </ul>
  27.       </nav>
  28.     </header>
  30.     <!-- 內(nèi)容 -->
  31.     <main>
  32.       <p>
  33.         php中文網(wǎng)提供大量免費(fèi)、原創(chuàng)、高清的php視頻教程,并定期舉行公益php培訓(xùn)!可邊學(xué)習(xí)邊在線修改示例代碼,查看執(zhí)行效果!php從入門到精通,一站式php自學(xué)平臺!
  34.       </p>
  35.     </main>
  37.     <!-- 頁腳 -->
  38.     <footer>
  39.       <ul>
  40.         <li>友情鏈接</li>
  41.         <li>關(guān)于我們</li>
  42.         <li>最新資訊</li>
  43.       </ul>
  44.     </footer>
  45.   </body>
  46. </html>

  • CSS文件代碼4個(gè)

    • style.css 代碼
  1. @import url(header.css);
  2. @import url(main.css);
  3. @import url(footer.css);
  • header.css \ main.css \ footer.css 代碼
  1. footer {
  2.   background: green; 
  3. }

3. 實(shí)例演示基本選擇器與上下文選擇器

3.1 基本·選擇器：

【標(biāo)簽】樣式選擇 - “ tag “

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <p>標(biāo)簽選擇器</p>
  12.     </div>
  13. </body>
  14. </html>

【屬性】樣式選擇 - attribute

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>基本選擇器作業(yè)實(shí)例</title>
  8.     <style>
  9.       /* 標(biāo)簽選擇 */
  10.       p {
  11.         background: green;
  12.       }
  13.       /* 屬性選擇 */
  14.       li[id="1"] {
  15.         background: yellow;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>
  21.       <p class="content">標(biāo)簽選擇器</p>
  22.       <ul>
  23.         <li id="1">屬性選擇器</li>
  24.         <li>class選擇器</li>
  25.         <li>id選擇器</li>
  26.       </ul>
  27.     </div>
  28.   </body>
  29. </html>

  • 【類】樣式選擇 - “ class “

  • 【id】樣式選擇 - “ id “

3.2 上下文·選擇器：

【后代】選擇器 - “空格Space”

【子】選擇器 - “ > “

【同級相鄰】選擇器 - “ + “

【同級所有】選擇器 - “ ~ “

4. 預(yù)習(xí)偽類選擇器與常用元素的css樣式設(shè)置,盒模型知識等

已預(yù)習(xí)

批改老師：PHPzPHPz

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(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
隨時(shí)隨地碎片化學(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+教程免費(fèi)學(xué)