如何使用html的无序列表ul和css完成导航栏

下面是经由过程html的无序标签ul共同css样式来完当作一个导航栏的功能。

方式/步调

1. 1

   起首建立一个html的是文件。

   
2. 2

   然后建立一个div，并为它的id属人命名为menu

   
3. 3

   在该div下建立一个无序标签ul,并在ul标签添加列表项标签内容。

   
4. 4

   此时因为没有添加div和a标签的css样式，所以结果如下，这显然不是我们的需要。

   
5. 5

   在html头部添加css。经由过程id选择器添加导航栏div的样式，包罗border边框样式，background-color布景颜色，宽、高。具体仍是看你小我的需要。

   添加了div的css样式之后，跟我们的需如果有点像了。但列表纵标的目的是不可的。

   
6. 6

   然后我们经由过程层级选择器，将纵标的目的列表改当作横项。display是显示结果，inline见名知义显示在一行上。再改变颜色

   改完之后如图，根基上可以了。

   
7. 7

   当然有需要我们也可以去失落a标签所带来的下划线。再把字体之间的距离调整一下会更都雅。

   经由过程

   text-decoration:none;去失落下划线。然后html中经由过程 （占一个字符，所以两个占一个中文字）转义字符添加空格，如许可以拉年夜字体间的距高。

   
8. 8

   如许导航栏的结果根基就出来，具体结果如下固然可能还有点欠好看，但也差不多可以了。