當(dāng)前位置：首頁(yè) > news >正文

購(gòu)物網(wǎng)站頁(yè)面設(shè)計(jì)思路北京網(wǎng)站優(yōu)化推廣方案

news 2025/7/4 2:27:54

購(gòu)物網(wǎng)站頁(yè)面設(shè)計(jì)思路,北京網(wǎng)站優(yōu)化推廣方案,做網(wǎng)站的品牌公司,日照網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)班目錄復(fù)合選擇器后代選擇器子選擇器并集選擇器交集選擇器偽類選擇器 CSS 三大特性繼承性層疊性優(yōu)先級(jí) 背景屬性背景色背景圖背景圖平鋪方式背景圖位置背景圖縮放背景圖固定背景復(fù)合屬性顯示模式顯示模式塊級(jí)元素行內(nèi)元素行內(nèi)塊元素轉(zhuǎn)換顯示模式結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器…

復(fù)合選擇器
- 后代選擇器
- 子選擇器
- 并集選擇器
- 交集選擇器
- 偽類選擇器
CSS 三大特性
- 繼承性
- 層疊性
- 優(yōu)先級(jí)
背景屬性
- 背景色
- 背景圖
- 背景圖平鋪方式
- 背景圖位置
- 背景圖縮放
- 背景圖固定
- 背景復(fù)合屬性
顯示模式
- 顯示模式
- - 塊級(jí)元素
  - 行內(nèi)元素
  - 行內(nèi)塊元素
- 轉(zhuǎn)換顯示模式
結(jié)構(gòu)偽類選擇器
- 結(jié)構(gòu)偽類選擇器
- nth-child(公式)
偽元素選擇器
盒子模型
- 組成
- 邊框線
- 內(nèi)邊距
- 尺寸計(jì)算
- 外邊距
- 邊距問題
- - 外邊距-合并現(xiàn)象
  - 外邊距-塌陷問題
  - 行內(nèi)元素-內(nèi)外邊距問題
- 清除默認(rèn)樣式
- 元素溢出
- 圓角
- 圓角應(yīng)用
- - 正圓形狀
  - 膠囊形狀
- 陰影

復(fù)合選擇器

定義：由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成

作用：更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽）

后代選擇器

后代選擇器：選中某元素的后代元素（所有后代）

格式：

