本实例实现的过程中用到了CSS的浮动、绝对定位、背景定位等，下面青岛星网附实现代码给大家学习参考，下面是：div+css圆角背景图片导航条实现代码。
<div class="m-nav">
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
</ul>
<span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>
<div class="m-nav m-nav-1">
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
</ul>
<span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>
<div class="m-nav m-nav-2">
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
</ul>
<span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>/* 文本型圆角背景导航 */
.m-nav,.m-nav li,.m-nav li a,.m-nav .corner{height:40px;line-height:40px;}
.m-nav,.m-nav li,.m-nav .corner{background:url(nav.png) no-repeat -9999px -9999px;}
.m-nav{position:relative;margin:0 6px;text-align:center;font-size:0;letter-spacing:-0.307em;*letter-spacing:normal;*word-spacing:-1px;color:#fff;background-repeat:repeat-x;background-position:0 0;}
.m-nav li,.m-nav li a{display:inline-block;*display:inline;*zoom:1;}
.m-nav li{padding:0 0 0 1px;font-size:14px;letter-spacing:normal;word-spacing:normal;background-position:0 -150px;}
.m-nav li.first{background:none;}
.m-nav li a,.m-nav li a:hover{text-decoration:none;color:#fff;}
.m-nav li a{padding:0 20px;font-weight:bold;}
.m-nav .corner{position:absolute;top:0;width:6px;overflow:hidden;}
.m-nav .corner-l{left:-6px;background-position:0 -50px;}
.m-nav .corner-r{left:100%;background-position:0 -100px;}
/* 文本型圆角背景导航-居左 */
.m-nav-1{text-align:left;}
/* 文本型圆角背景导航-居右 */
.m-nav-2{text-align:right;}
/* 预览辅助样式 */
body{margin:20px;}
.m-nav{margin-bottom:20px;}本实例实现方式过于复杂，下面给大家一个最简单的同效果范例实现代码：div+css实现圆角背景文字导航条代码
在线QQ：
