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

搜索
博主信息
博文 38
粉絲 0
評論 0
訪問量 30840
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
selector0314
一個好人
原創(chuàng)
487人瀏覽過
  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 50%, initial-scale=1.0">
  7.     <title>上下文選擇器</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <h2 class="header">前端開發(fā)</h2>
  12.         <p class="explain">第三節(jié)課，主要講了3個標(biāo)簽，CSS基礎(chǔ)和選擇器。</p>
  13.     </div>
  14.     <div>
  15.         <p class="title">標(biāo)簽</p>
  16.         <ul class="list">
  17.             <li class="item">video標(biāo)簽：
  18.                 <ul class="list2">
  19.                     <li class="item">src="aaa.mp4視頻路徑及名稱"</li>
  20.                     <li class="item">width="300屏幕寬度"</li>
  21.                     <li class="item">controls控制器選項</li>
  22.                     <li class="item">muted靜音選項</li>
  23.                     <li class="item">autoplay自動播放選項</li>
  24.                     <li class="item">loop循環(huán)播放選項</li>
  25.                     <li class="item">poster="bbb.jpg封面圖片"</li>
  26.                 </ul>
  27.             </li>
  28.             <li class="item">audio標(biāo)簽：
  29.                 <p class="explain">屬性設(shè)置與video類似</p>
  30.             </li>
  31.             <li class="item">iframe標(biāo)簽：
  32.                 <p class="explain">主要用途是網(wǎng)頁嵌套，由兩個元素組成。</p>
  33.                 <span>元素a標(biāo)簽:
  34.                     <ol class="list2">
  35.                         <li class="item">href屬性</li>
  36.                         <li class="item">target屬性，幾個a標(biāo)簽的target屬性相同。</li>
  37.                     </ol>
  38.                 </span>
  39.                 <span>元素iframe:
  40.                     <ol class="list2">
  41.                         <li class="item">srcdoc="可放p標(biāo)簽作為提示語"</li>
  42.                         <li class="item">frameborder="3"邊線</li>
  43.                         <li class="item">width="400"窗口寬</li>
  44.                         <li class="item">height="300"高</li>
  45.                         <li class="item">name="與a標(biāo)簽的target相同"</li>
  46.                     </ol>
  47.                 </span>
  48.             </li>
  49.         </ul>
  50.     </div>
  51.     <div>
  52.         <p class="title">CSS基礎(chǔ)</p>
  53.         <ul class="list">
  54.             <li class="item">元素=標(biāo)簽+屬性</li>
  55.             <li class="item">元素來源預(yù)定義（瀏覽器默認(rèn)），自定義（用戶自己寫的），繼承樣式（用于簡化文本）</li>
  56.             <li class="item">自定義樣式中，帶！important屬性優(yōu)先級最高，接下來依次是行內(nèi)屬性ele.style、文本屬性,style、外部樣式ccc.css</li>
  57.         </ul>
  58.     </div>
  59.     <div>
  60.         <p class="title">選擇器</p>
  61.         <ul class="list">
  62.             <li class="item one">父子：
  63.                 <p style="font-size: 5px;">用法是加`>`，僅限于父子有效</p>
  64.             </li>
  65.             <li class="item">后代：`空格`,（后級所有元素，包括他們的下級）</li>
  66.             <li class="item">兄弟：`+`，（相鄰的下一個同級元素，緊跟且只有一個</li>
  67.             <li class="item">同級：`~`，（與當(dāng)前元素同級的后面全部元素</li>
  68.         </ul>
  69.     </div>
  70.     <style>
  71.         /* // 兄弟 */
  72.         .header+.explain{
  73.             color: rgb(119, 119, 120);
  74.             font-size: 10px;
  75.             font-family: 'Courier New', Courier, monospace;
  76.         }
  77.         /* // 父子 */
  78.         .list>.item{
  79.             border:1px solid black;
  80.             background: rgb(247, 245, 245);
  81.         }
  82.         /* // 同級 */
  83.         .title~.item{
  84.             color: green;
  85.         }
  86.         /* // 父子 */
  87.         .list2>.item{
  88.             color: lightblue;
  89.         }
  90.         /* // 父子 */
  91.         .list>.item.one{
  92.             color: red;
  93.             font-weight: bold;
  94.         }
  95.         /* // 后代 */
  96.         .item .explain{
  97.             font-size: smaller;
  98.             font-style: italic;
  99.         }
  100.     </style>
  101. </body>
  102. </html>

選擇器0314

總結(jié)：

CSS和選擇器的練習(xí)很費時間，不知不覺就好幾個小時，如果文檔不多，很多時候父子和后代的效果是一樣的，需要多練習(xí)。

批改老師：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é)