CSS 导航栏
下面我们就来定制下自己的导航栏.
垂直导航栏:
首先我们以列表的形式作为最基础的承载,然后我们再其中加入本地或外部的链接,就像下面这样:
<ul> <li><a href="http://www.php.cn">php中文网 link</a></li> <li><a href="http://www.php.cn">php中文网 link</a></li> <li><a href="http://www.php.cn">php中文网 link</a></li> <li><a href="http://www.php.cn">php中文网 link</a></li> </ul>
然后我们就会得到这样的效果:
我们一般看见的导航栏都没有下划线,和前面的带点,并且当我们的鼠标移到链接上面时链接的颜色会发生相应的变化,这就是我们现在要让 CSS 实现的效果.
首先,我们要去掉前面的点
ul{ list-style: none;
}接下来我们就去掉下划线(不管是未被点击的状态还是已被点击的状态都去掉),然后加上个背景颜色,再将其显示作为块来显示:
a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block;
}最后我们再给导航栏加个鼠标移动到上面时,改变背景颜色:
a:active,a:hover{ background-color: cadetblue;
}下面就是效果图
垂直的效果图讲完之后,我们再来讲讲水平的导航栏,我们就只需要修改 CSS 文件就可以了.
首先我们要将前面的显示效果删除,就是这句:
display: block;
然我们只需要在 li 标签中改变显示方式就可以:
li{ display: inline;
}这样就可以实现水平导航栏
我们可以根据自己的喜好,设置边距,字体,颜色等等.这里我么不就不再一一的讲述.
