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;}