构建导航栏的标签:ul li ol
ul li
无序列表的定义:
(网页中显示默认一般形式为:每个li标签前面都有一个圆点)
<ul> <li>文本</li> <li>文本</li> </ul>
ol li
有序列表的定义
(在网页中显示的默认样式一般为:每项 li 前都自带一个序号,序号默认从1开始)
<ol> <li>文本</li> <li>文本</li> </ol>
以上两种列表均为纵向排列。
制作导航栏:
第一步:
去掉ul-li标签上带有的小圆点
ul{
list-style-type:none;
}
第二步:
让li标签浮动起来,一般向左浮动
li{
float:left;
}
第三步:
美化导航栏添加背景颜色
设置字体大小、颜色
设置分界线
ul{
background-color:red;
font-size:18px;
color:green;
margin-left:1px;
}
第四步:
使用a标签给你的导航加上链接
<li><a href="#">首 页</a></li> //#表示空链接网址,你可以加上想要的链接
第五步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色
li a:hover { background-color: #e151ff; color: #efefef; }
补充鼠标事件
未被访问的链接:
a:link{color:#000;}
鼠标移动到链接上:
a:hover{ color:white; background-color:#f00; }