CSS制作圆角导航的另一思路
制作圆角导航其实跟制作圆角边框是一样的道理,有一种很常见的方法就是使用CSS绝对定位,切四个圆角的小图片,然后分别定位在四个角,这样就可以实现自动伸缩。但是这样的代码因为嵌套的DIV过多,而显得有些复杂,这里提供另外一种思路,即是通过CSS背景的定位去制作。
结合上面的两个背景属性,不使用绝对定位制作圆角导航的思路就出来了,即可通过两个分别定位左右背景图像的DIV再嵌套中间导航正文部分的UL,利用三者的长度错位来实现。HTML结构代码与CSS样式代码:
<html xmlns=”[url]http://www.w3.org/1999/xhtml[/url]”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Nav</title>
<style type=”text/css”>
body{font-size:12px;}
#navBox {background:#f00 url(p_w_picpaths/left.jpg) no-repeat left bottom; height:24px; padding-left:5px;}
#nav {background:#f00 url(p_w_picpaths/right.jpg) no-repeat right bottom; padding-right:5px; height:24px;}
ul {list-style:none; line-height:24px; background:#f00 url(p_w_picpaths/navBg.jpg) repeat-x; height:24px; margin:0; padding:0;}
li {float:left; width:60px; text-align:center;}
</style>
</head>
<div id=”navBox”>
<div id=”nav”>
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
</ul>
</div>
</div>
</body>
</html>