用HTML中的列表标签做一个导航栏吧

我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗?

首先要知道的:HTML中的列表标签都有那些呢?

1. ul-li无序列表 ( 网页中显示的默认样式一般为：每项 li 前都自带一个圆点 )
   语法:

<ul>
     <li>文本</li>
     <li>文本</li>
</ul>

2.ol-li有序列表(在网页中显示的默认样式一般为：每项 li 前都自带一个序号，序号默认从1开始)

<ol>
     <li>文本1</li>
     <li>文本2</li>
</ol>

其实导航栏就是给列表标签设置CSS样式

制作导航栏开始啦:

第一步:
在HTML上的文件里加上ul-li 标签,在对应的CSS文件中使用下边语句去掉 li 标签前面默认的小圆点

ul{
 list-style: none;
  }

第二步:
让 li 标签浮动起来,一般设置为左浮动,看看它是不是变成了一横排

li {   
     float: left;
   }

第三步:
美化一下你的导航栏,给它加个背景色吧 background-color: red;
每个导航单元的字数不同,大小不同给它设置宽高看起来更美观 height: 30px; width: 100px;
字体颜色也可以设置哦 color: #000f;
留个分界线导航栏不会连成一片了margin-left: 1px;

加个圆弧会不会更好看呢? border-radius: 15px 15px 0 0;

第四步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色

li a:hover {           //a标签是给li文本加了链接 下面介绍
background-color: #e151ff;  
  color: #efefef;
}

第五步:
使用a标签给你的导航加上链接

<li><a href="#">首　 页</a></li>    //#表示空链接网址,你可以加上想要的链接

一般加上链接后文本会默认加一个下划线,使用语句 text-decoration: none; 去除下划线

补充鼠标事件

未被访问的链接

a:link {    color: #000; }   

鼠标指针移动到链接上

a:hover {        /* 鼠标指针移动到链接上 */
  color: white;  
  height: 30px;  
  background: #f00;  
}

正在被点击的链接

a:active {    color: #000;  }  

已被访问的链接

a:visited {    color: #a369af;  }

不同的属性会呈现不同的效果哦, 赶快试试吧 !