如何使用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
- 阅读 ( 1508 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章