＋转载请注明来源:
优雅印象-
优马-
《css学习笔记 6:垂直导航条》
＋本文链接地址： http://www.gracepress.cn/uma/css_note_6_creating_a_vertical_nav_bar.html
＋本文链接地址： http://www.gracepress.cn/uma/css_note_6_creating_a_vertical_nav_bar.html
先写出HTML结构:
【1】去掉去掉列表前面的符号并且将空白和填充设置为0 …
ul{
/*因IE和Opera使用左空白控制列表缩进,而Firefox使用左填充,
所以先将margin和padding设置为0*/
margin:0;
padding:0;
list-style-type:none;
}
【2】将链接按钮化，所以需要将锚的display属性设置为block，并指定按钮的宽及高
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
}
【3】用Pixy翻转技术,实现按钮翻转效果
这种技术就是将按钮的正常状态和鼠标停留状态背景图置于一张图,然后采用不同的对齐方法:
ul a{
background:#94B8E9 url(images/pixy-rollover.gif)
no-repeat left center;
text-indent:50px;/*露出背景图左边的箭头*/
}
a:hover{
background-position: right center;
color:#fff;
}
【4】取消相邻方框间的粗边线
因为背景囫有边框,当两个按钮垂直排列时,就会出现双重边线。解决的办法是将高度减少1px,并将图片用下对齐：
ul a{
height:39px;
line-height:39px;
background-position: left bottom;
}
a:hover{background-position: right bottom;}
/*但同时最顶部就没有边线了,需要将它补上 -----*/
li.first a{height:40px;line-height:40px;}
/*------*/
【5】进一步美化，如字体的样式及大小，通常将这一步放置于最前面
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}/*------*/
就这样,一步步下来,一个漂亮的垂直导航条以及翻转效果就出来了。
最后，将代码稍微整理一下，如下所示：
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
ul{
/*因IE和Opera使用左空白控制列表缩进,而Firefox使用左填充,
所以先将margin和padding设置为0*/
margin:0;
padding:0;
list-style-type:none;
}
ul a{
display:block;
width:200px;
height:39px;
line-height:39px;
color:#000;
text-decoration:none;
background:#94B8E9 url(images/pixy-rollover.gif)
no-repeat left bottom;
text-indent:50px;/*露出背景图左边的箭头*/
}
li.first a{height:40px;line-height:40px;}
a:hover{
background-position: right bottom;color:#fff;
}