首页 > Web开发 > 详细

导航条的制作(css)

时间:2015-10-16 15:01:13      阅读:205      评论:0      收藏:0      [点我收藏+]

一、在做导航条的时候,通过用css怎么让经过的a元素的边框颜色发生改变呢?

二、遇到的问题是重合的边框总是解决不好,然后解决的办法是

     先确定让他们的右边框与下一个元素的左边框重合。

    层级的先后顺序 a:hover{z-index: 1}

三、z-index必须在定位元素上才能奏效,所以定义了a的定位。最后问题解决了。

<!DOCTYPE html>
<html>
<head>
 <title>滚动条的样式制作练习</title>
 <meta charset="utf-8">
 <style type="text/css">
        *{margin:0;padding:0;}
        .nav{position: absolute;top:50px;left:30px;}
        .nav a{position:relative;float: left;display: block;height: 30px;line-height: 30px;padding:10px;text-decoration: none;
         border:1px solid #000;margin-left: -1px;}
         a:nth-last-child(1){border:1px solid #000; }
         a:hover{z-index: 1;border-color: red;} 
 </style>  
</head>
<body>
<div class="nav">
 <a href="#">首页</a>
 <a href="#">新闻</a>
 <a href="#">指南</a>
 <a href="#">专题</a>
 <a href="#">关于我们</a>
</div>
</body>
</html>

导航条的制作(css)

原文:http://www.cnblogs.com/syp1/p/4885090.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!