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

搜索
博主信息
博文 15
粉絲 0
評(píng)論 0
訪問(wèn)量 12861
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
1. box-sizing屬性解決了什么問(wèn)題?2. 偽類選擇器的參數(shù) an+b的經(jīng)典應(yīng)用場(chǎng)景,實(shí)例演示，3. 媒體查詢移動(dòng)優(yōu)先與PC優(yōu)先的區(qū)別與聯(lián)系,實(shí)例演示
?
原創(chuàng)
607人瀏覽過(guò)

1. box-sizing屬性解決了什么問(wèn)題

答案；通過(guò)box- sizing屬性來(lái)指定內(nèi)容區(qū)的邊界在哪里

2偽類選擇器的參數(shù) an+b的經(jīng)典應(yīng)用場(chǎng)景,實(shí)例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>偽類選擇器的參數(shù)</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.       <li>item6</li>
  17.       <li>item7</li>
  18.       <li>item8</li>
  19.     </ul>
  20.     <style>
  21.       /*:nth-0f-type(參數(shù))*/
  22.       /*大參數(shù)=an+ba,n,b=[0,1,2,3,4,..]*/
  23.       /*a:系數(shù)，  n：計(jì)算器乘,   b:偏移量*/
  24.       /*元素的有效編號(hào): 必須從1開始,n是從0開始,b也是從0開始*/
  26.       /* nth-of-type(3)     h-of-type(on+3)*/
  27.       .list > :nth-of-type(0n + 3) {
  28.         /*   background-color: darkkhaki;   */
  29.       }
  31.       /*     1n+b:   */
  32.       .list > :nth-of-type(1n + 3) {
  33.         /*    background-color: red;  */
  34.       }
  36.       /*k10+3=3*/
  37.       /*1*1+3=4*/
  38.       /*1*2+3=5*/
  39.       /*大因?yàn)?乘任何數(shù)都不變,所以1可以不寫*/
  40.       .list > :nth-of-type(n + 3) {
  41.         /*   background-color: rebeccapurple;*/
  42.       }
  44.       /*匹配所有的偶數(shù)元素*/
  45.       /*.list > :nth-of-type(2n) {
  46.         background-color: rebeccapurple;
  47.       }*/
  48.       /*    even表示偶數(shù)
  49.       .list > :nth-of-type(even) {
  50.         background-color: rebeccapurple;
  51.       }*/
  52.       /* 2 * 1 = 2     2*2 =  4          */
  54.       /*奇數(shù)
  55.       .list > :nth-of-type(2n + 1) {
  56.         background-color: rebeccapurple;
  57.       }*/
  58.       /*.list > :nth-of-type(odd) {
  59.         background-color: rebeccapurple;
  60.       }*/
  62.       /*前三個(gè)*/
  63.       .list > :nth-of-type(-n + 3) {
  64.         background-color: rebeccapurple;
  65.       }
  66.       /*-1*0+3=3
  67.         1*1+3=2
  68.         1*2+3=1
  69.         1*3+3=0(非法索引,匹配就結(jié)束了)*/
  71.       /*后三個(gè)*/
  72.       .list > :nth-last-of-type(-n + 3) {
  73.         background-color: rebeccapurple;
  74.       }
  76.       /*大總結(jié)一下
  77.         1.獲取指定的某一個(gè):(
  78.         2,獲取前幾個(gè),(n-b)
  79.         3.獲取指定位置后的全部元素,(n+b)
  80.         4.獲取全部偶數(shù)(2n/even)或奇數(shù)(2n+1/0dd)元素*/
  82.       html {
  83.         background-color: royalblue;
  84.       }
  85.       /*:root  = html */
  86.       :root {
  87.         background-color: saddlebrown;
  88.       }
  89.     </style>
  91.     <input type="text" />
  92.     <input type="text" disabled />
  94.     <style>
  95.       input:disabled {
  96.         background-color: red;
  97.       }
  98.       input:enabled {
  99.         background-color: royalblue;
  100.       }
  101.     </style>
  102.   </body>
  103. </html>

. 3媒體查詢移動(dòng)優(yōu)先與PC優(yōu)先的區(qū)別與聯(lián)系,實(shí)例演示

  1. /* 我只要?jiǎng)討B(tài)的改變r(jià)em的大小，就可以動(dòng)態(tài)的調(diào)整每個(gè)按鈕的大小 */
  2.       /* 移動(dòng)優(yōu)先，從最小的屏幕開始進(jìn)行媒體查詢 */
  3.       /*  @media (min-width：480px) {
  4.         html {
  5.           font-size: 12px;
  6.         }
  7.       }
  8.       @media (min-width：640px) {
  9.         html {
  10.           font-size: 14px;
  11.         }
  12.       }
  13.       @media (min-width：720px) {
  14.         html {
  15.           font-size: 16px;
  16.         }
  17.       }*/
  19.       /* 桌面優(yōu)先/pc優(yōu)先 由大屏到小屏幕 */
  20.       @media (max-width：720px) {
  21.         html {
  22.           font-size: 16px;
  23.         }
  24.       }
  25.       @media (min-width：640px) {
  26.         html {
  27.           font-size: 14px;
  28.         }
  29.       }
  30.       @media (min-width：480px) {
  31.         html {
  32.           font-size: 12px;
  33.         }
  34.       }
  36.       @media (min-width：720px) {
  37.         html {
  38.           font-size: 16px;
  39.         }
  40.       }
批改老師：PHPzPHPz

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

老師批語(yǔ)：
本博文版權(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é)