簡單的導航欄實現

2022-02-11 10:42:56 字數 1213 閱讀 1185

為了seo優化,導航欄最好標籤語義化。

最符合語義的莫過於ul,li。在採用多級標籤時,可採用控制二級標籤ul位置的方式來進行顯隱。

效果如下:

具體的html**:

.dropdown,ul

.dropdown li

.dropdown li ul

.dropdown li li

.dropdown li:hover ul

.dropdown a

.dropdown a:hover,.dropdown a:focus

<

ul class

="dropdown"

>

<

li><

a href

="#"

>home

a>

li>

<

li><

a href

="#"

>products

a>

<

ul>

<

li><

a href

="#2"

>silverback

a>

li>

<

li><

a href

="#2"

>fontdeck

a>

li>

ul>

li>

<

li><

a href

="aa"

>

a>

services

<

ul>

<

li><

a href

="ad"

>design

a>

li>

<

li><

a href

="ad"

>development

a>

li>

<

li><

a href

="ad"

>consultancy

a>

li>

ul>

li>

<

li><

a href

="ds"

>contact us

a>

li>

ul>

Flutter底部導航欄的實現

import package flutter material.dart import package flutter guohe pages main.dart void main 複製 建立main.dart作為首頁的頁面檔案 class guohe extends statefulwidget...

知乎導航欄實現

導航欄,下拉時仍存在,故使用了固定布局 position fixed 左右有一定空閒,故可以用自適應布局來實現。整個過程不是很難,只是在實現文字垂直居中時走進了誤區。先開始指定導航欄到合適的height,此值比文字字型大小大,實現文字的垂直居中時出現了問題。考慮到ie下無法實現vertical al...

CSS實現側邊欄導航

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