欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

导航栏的构建

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

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