导航栏的构建

导航栏是我们在浏览器中最常见的页面构成,导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用。

构建导航栏的标签: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;
}





猜你喜欢

转载自1508144386.iteye.com/blog/2416722