标签：
下图是效果图:
然后, 左右两边的圆角图片和背景图片如下
(因为截图工具的原因, 可能图片不是很清晰. 这个图片有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:0; 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:1; } .m-nav li { background-position: 0 -150px; } .m-nav li.first{ background:none; } .m-nav .corner { width:6px; position: absolute; top:0;left: 0; } .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, 学习了文本控制和圆角背景导航(非浮动)的设计思路.
以上文章如有错误, 欢迎指正.
标签：
原文地址：http://www.cnblogs.com/Zell-Dinch/p/4513669.html
