下图是效果图:
然后, 左右两边的圆角图片和背景图片如下
(因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线)
思路:
利用inline-block元素的中间性(既有块级元素特点: 能够控制宽高,可以定位, 也有内联元素特点: 可以被父元素text-align等)
HTML代码:
<div class="m-nav">
<ul>
<li class="first"><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
</ul>
<span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>
1, 首先定位一个总体高度, .m-nav, .m-nav li, .m-nav li a, .m-nav .corner 这几个元素是一样高的
2, 确定要使用图片的元素, .m-nav(中间背景图片), .m-nav .corner(左右圆角图), .m-nav li(栏目分割的白线图)
3, 将栏目中间化, inline-block控制(考虑兼容性)
4, 定位圆角
5, 控制文本
css 代码如下:
<style type="text/css">
.m-nav, .m-nav li, .m-nav li a, .m-nav .corner {
height:40px;line-height:40px;background: url(images/nav.png) no-repeat -9999px -9999px;
}
.m-nav {
background-position: 0 0;width:90%;
background-repeat: repeat-x;
text-align:center;
font-weight:bold;
margin:auto;
margin-top:45px;
position:relative;
font-size:;
color:#fff;
letter-spacing: -0.307em;
*letter-spacing: normal;
*word-spacing: -1px;
}
.m-nav li, .m-nav li a, .m-nav .corner {
display:inline-block;*display:inline;*zoom:;
}
.m-nav li {
background-position: 0 -150px;
}
.m-nav li.first{
background:none;
}
.m-nav .corner {
width:6px;
position: absolute;
top:;left:;
}
.m-nav .corner-l {
background-position: 0 -50px;
margin-left:-6px;
}
.m-nav .corner-r {
background-position: 0 -100px;
margin-left:100%;
}
.m-nav li a {
padding:0 20px;
font-size:14px;color:#fff;text-align:center;
letter-spacing: normal;
word-spacing:normal;
}
.m-nav li a:hover{
text-decoration: underline;
}
</style>
这里通过NEC学习CSS, 学习了文本控制和圆角背景导航(非浮动)的设计思路.
以上文章如有错误, 欢迎指正.