父選擇器 子選擇器{CSS 屬性
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div span{color: red;}</style></head><body><span>這是一個(gè)span標(biāo)簽</span><div><span>這是div標(biāo)簽中的span標(biāo)簽</span></div></body>
</html>

結(jié)果如下：

在這里插入圖片描述

子選擇器

子代選擇器：選中某元素的子代元素

格式：

父選擇器>子選擇器{CSS 屬性
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div>span{color: red;}</style></head><body><div><span>大兒子span</span><p><span>孫子span</span></p><span>小兒子span</span></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

并集選擇器

并集選擇器：選中多組標(biāo)簽設(shè)置相同的樣式

格式：

選擇器1,選擇器2,...,選擇器N{CSS 屬性
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div,p,span{color: red;}</style></head><body><div>div標(biāo)簽</div><p>p標(biāo)簽</p><span>span標(biāo)簽</span></body>
</html>

結(jié)果如下：

在這里插入圖片描述

交集選擇器

交集選擇器：選中同時(shí)滿足多個(gè)條件的元素

格式：

選擇器1選擇器2{CSS 屬性
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p.box{color: red;}</style></head><body><p class="box">p標(biāo)簽，使用了類選擇器</p><p>p標(biāo)簽</p><div class="box">div標(biāo)簽，使用了類選擇器</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：

選擇器之間連寫，沒有任何符號(hào)
如果交集選擇器中有標(biāo)簽選擇器，標(biāo)簽選擇器必須寫在最前面

偽類選擇器

偽類選擇器：偽類表示元素狀態(tài)，選中元素的某個(gè)狀態(tài)設(shè)置樣式

格式：

鼠標(biāo)懸停狀態(tài)：

選擇器:hover{CSS 屬性
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a:hover{font-size: 30px;color: red;}</style></head><body><a href="#">這是沒有鼠標(biāo)懸停的a標(biāo)簽</a><br><a href="#">這是有鼠標(biāo)懸停的a標(biāo)簽</a></body>
</html>

結(jié)果如下：
在這里插入圖片描述

偽類-超鏈接：

超鏈接一共有四個(gè)狀態(tài)

選擇器	作用
:link	訪問前
:visited	訪問后
:hover	鼠標(biāo)懸停
:active	點(diǎn)擊時(shí)（激活）

注意事項(xiàng)：如果要給超鏈接設(shè)置以上四個(gè)狀態(tài)，要按 lvha 的順序書寫

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a:link{color: orange;}a:visited{color: black;}a:hover{color:yellow}a:active{color:gray}</style></head><body><a href="#">這是一段文字</a></body>
</html>

結(jié)果如下：

屏幕錄制 2025-03-07 171505

CSS 三大特性

繼承性

子級(jí)默認(rèn)繼承父級(jí)的文字控制屬性

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>body{font-size: 30px;font-family: "楷體";color: red;}</style></head><body><div>櫻花飄落的速度是每秒五厘米，而我對(duì)你的思念，始終追不上季節(jié)的更迭。</div><p>咖啡杯沿的溫度逐漸冷卻，書頁(yè)間夾著的舊車票，還留著那年雨季的褶皺。</p><span>地鐵里陌生人的一個(gè)微笑，像極了某個(gè)黃昏你轉(zhuǎn)身時(shí)發(fā)梢掠過的風(fēng)。</span></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：當(dāng)子級(jí)有自己的樣式的時(shí)候，優(yōu)先生效自己的樣式，就不會(huì)對(duì)父級(jí)的樣式生效

層疊性

特點(diǎn)：

相同的屬性會(huì)覆蓋：后面的 CSS 屬性覆蓋前面的 CSS 屬性
不同的屬性會(huì)疊加：不同的 CSS 屬性都生效

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font-size: 30px;color: red;}div{color: purple;font-family: "楷體";}</style></head><body><div>螢火蟲提著燈籠穿過月光，在舊磚墻的皺紋里種下星辰的碎片。</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

優(yōu)先級(jí)

優(yōu)先級(jí)也叫權(quán)重，當(dāng)一個(gè)標(biāo)簽使用了多種選擇器時(shí)，基于不同種類的選擇器的匹配規(guī)則

規(guī)則：選擇器優(yōu)先級(jí)高的樣式生效

公式：通配選擇器 < 標(biāo)簽選擇器 < 類選擇器 < id 選擇器 < 行內(nèi)樣式 < ！important（選中標(biāo)簽的范圍越大，優(yōu)先級(jí)越低）

!important 提高權(quán)重，將優(yōu)先級(jí)提到最高

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{color: purple !important;}.style1{color: red;}</style></head><body><div><p>這是一段文字1</p><p class="style1">這是一段文字2</p></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

疊加計(jì)算規(guī)則：

疊加計(jì)算：如果是復(fù)合選擇器，則需要權(quán)重疊加計(jì)算

規(guī)則：（行內(nèi)樣式，id 選擇器個(gè)數(shù)，類選擇器個(gè)數(shù)，標(biāo)簽選擇器個(gè)數(shù)）

從左向右依次比較個(gè)數(shù)，同一級(jí)個(gè)數(shù)多的優(yōu)先級(jí)高，如果個(gè)數(shù)相同，則向后比較
!important 權(quán)重最高（在繼承中變?yōu)闊o效）
繼承權(quán)重最低

背景屬性

背景色

屬性名：background-color

屬性：

顏色表示方式	屬性值	說明	使用場(chǎng)景
顏色關(guān)鍵字	顏色英文單詞	red、green、blue…	學(xué)習(xí)測(cè)試
rgb 表示法	rgb(r, g, b)	rgb 表示紅綠藍(lán)三原色，取值：0 - 255	了解
rgba 表示法	rgba(r, g, b, a)	a 表示透明度，取值：0 - 1	開發(fā)使用，實(shí)現(xiàn)透明色
十六進(jìn)制表示法	#RRGGBB	#000000，#ffcc00，簡(jiǎn)寫：#000，#fc0	開發(fā)使用（從設(shè)計(jì)稿復(fù)制）

格式：

選擇器{background-color: red;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{background-color: red;}</style></head><body><p>這是一段文字</p></body>
</html>

結(jié)果如下

在這里插入圖片描述

背景圖

網(wǎng)頁(yè)中使用背景圖實(shí)現(xiàn)裝飾性的圖片效果

屬性名：background-image

屬性值：url(背景圖路徑)

格式：

選擇器{background-image: url(./images/1.png);
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-image: url(./img/1.png);}</style></head><body><div>這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：背景圖默認(rèn)是平鋪的效果

背景圖平鋪方式

屬性名：background-repeat

屬性值：

no-repeat：不平鋪
repeat：平鋪（默認(rèn)效果）
repeat-x：水平方向平鋪
repeat-y：垂直方向平鋪

格式：

選擇器{background-repeat: no-repeat;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;font-size: 80px;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-x;font-size: 80px;}.y{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: repeat-y;font-size: 80px;}</style></head><body><div>這是不平鋪</div><p>這是水平平鋪</p><p class="y">這是垂直平鋪</p></body>
</html>

結(jié)果如下：
在這里插入圖片描述

背景圖位置

屬性名：background-position

屬性值：水平方向位置垂直方向位置

關(guān)鍵字
- left：左側(cè)
- right：右側(cè)
- center：居中
- top：置頂
- bottom：置底
偏移量（數(shù)字 + px，正負(fù)都可以）
- 水平方向：正數(shù)向右，負(fù)數(shù)向左
- 垂直方向：正數(shù)向下，負(fù)數(shù)向上

格式：

選擇器{background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: right center;}p{width: 504px;height: 495px;background-color: rgb(240, 29, 117);background-image: url(./img/1.png);background-repeat: no-repeat;background-position: 126px 123.75px;}</style></head><body><div></div><p></p></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：

background-position: 0 0 和 background-position: left top 為默認(rèn)的左上角
關(guān)鍵字取值方式寫法，可以顛倒取值順序
可以只寫一個(gè)關(guān)鍵字，另一個(gè)方向默認(rèn)居中；數(shù)字只寫一個(gè)值表示水平方向，垂直方向?yàn)榫又?/li>

背景圖縮放

屬性：background-size

屬性值：

關(guān)鍵字
- cover：等比例縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見
- contain：等比例縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白
百分比：根據(jù)盒子尺寸計(jì)算圖片大小
數(shù)字 + 單位（例如 px）

格式：

選擇器{background-size: contain;background-size: cover;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.size1{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: contain;}.size2{width: 1500px;height: 1500px;background-color: rgb(240, 29, 117);background-image: url(./img/2.png);background-repeat: no-repeat;background-size: cover;}</style></head><body><p class="size1"></p><p class="size2"></p></body>
</html>

結(jié)果如下：
在這里插入圖片描述

背景圖固定

作用：背景圖不會(huì)隨著元素的內(nèi)容滾動(dòng)

屬性名：background-attachment

屬性值：fixed

格式：

選擇器{background-attachment: fixed;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>body{background-image: url(./img/3.png);background-repeat: no-repeat;background-position: center top;background-size: contain;background-attachment: fixed;}body p{font-size: 20px;font-family: "楷體";font-weight: bold;text-indent: 2em;}h1{font-family: "楷體";text-align: center;}</style></head><body><h1>孔雀東南飛</h1><p>序曰：漢末建安中，廬江府小吏焦仲卿妻劉氏，為仲卿母所遣，自誓不嫁。其家逼之，乃投水而死。仲卿聞之，亦自縊于庭樹。時(shí)人傷之，為詩(shī)云爾。</p><p>孔雀東南飛，五里一徘徊。</p><p>“十三能織素，十四學(xué)裁衣，十五彈箜篌，十六誦詩(shī)書。十七為君婦，心中?？啾?。君既為府吏，守節(jié)情不移。賤妾留空房，相見常日稀。雞鳴入機(jī)織，夜夜不得息。三日斷五匹，大人故嫌遲。非為織作遲，君家婦難為！妾不堪驅(qū)使，徒留無所施。便可白公姥，及時(shí)相遣歸?！?span id="vxwlu0yf4"    class="token tag"></p><p>府吏得聞之，堂上啟阿母：“兒已薄祿相，幸復(fù)得此婦，結(jié)發(fā)同枕席，黃泉共為友。共事二三年，始爾未為久。女行無偏斜，何意致不厚？”</p><p>阿母謂府吏：“何乃太區(qū)區(qū)！此婦無禮節(jié)，舉動(dòng)自專由。吾意久懷忿，汝豈得自由！東家有賢女，自名秦羅敷，可憐體無比，阿母為汝求。便可速遣之，遣去慎莫留！”</p><p>府吏長(zhǎng)跪告：“伏惟啟阿母，今若遣此婦，終老不復(fù)取！”</p><p>阿母得聞之，槌床便大怒：“小子無所畏，何敢助婦語(yǔ)！吾已失恩義，會(huì)不相從許！”</p><p>府吏默無聲，再拜還入戶。舉言謂新婦，哽咽不能語(yǔ)：“我自不驅(qū)卿，逼迫有阿母。卿但暫還家，吾今且報(bào)府。不久當(dāng)歸還，還必相迎取。以此下心意，慎勿違吾語(yǔ)。”</p><p>新婦謂府吏：“勿復(fù)重紛紜。往昔初陽(yáng)歲，謝家來貴門。奉事循公姥，進(jìn)止敢自專？晝夜勤作息，伶俜縈苦辛。謂言無罪過，供養(yǎng)卒大恩；仍更被驅(qū)遣，何言復(fù)來還！妾有繡腰襦，葳蕤自生光；紅羅復(fù)斗帳，四角垂香囊；箱簾六七十，綠碧青絲繩，物物各自異，種種在其中。人賤物亦鄙，不足迎后人，留待作遺施，于今無會(huì)因。時(shí)時(shí)為安慰，久久莫相忘！”</p><p>雞鳴外欲曙，新婦起嚴(yán)妝。著我繡夾裙，事事四五通。足下躡絲履，頭上玳瑁光。腰若流紈素，耳著明月珰。指如削蔥根，口如含朱丹。纖纖作細(xì)步，精妙世無雙。</p><p>上堂拜阿母，阿母怒不止?！拔糇髋畠簳r(shí)，生小出野里。本自無教訓(xùn)，兼愧貴家子。受母錢帛多，不堪母驅(qū)使。今日還家去，念母勞家里?！?卻與小姑別，淚落連珠子?！靶聥D初來時(shí)，小姑始扶床；今日被驅(qū)遣，小姑如我長(zhǎng)。勤心養(yǎng)公姥，好自相扶將。初七及下九，嬉戲莫相忘?！?出門登車去，涕落百余行。</p><p>府吏馬在前，新婦車在后。隱隱何甸甸，俱會(huì)大道口。下馬入車中，低頭共耳語(yǔ)：“誓不相隔卿，且暫還家去；吾今且赴府，不久當(dāng)還歸。誓天不相負(fù)！”</p><p>新婦謂府吏：“感君區(qū)區(qū)懷！君既若見錄，不久望君來。君當(dāng)作磐石，妾當(dāng)作蒲葦，蒲葦紉如絲，磐石無轉(zhuǎn)移。我有親父兄，性行暴如雷，恐不任我意，逆以煎我懷。” 舉手長(zhǎng)勞勞，二情同依依。</p><p>入門上家堂，進(jìn)退無顏儀。阿母大拊掌，不圖子自歸：“十三教汝織，十四能裁衣，十五彈箜篌，十六知禮儀，十七遣汝嫁，謂言無誓違。汝今何罪過，不迎而自歸？” 蘭芝慚阿母：“兒實(shí)無罪過。” 阿母大悲摧。</p><p>還家十余日，縣令遣媒來。云有第三郎，窈窕世無雙。年始十八九，便言多令才。</p><p>阿母謂阿女：“汝可去應(yīng)之。”</p><p>阿女含淚答：“蘭芝初還時(shí)，府吏見丁寧，結(jié)誓不別離。今日違情義，恐此事非奇。自可斷來信，徐徐更謂之?！?span id="vxwlu0yf4"    class="token tag"></p><p>阿母白媒人：“貧賤有此女，始適還家門。不堪吏人婦，豈合令郎君？幸可廣問訊，不得便相許?！?span id="vxwlu0yf4"    class="token tag"></p><p>媒人去數(shù)日，尋遣丞請(qǐng)還，說有蘭家女，丞籍有宦官。云有第五郎，嬌逸未有婚。遣丞為媒人，主簿通語(yǔ)言。直說太守家，有此令郎君，既欲結(jié)大義，故遣來貴門。</p><p>阿母謝媒人：“女子先有誓，老姥豈敢言！”</p><p>阿兄得聞之，悵然心中煩。舉言謂阿妹：“作計(jì)何不量！先嫁得府吏，后嫁得郎君，否泰如天地，足以榮汝身。不嫁義郎體，其往欲何云？”</p><p>蘭芝仰頭答：“理實(shí)如兄言。謝家事夫婿，中道還兄門。處分適兄意，那得自任專！雖與府吏要，渠會(huì)永無緣。登即相許和，便可作婚姻。”</p><p>媒人下床去，諾諾復(fù)爾爾。還部白府君：“下官奉使命，言談大有緣?！?府君得聞之，心中大歡喜。視歷復(fù)開書，便利此月內(nèi)，六合正相應(yīng)。良吉三十日，今已二十七，卿可去成婚。交語(yǔ)速裝束，絡(luò)繹如浮云。青雀白鵠舫，四角龍子幡。婀娜隨風(fēng)轉(zhuǎn)，金車玉作輪。躑躅青驄馬，流蘇金鏤鞍。赍錢三百萬(wàn)，皆用青絲穿。雜彩三百匹，交廣市鮭珍。從人四五百，郁郁登郡門。</p><p>阿母謂阿女：“適得府君書，明日來迎汝。何不作衣裳？莫令事不舉！”</p><p>阿女默無聲，手巾掩口啼，淚落便如瀉。移我琉璃榻，出置前窗下。左手持刀尺，右手執(zhí)綾羅。朝成繡夾裙，晚成單羅衫。晻晻日欲暝，愁思出門啼。</p><p>府吏聞此變，因求假暫歸。未至二三里，摧藏馬悲哀。新婦識(shí)馬聲，躡履相逢迎。悵然遙相望，知是故人來。舉手拍馬鞍，嗟嘆使心傷：“自君別我后，人事不可量。果不如先愿，又非君所詳。我有親父母，逼迫兼弟兄。以我應(yīng)他人，君還何所望！”</p><p>府吏謂新婦：“賀卿得高遷！磐石方且厚，可以卒千年；蒲葦一時(shí)紉，便作旦夕間。卿當(dāng)日勝貴，吾獨(dú)向黃泉！”</p><p>新婦謂府吏：“何意出此言！同是被逼迫，君爾妾亦然。黃泉下相見，勿違今日言！” 執(zhí)手分道去，各各還家門。生人作死別，恨恨那可論？念與世間辭，千萬(wàn)不復(fù)全！</p><p>府吏還家去，上堂拜阿母：“今日大風(fēng)寒，寒風(fēng)摧樹木，嚴(yán)霜結(jié)庭蘭。兒今日冥冥，令母在后單。故作不良計(jì)，勿復(fù)怨鬼神！命如南山石，四體康且直！”</p><p>阿母得聞之，零淚應(yīng)聲落：“汝是大家子，仕宦于臺(tái)閣。慎勿為婦死，貴賤情何薄！東家有賢女，窈窕艷城郭，阿母為汝求，便復(fù)在旦夕?！?span id="vxwlu0yf4"    class="token tag"></p><p>府吏再拜還，長(zhǎng)嘆空房中，作計(jì)乃爾立。轉(zhuǎn)頭向戶里，漸見愁煎迫。</p><p>其日牛馬嘶，新婦入青廬。奄奄黃昏后，寂寂人定初。“我命絕今日，魂去尸長(zhǎng)留！” 攬裙脫絲履，舉身赴清池。</p><p>府吏聞此事，心知長(zhǎng)別離。徘徊庭樹下，自掛東南枝。</p><p>兩家求合葬，合葬華山傍。東西植松柏，左右種梧桐。枝枝相覆蓋，葉葉相交通。中有雙飛鳥，自名為鴛鴦。仰頭相向鳴，夜夜達(dá)五更。行人駐足聽，寡婦起彷徨。多謝后世人，戒之慎勿忘！</p></body>
</html>

結(jié)果如下：

屏幕錄制 2025-03-08 013552

背景復(fù)合屬性

屬性名：background

屬性值：背景色背景圖背景圖平鋪方式背景圖位置/背景圖縮放背景圖固定（不區(qū)分順序）

格式：

選擇器{background: red url(./img/1.png) no-repeat right center/cover;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 600px;height: 400px;background: red url(./img/1.png) no-repeat right center/cover;}</style></head><body><div>這是一段字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

顯示模式

顯示模式：標(biāo)簽（元素）的顯示方式

作用：布局網(wǎng)頁(yè)的時(shí)候，根據(jù)標(biāo)簽的顯示模式選擇合適的標(biāo)簽擺放內(nèi)容

塊級(jí)元素

特點(diǎn)：

獨(dú)占一行
高度默認(rèn)是父級(jí)的 100%
添加寬高屬性生效

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{background-color: red;}.div2{height: 60px;background-color: gray;}</style></head><body><div class="div1">這是一段字</div><div class="div2">這是一段字</div>    </body>
</html>

結(jié)果如下：
在這里插入圖片描述

行內(nèi)元素

特點(diǎn)：

一行可共存多個(gè)
寬高跟內(nèi)容寬高一致
添加寬高屬性不生效

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}</style></head><body><span class="span1">這是span標(biāo)簽</span><span class="span2">這是span標(biāo)簽</span></body>
</html>

結(jié)果如下：
在這里插入圖片描述

行內(nèi)塊元素

特點(diǎn)：

一行可共存多個(gè)
寬高與內(nèi)容寬高一致
添加寬高屬性生效

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.span1{background-color: red;font-size: 30px;}.span2{width: 20px;height: 60px;background-color: gray;}img{width: 100px;height: 100px;}</style></head><body><span class="span1">這是span標(biāo)簽</span><img src="./img/1.png" alt=""></body>
</html>

結(jié)果如下：

在這里插入圖片描述

轉(zhuǎn)換顯示模式

屬性名：display

屬性值：

block：塊級(jí)
inline-block：行內(nèi)塊
inline：行內(nèi)

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: red;display: inline;}span{width: 200px;height: 200px;background-color: gray;display: inline-block;}img{width: 100px;height: 100px;display: block;}</style></head><body><div>這是一段字</div><div>這是一段字</div><span>這是span標(biāo)簽</span><span>這是span標(biāo)簽</span><img src="./img/1.png" alt=""><img src="./img/1.png" alt=""></body>
</html>

結(jié)果如下：

在這里插入圖片描述

結(jié)構(gòu)偽類選擇器

作用：根據(jù)元素的結(jié)構(gòu)關(guān)系查找元素

選擇器	說明
E:first-child	查找第一個(gè) E 元素
E:last-child	查找最后一個(gè) E 元素
E:nth-child(N)	查找第 N 個(gè) E 元素（第一個(gè)元素 N 值為 1）

格式：

選擇器:first-child{background color: red;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}li:nth-child(2){background-color: rgb(174, 174, 235);}</style></head><body><ul><li>床前明月光，疑是地上霜?！?李白《靜夜思》</li><li>獨(dú)在異鄉(xiāng)為異客，每逢佳節(jié)倍思親?！?王維《九月九日憶山東兄弟》</li><li>欲窮千里目，更上一層樓?！?王之渙《登鸛雀樓》</li></ul></body>
</html>

結(jié)果如下：

在這里插入圖片描述

nth-child(公式)

作用：根據(jù)元素的結(jié)構(gòu)關(guān)系查找多個(gè)元素

功能	公式
偶數(shù)標(biāo)簽	2n
奇數(shù)標(biāo)簽	2n+1，2n-1
找到 5 的倍數(shù)的標(biāo)簽	5n
找到第 5 個(gè)以后的標(biāo)簽	n+5
找到第 5 個(gè)以前的標(biāo)簽	-n+5

格式：

選擇器:nth-child(2n){background color: red;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li:nth-child(2n-1){background-color: rgb(174, 174, 235);}li:nth-child(2n){background-color: rgb(235, 235, 157);}li:first-child{background-color: rgb(238, 115, 115);}li:last-child{background-color: rgb(131, 231, 131);}</style></head><body><ul><li>床前明月光，疑是地上霜?！?李白《靜夜思》</li><li>獨(dú)在異鄉(xiāng)為異客，每逢佳節(jié)倍思親?！?王維《九月九日憶山東兄弟》</li><li>欲窮千里目，更上一層樓。—— 王之渙《登鸛雀樓》</li><li>問君能有幾多愁？恰似一江春水向東流?！?李煜《虞美人》</li><li>大江東去，浪淘盡，千古風(fēng)流人物。—— 蘇軾《念奴嬌?赤壁懷古》</li><li>尋尋覓覓，冷冷清清，凄凄慘慘戚戚?！?李清照《聲聲慢》</li><li>落紅不是無情物，化作春泥更護(hù)花。—— 龔自珍《己亥雜詩(shī)》</li><li>黑夜給了我黑色的眼睛，我卻用它尋找光明?！?顧城《一代人》</li><li>你站在橋上看風(fēng)景，看風(fēng)景人在樓上看你?！?卞之琳《斷章》</li></ul></body>
</html>

結(jié)果如下：
在這里插入圖片描述

偽元素選擇器

作用：創(chuàng)建虛擬元素（偽元素），用來擺放裝飾性的內(nèi)容

選擇器	說明
E::before	在 E 元素里面的最前面添加一個(gè)偽元素
E::after	在 E 元素里面的最后面添加一個(gè)偽元素

注意事項(xiàng)：

必須設(shè)置content:" "屬性，用來設(shè)置偽元素的內(nèi)容，如果沒有內(nèi)容，則引號(hào)留空即可
偽元素默認(rèn)是行內(nèi)顯示模式
權(quán)重和標(biāo)簽選擇器相同

格式：

選擇器::before{content:" ";
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 275px;height: 50px;background-color: #f7b7b7;}div::before{content: "尋尋覓覓，";}div::after{content: "凄凄慘慘戚戚。";}</style></head><body><div>冷冷清清，</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

盒子模型

作用：布局網(wǎng)頁(yè)，擺放盒子和內(nèi)容

組成

盒子模型重要組成部分：

內(nèi)容區(qū)域：width & height
內(nèi)邊距：padding（出現(xiàn)在內(nèi)容與盒子邊緣之間）
邊框線：border
外邊距：margin（出現(xiàn)在盒子外面）

在這里插入圖片描述

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;margin: 20px;}</style></head><body><div>這是一段文字這是一段文字這是一段文字這是一段文字</div></body>
</html>

結(jié)果如下：

在這里插入圖片描述

邊框線

屬性名：border

屬性值：邊框線粗細(xì) 線條樣式顏色（不區(qū)分順序）

常用線條樣式：

屬性值	線條樣式
solid	實(shí)線
dashed	虛線
dotted	點(diǎn)線

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px solid black;display: inline-block;}.div2{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dashed black;display: inline-block;}.div3{width: 100px;height: 100px;background-color: #f7b7b7;border: 2px dotted black;display: inline-block;}</style></head><body><div class="div1">這是一段文字這是一段文字這是一段文字這是一段文字</div><div class="div2">這是一段文字這是一段文字這是一段文字這是一段文字</div><div class="div3">這是一段文字這是一段文字這是一段文字這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

設(shè)置單方向邊框線：

屬性名：border-方位名詞

屬性值：邊框線粗細(xì) 線條樣式顏色（不區(qū)分順序）

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;border-right: 2px solid black;border-top: 4px dotted red;border-left: 2px dashed blue;border-bottom: 4px solid yellow;}</style></head><body><div>這是一段文字這是一段文字這是一段文字這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

內(nèi)邊距

作用：設(shè)置內(nèi)容與盒子邊緣之間的距離

屬性名：padding / padding-方位名詞

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding-left: 20px;padding-right: 40px;padding-top: 10px;padding-bottom: 50px;}</style></head><body><div>這是一段文字這是一段文字這是一段文字這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

內(nèi)邊距多值寫法

取值個(gè)數(shù)	示例	含義
一個(gè)值	`padding: 10px;`	四個(gè)方向內(nèi)邊距均為 10px
兩個(gè)值	`padding: 10px 80px;`	上下：10px；左右：80px
三個(gè)值	`padding: 10px 40px 80px;`	上：10px；左右：40px；下：80px
四個(gè)值	`padding: 10px 20px 40px 80px;`	上：10px；右：20px；下：40px；左：80px

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background-color: #f7b7b7;padding: 10px 20px 40px 80px;}</style></head><body><div>這是一段文字這是一段文字這是一段文字這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：從上開始順時(shí)針轉(zhuǎn)一圈，如果當(dāng)前方向沒有數(shù)值，取值跟對(duì)邊一樣

尺寸計(jì)算

默認(rèn)情況：

盒子尺寸 = 內(nèi)容尺寸 + border 尺寸 + 內(nèi)邊距尺寸

結(jié)論：給盒子加 border/padding 會(huì)撐大盒子

解決方法：

手動(dòng)做減法：減掉 border/padding 的尺寸
內(nèi)減模式：box-sizing:border-box

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f7b7b7;padding: 20px;border: 2px solid black;box-sizing: border-box;}</style></head><body><div>這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

外邊距

作用：拉開兩個(gè)盒子之間的距離

屬性名：margin

提示：與 padding 屬性值寫法、含義相同

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f7b7b7;margin: 20px;}</style></head><body><div>這是一段文字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：外邊距不會(huì)撐大盒子

