CSS实现背景自动延伸并填充的菜单效果

2024-09-05 12:21:57

字体：大中小

来源：转载

供稿：网友

CSS实现背景自动向两边延伸并填充的一个菜单效果，估计大部分朋友都见得习惯了，其实想表达的也就是CSS的自适应功能，一款菜单，当两侧没有菜单项的时候，它会向两边自动填充开来，以适应整体的效果变化。

<!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><title>背景自动填充</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body,ul,li,a{margin:0;padding:0;font-size:14px;}a{color:#04a;text-decoration:none;}a:hover{color:#fff;}ul{line-height:50px;position:relative;z-index:9001;}li{float:left;list-style:none;margin-right:20px;}#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;}</style></head><body><div id="a">	<div id="b">		<ul>			<li>网络杂谈</li>			<li>留言反馈</li>			<li>有问必答</li>			<li>互联网谈</li>			<li>精品源码</li>			<li>技术言论</li>			<li>黄河音像</li>			<li>交互设计</li>			<li>论坛社区</li>		</ul>		<div id="c"></div>	</div>	<div id="d"></div></div></body></html>

上一篇：点击按钮，网页变暗、屏幕锁定Js代码

下一篇：让网页背景滚动，文字及其它都不滚动的代码