css導航欄選中是有移動下劃線的效果

2021-08-05 19:51:03 字數 1317 閱讀 2569

html**：

css**：

* 


body


.header 


div.logo 


div.logo span 


ul ul img


ul li 


ul li a 


ul a:hover


.move


li:nth-child(1):hover~ .move


li:nth-child(2):hover~ .move


li:nth-child(3):hover~ .move


li:nth-child(4):hover~ .move


li:nth-child(5):hover~ .move


li:nth-child(6):hover~ .move
我最開始不懂的地方就是如何移動，用的其實就是transition屬性；還有滑鼠放在超連結上，下面出現下劃線，用的是：hover偽類；即最後幾行css**。

注：（1）~符號：應該是一種關係選擇器：

（2）transition屬性用於過度作用，這是乙個簡寫屬性，具體包含：

transition-property (執行變換的屬性 )

transition-duration (變換延續時間)

transition-timing-function  (延續時間內，變換速率的變化)

transition-delay  (變換延遲時間）

例：transition: left .2s ease-in-out 0s;/*包含四個過度屬性：執行變換屬性、執行時間、速率、延遲*/

left屬性發生變化，用時0.2秒，速度先慢到快再到慢

CSS總結 導航欄

接上回書，html 的作用是把內容寫到網頁上去 css的作用是對內容進行樣式的修飾。css，cascading style sheets 層疊樣式表。css 新增到html 中的方式 內聯樣式 解釋 在本標籤中加入css 展示 這是乙個段落。內部樣式表 解釋 在本頁面的 啊哈哈哈哈哈佛阿蘇廣佛愛迪生...

CSS實現側邊欄導航

charset utf 8 title type text css 隱藏checked核取方塊 sidemenu sidemenu checked aside sidemenu checked wrap aside h2 控制側邊欄進出的按鈕 外部包裹 wrap 控制側邊欄進出的按鈕 內部文字樣式 ...

CSS製作浮動導航欄

看著網上的教程做了個浮動導航欄，功能如圖 導航欄固定在視窗左側 使用fixed 滑鼠移動到一級欄目時，展開二級欄目，移動到二級欄目時展開 欄目 如下 一級欄目 二級欄目 二級欄目 一級欄目 二級欄目 二級欄目 一級欄目 二級欄目 二級欄目 ul li body page l 1 l 1 hover ...