外邊距版心居中

通過左右兩邊添加相同的外邊距使版心居中

格式：

選擇器{margin: 0 auto 0;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 800px;height: 512px;background-color: #f7b7b7;margin: 0 auto 0;}</style></head><body><div><img src="./img/2.png" alt=""></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：版心居中盒子一定要有寬度

邊距問題

外邊距-合并現(xiàn)象

場(chǎng)景：垂直排列的兄弟元素，上下 margin 會(huì)合并

現(xiàn)象：取兩個(gè) margin 中較大值生效

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.div1{width: 200px;height: 100px;background-color: #f0a3a3;margin-bottom: 20px;}.div2{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}</style></head><body><div class="div1">這是一段字</div><div class="div2">這是一段字</div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

外邊距-塌陷問題

場(chǎng)景：父子級(jí)的標(biāo)簽，子級(jí)的添加上外邊距會(huì)產(chǎn)生塌陷問題

現(xiàn)象：導(dǎo)致父級(jí)一起向下移動(dòng)

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.father{width: 400px;height: 400px;background-color: #f0a3a3;}.son{width: 200px;height: 100px;background-color: #b4a3f0;margin-top: 50px;}</style></head><body><div class="father"><div class="son">son</div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

解決方法：

取消子級(jí) margin，父級(jí)設(shè)置 padding（規(guī)避問題）
父級(jí)設(shè)置 overflow: hidden
父級(jí)設(shè)置 border-top

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.father{width: 400px;height: 400px;background-color: #f0a3a3;padding-top: 50px;box-sizing: border-box;}.son{width: 200px;height: 100px;background-color: #b4a3f0;}</style></head><body><div class="father"><div class="son">son</div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

行內(nèi)元素-內(nèi)外邊距問題

場(chǎng)景：行內(nèi)元素添加 margin 和 padding，無法改變?cè)卮怪蔽恢?/p>

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>span{margin: 50px;padding: 20px;}</style></head><body><span>這是一行字</span></body>
</html>

結(jié)果如下：
在這里插入圖片描述

解決方法：給行內(nèi)元素添加 line-height 可以改變垂直位置

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>span{margin: 50px;padding: 20px;line-height: 100px;}</style></head><body><span>這是一行字</span></body>
</html>

結(jié)果如下：
在這里插入圖片描述

清除默認(rèn)樣式

清除標(biāo)簽?zāi)J(rèn)的樣式，比如：默認(rèn)的內(nèi)外邊距

格式：

*{margin: 0;padding: 0;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}</style></head><body><h1>標(biāo)題</h1><p>文本內(nèi)容</p><ul><li>列表內(nèi)容</li></ul></body>
</html>

結(jié)果如下：
在這里插入圖片描述

去掉列表項(xiàng)目符號(hào)

格式：

選擇器{list-style: none;
}

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>li{list-style: none;}</style></head><body><ul><li>列表內(nèi)容</li><li>列表內(nèi)容</li><li>列表內(nèi)容</li><li>列表內(nèi)容</li></ul></body>
</html>

結(jié)果如下：
在這里插入圖片描述

元素溢出

作用：控制溢出元素的內(nèi)容的顯示方式

屬性名：overflow

屬性值：

hidden：溢出隱藏
scroll：溢出滾動(dòng)（無論是否溢出，都顯示滾動(dòng)條位置）
auto：溢出滾動(dòng)（溢出才顯示滾動(dòng)條位置）

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background-color: #f0a3a3;overflow: auto;}</style></head><body><div>雨絲斜斜地穿過玻璃幕墻，在地面洇開細(xì)碎的光斑?？Х瑞^里飄著焦糖瑪奇朵的甜香，鄰座姑娘的筆記本攤開在《雪國(guó)》某頁(yè)，窗外的櫻花正與書頁(yè)上 "銀河傾瀉進(jìn)瞳孔" 的句子重疊。地鐵報(bào)站聲從地底傳來時(shí)，自動(dòng)販賣機(jī)突然吐出一罐過期的橘子汽水，金屬拉環(huán) "咔嗒" 輕響，驚飛了檐下打盹的灰鴿。暮色漫過街道時(shí)，修鞋匠終于為最后一只舊皮鞋釘上銅掌，錘子與鐵砧碰撞的節(jié)奏，恰好吻合十字路口紅綠燈交替的頻率。</div></body>
</html>

結(jié)果如下：

屏幕錄制 2025-03-08 175915

圓角

作用：設(shè)置元素的外邊框?yàn)閳A角

屬性名：border-radius

屬性值：（圓角半徑）

數(shù)字 + px
百分比

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 80px 20px 80px 20px;}</style></head><body><div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：從左上角順時(shí)針開始賦值，沒有賦值的角與對(duì)角的值相同

