大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说css垂直导航栏_css鼠标经过的导航栏效果,希望您对编程的造诣更进一步.
今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：
1.首先我们创建一个有效的列表
<li> <a href=”http://www.？？？.com”>首页</a> </li>
<li><a href=”http://www.？？？.com”>关于我们</a> </li>
<li><a href=”http://www.？？？.com”>产品展示</a> </li>
<li><a href=”http://www.？？？.com”>产品知识</a> </li>
<li><a href=”http://www.？？？.com”>新闻动态</a> </li>
<li><a href=”http://www.？？？.com” class=”last”>联系我们</a></li>
去掉默认的项目符号并将外边距和内边距设置为零：
ul.nav{margin:0;
padding:0
list-style-type:none;}
2.接下来我们给导航设置一个浅色的背景和深色的边框，并给它一定的宽度（根据自己的需要）：
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
3.为链接显示文本设置样式，首先设置文本的颜色并关闭下划线，使文本居中对齐，接着为了使每个链接看起来像一个独立的区块需要设置一下边框，让边框顶部的颜色比背景颜色浅一点边框底部颜色比背景颜色深深一点，除此之外还需要把它的display属性设置为block,目的是让其成为块级元素，这样宽度会与列表背景宽度保持一致（下图展示了它们之间区别）
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
4.现在看起来已经有点像一个垂直导航条了，但最后一个链接的底边框与列表的第边框貌似重合了，这里我们可以把最后一个链接的底边框设置成与它的顶边框一致的颜色就可以了。最后我们来完成鼠标悬停时的效果，这是就要用到：hover了，为此只需要修改一下背景和文本颜色就可以了。
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
ul.nav a.last{border-bottom: 1px solid #E4FFD3}
ul.nav a:hover{color:#E4FFD3;
background-color:mediumvioletred;}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/11755.html
