css實現導航切換

2021-09-28 12:34:54 字數 1558 閱讀 9329

css實現導航切換

效果圖:

**如下,複製即可使用:

doctype html

>

<

html

>

<

head

>

<

title

>css實現導航切換

title

>

<

style

type

="text/css"

>

.clothes*li

a.clearfix:after

ul li

aa:hover

style

>

head

>

<

body

>

<

div

class

="clothes"

>

<

ul class

="clearfix"

>

<

li style

="border-left:1px solid #ededed;"

><

a style

="border-left:1px solid #fff;"

href

="">大牌

a>

li>

<

li><

a href

="">**

a>

li>

<

li><

a href

="">**

a>

li>

<

li><

a href

="">鞋靴

a>

li>

<

li><

a href

="">箱包

a>

li>

<

li><

a href

="">內衣配飾

a>

li>

<

li><

a href

="">珠寶首飾

a>

li>

<

li><

a href

="">奢侈禮品

a>

li>

<

li style

="border-right:1px solid #ededed;"

><

a href

="">奢華腕表

a>

li>

ul>

div>

body

>

html

>

如有錯誤,歡迎聯絡我改正,非常感謝!!!

更多專業前端知識,請上

【猿2048】www.mk2048.com

CSS實現側邊欄導航

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

使用附加導航 affix 實現內容切換

doctype html html head title new document title meta charset utf 8 style a ul affix affix active a container container box container box.active style ...

使用JS實現導航切換時高亮顯示

index.html 內容 1.html 內容 效果圖 注意 1 location.href 用於獲取當前頁面的url 2 當前頁面應該儲存為index.html 3 indexof 用於檢索當前url中是否存在a中對應的href 4 每個html中都擁有相同的導航結構 5 eq index ind...