竖向导航

效果图

<style>

#bianji{

       width:120px;   /*宽*/

       padding:8px;   /*内间距*/

       margin:0 auto; /**/

       background-color:#ccc; /*背景颜色*/

       font-size:0.8em;     /*字体大小*/

       text-align:left;  /*文字左对齐*/

}

 

#bianji a:link,a:visited{

       color:#000;     /*文字颜色设置，黑色*/

       background-color:#fff;   /**/

       display:block;  /*块级元素*/

       text-decoration:none;     /*无下划线*/

       padding:4px 8px;    /*内边距上下4，左右8*/

       margin:4px 0;  /**/

       border-left:#699 15px solid;   /*左边框，蓝绿色，实线*/

       border-right:#699 15px solid; /*右边框，蓝绿色，实线*/

      

}

#bianji a:hover,a:active{

       color:#C00;     /*文字设置红色*//

       border-left:#000 15px solid;   /*左边框，黑色，实线*/

       border-right:#000 15px solid; /*右边框，黑色，实线*/

      

}

      

</style>

 

<div id="bianji">

<a href="#" >Home</a>

<a href="#" >Contact Us</a>

<a href="#" >Web Dev</a>

<a href="#" >Web Design</a>

<a href="#" >Map</a>

</div>

转载于:https://www.cnblogs.com/yo-yo/archive/2011/10/25/2223715.html