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

搜索
博主信息
博文 16
粉絲 0
評論 0
訪問量 22112
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
1.實例演示選擇器組合實現(xiàn)優(yōu)先級提權(quán)方式; 2.實例演示字體與字體圖標(biāo); 3.實例演示盒模型常用屬性的縮寫方案
剛哥哥
原創(chuàng)
692人瀏覽過

1、選擇器優(yōu)先級提權(quán) 演示代碼：

  1. <title>選擇器優(yōu)先級提權(quán)</title>
  2.     <style>
  3.         h2 {
  4.             color: red;
  5.         }
  7.         .bt h2 {
  8.             color: lawngreen;
  9.         }
  11.         #dbt {
  12.             color: violet;
  13.         }
  15.         #box {
  16.             border: 1px solid red;
  17.             width: 500px;
  18.             height: 200px;
  19.             background-color:lightgreen;
  20.         }
  21.         #box div{
  22.             /* background-color: violet; */
  23.         }
  24.         body #box{
  25.             background-color:lightslategray;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <!-- 1. 實例演示選擇器組合實現(xiàn)優(yōu)先級提權(quán)方式; 
  32.         2.實例演示字體與字體圖標(biāo);
  33.         3.實例演示盒模型常用屬性的縮寫方案 -->
  34.     <!-- 內(nèi)聯(lián)樣式不屬于選擇器 -->
  35.     <!-- 選擇器優(yōu)先級提權(quán)有一個規(guī)則：id > class > 標(biāo)簽；[0,0,1][0,1,0][1,0.2] -->
  37.     <div id="box">
  38.         <div class="bt">
  39.             <h2 id="dbt">大標(biāo)題，大標(biāo)題</h2>
  40.         </div>
  41.     </div>

2、字體與字體圖標(biāo)演示 演示代碼：

  1. <title>字體與字體圖標(biāo)演示</title>
  2.     <style>
  3.         .fonts {
  4.             color: red;
  5.             /* 設(shè)置文字大小 */
  6.             font-size: 30px;
  7.             /* 設(shè)置文字字體  */
  8.             /* font-family: SimHei; */
  9.             font-family: LiSu;
  12.         }
  13.         .fonts p{
  14.             color:red;
  15.         }
  16.         p{
  17.             font-size: 50px;
  18.             color:blue;
  19.             /* font-family:YouYuan; */
  20.             src: url(./icon/cilun.png);
  21.     </style>
  22. </head>
  24. <body>
  25.     <div class="fonts">
  26.         <h1>一段文字標(biāo)題</h1>
  27.         <p>文字主體內(nèi)容：借錢這事兒，大家可能都遇到過：一時資金周轉(zhuǎn)不開，借錢救個急。
  29.             從資金管理角度說，借錢是負債，要考慮個人資金流動性與償債能力，要考察借貸成本能否覆蓋資金收益。
  31.             可是眼下，出現(xiàn)了一個趨勢：借錢越發(fā)隨意，可能為了購買奢侈品、換個蘋果手機，也可能為了辦健身卡、上學(xué)習(xí)課，甚至買顆白菜也可以分期……
  33.             與此映照，多家互聯(lián)網(wǎng)借貸平臺的廣告畫風(fēng)殊異：老年人坐不慣經(jīng)濟艙，可以借錢升艙；父親手頭緊，借錢給孩子過生日。
  35.             這勁頭，似乎越來越奇怪了</p>
  36.     </div>
  37.     <div>
  38.      /* 給字體加圖標(biāo)： */
  39.         <p>設(shè)置按鈕</p>
  40.         <p>電話電話</p>
  43.     </div>

3、實例演示盒模型常用屬性的縮寫方案

  1. <title>實例演示盒模型常用屬性的縮寫方案</title>
  2.     <style>
  3.         .box {
  4.             width: 300px;
  5.             height: 300px;
  6.             /* 邊框 通過border設(shè)置，值由3部分組成，邊框粗細（px）、邊框樣式、邊框顏色。
  7.             border-winth:1px;設(shè)置邊框粗細；
  8.             border-style:solid;設(shè)置邊框樣式，solid (實線)、dashed (虛線)、dotted (點線)。
  9.             border-color:red; 設(shè)置邊框顏色； */
  11.             /* 邊距的簡寫：（值不分順序） */
  12.             border: 5px red solid;
  14.             /*  內(nèi)邊距(邊框與內(nèi)容之間的距離)padding 的簡寫語法：padding 是按順時針的方式賦值；[上、右、下、左] ，
  15.             padding：2px；   表示 上、右、下、左 內(nèi)邊距各2px；
  16.             padding: 2px 5px;    表示 上下2px,左右5px;
  17.             padding: 5px 6px 8px;    表示 上5px,左、右各6px,下8px;
  18.             padding: 50px 20px 30px 18px;    表示上50px, 右20px,下30px,左18px;
  19.              */
  20.             padding: 50px 30px;
  22.             background-color: skyblue;
  24.             /*   margin外邊距（盒子與盒子之間的距離）；簡寫語法和padding一樣；
  25.             是按順時針的方式賦值；[上、右、下、左] ，
  26.             margin：2px；       表示 上、右、下、左 內(nèi)邊距各2px；
  27.             margin: 2px 5px;     表示 上下2px,左右5px;
  28.             margin: 5px 6px 8px;     表示 上5px,左、右各6px,下8px;
  29.             margin: 50px 20px 30px 18px;    表示上50px, 右20px,下30px,左18px; */
  30.             /* 外邊距 margin 簡寫語法： */
  31.             margin: 30px 20px 15px 9px;
  33.             /*   盒子模型分為w3c盒子模型和ie盒子模型，w3c盒子模型的范圍包括 
  34.             margin border padding content,并且content部分不包括其他元素。
  35.             ie盒子模型，范圍包括 margin border padding content ,但是border和padding計算到content內(nèi)的； */
  37.             /* 設(shè)置盒子模型為ie盒子模型  （不影響盒子總體大小）*/
  38.             box-sizing: border-box;
  39.             /* 設(shè)置盒子模型為w3c盒子（默認、會影響盒子總體大?。?*/
  40.             box-sizing: content-box;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <div class="box">
  48.         盒子模型
  49.     </div>
批改老師：天蓬老師天蓬老師

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