圓角應(yīng)用

正圓形狀

給正方形盒子設(shè)置圓角屬性值為寬高的一半（50%）

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 200px;background-color: #42e2ee;border-radius: 50%;}</style></head><body><div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

注意事項(xiàng)：圓角最大值是 50%，超過 50% 不會(huì)生效

膠囊形狀

給長(zhǎng)方形盒子設(shè)置圓角屬性值為盒子高度的一半

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;}</style></head><body><div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

陰影

作用：給元素設(shè)置陰影效果

屬性名：box-shadow

屬性值：X軸偏移量 Y軸偏移量模糊半徑擴(kuò)散半徑顏色內(nèi)/外陰影

注意事項(xiàng)：

X 軸偏移量和 Y 軸偏移量必須書寫
默認(rèn)是外陰影，內(nèi)陰影需要添加 inset

代碼示例：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{margin: 50px auto;width: 200px;height: 80px;background-color: #42e2ee;border-radius: 40px;box-shadow: 2px 5px 10px 2px black inset;}</style></head><body><div></div></body>
</html>

結(jié)果如下：
在這里插入圖片描述

查看全文

http://www.risenshineclean.com/news/1954.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

目錄

復(fù)合選擇器

后代選擇器

子選擇器

并集選擇器

交集選擇器

偽類選擇器

CSS 三大特性

繼承性

層疊性

優(yōu)先級(jí)

背景屬性

背景色

背景圖

背景圖平鋪方式

背景圖位置

背景圖縮放

背景圖固定

背景復(fù)合屬性

顯示模式

顯示模式

塊級(jí)元素

行內(nèi)元素

行內(nèi)塊元素

轉(zhuǎn)換顯示模式

結(jié)構(gòu)偽類選擇器

結(jié)構(gòu)偽類選擇器

nth-child(公式)

偽元素選擇器

盒子模型

組成

邊框線

內(nèi)邊距

尺寸計(jì)算

外邊距

邊距問題

外邊距-合并現(xiàn)象

外邊距-塌陷問題

行內(nèi)元素-內(nèi)外邊距問題

清除默認(rèn)樣式

元素溢出

圓角

圓角應(yīng)用

正圓形狀

膠囊形狀

陰影

相關(guān)文章：