CSS制作网页导航:两侧背景自动延伸

作者佚名技术来源 CSS技术浏览发布时间 2012-02-02

方法来源于土豆网的导航，在这里纪录一下实现的思路。

主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的，通过position:absolute将需要平铺的背景层叠在另一背景上，这样即可以实现同一位置的两个背景，再使用z-index将内容提升到最高阶显示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互联网谈</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互设计</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技术言论</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

首先将其中一个背景样式写在<div id=”a”>上，然后是将另一个背景样式写在<div id=”d”>上，<div id=”b”>为内容层，<div id=”c”>是另一个背景样式层，可以自由的出现在<div id=”b”>里面的任何一个位置。如土豆网中间的那个有弧线的背景。

然后是样式方面：

#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}

具体代码参见：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>两侧背景自动延伸</title> <style type="text/css"> body,ul,li,a {margin:0; padding:0; font-size:14px;} #a {background:#f00; height:50px; position:relative; width:100%;} #b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;} #c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;} #d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;} ul {line-height:50px; position:relative; z-index:9001;} li {float:left; list-style:none; margin-right:20px;} a {color:#04a; text-decoration:none;} a:hover {color:#fff;} </style> </head> <body> <div id="a"> <div id="b"> <ul> <li><a href="http://www.webjx.com/category/internet">互联网谈</a></li> <li><a href="http://www.webjx.com/category/interaction">交互设计</a></li> <li><a href="http://www.webjx.com/category/technic">技术言论</a></li> <li><a href="http://www.webjx.com/category/internet">互联网谈</a></li> <li><a href="http://www.webjx.com/category/interaction">交互设计</a></li> <li><a href="http://www.webjx.com/category/technic">技术言论</a></li> <li><a href="http://www.webjx.com/category/internet">互联网谈</a></li> <li><a href="http://www.webjx.com/category/interaction">交互设计</a></li> <li><a href="http://www.webjx.com/category/technic">技术言论</a></li> </ul> <div id="c"></div> </div> <div id="d"></div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS3设计赛:基于纯CSS3技术的前5名设计师下一篇: 最近整理的一份CSS文字隐藏的demo

关于CSS制作网页导航:两侧背景自动延伸的所有评论

随机推荐