如何使用html的無序列表ul和css完成導航欄
下面是經由過程html的無序標簽ul共同css樣式來完當作一個導航欄的功能。
方式/步調
- 1
起首建立一個html的是文件。
- 2
然后建立一個div，并為它的id屬人命名為menu
- 3
在該div下建立一個無序標簽ul,并在ul標簽添加列表項標簽內容。
- 4
此時因為沒有添加div和a標簽的css樣式，所以結果如下，這顯然不是我們的需要。
- 5
在html頭部添加css。經由過程id選擇器添加導航欄div的樣式，包羅border邊框樣式，background-color布景顏色，寬、高。具體仍是看你小我的需要。
添加了div的css樣式之后，跟我們的需如果有點像了。但列表縱標的目的是不可的。
- 6
然后我們經由過程層級選擇器，將縱標的目的列表改當作橫項。display是顯示結果，inline見名知義顯示在一行上。再改變顏色
改完之后如圖，根基上可以了。
- 7
當然有需要我們也可以去失落a標簽所帶來的下劃線。再把字體之間的距離調整一下會更都雅。
經由過程
text-decoration:none;去失落下劃線。然后html中經由過程 （占一個字符，所以兩個占一個中文字）轉義字符添加空格，如許可以拉年夜字體間的距高。
- 8
如許導航欄的結果根基就出來，具體結果如下固然可能還有點欠好看，但也差不多可以了。
- 發表于 2018-04-07 00:00
- 閱讀 ( 1514 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章