新浪博客自适应宽度的CSS菜单

2024-09-05 12:20:12

字体：大中小

来源：转载

供稿：网友

新浪博客的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><style>*{margin:0;padding:0;list-style:none;}body{font-size: 14px;background:#7798a3} a{color:#336699;text-decoration:none}.on a{color:#fff;}.menu{width:800px;height:80px;background:#9cb8c3;padding:10px;}.menu li{float:left;padding-left:1px;background:url(/jscss/demoimg/200907/08menutag.gif) -1px top;height:34px}.menu li span{float:left;padding:10px 15px 0px 14px;float:left;background:url(/jscss/demoimg/200907/08menutag.gif) right -34px;position:relative;height:24px;} .menu li.on{background-position:-1px -68px;} .menu li.on span{float:left;padding:10px 16px 0px 14px;background-position:right bottom;font-weight:bold;height:24px}</style></head><body><div class="menu"><ul><li class="on"><span>首页</span></li>     <li><span>源码学习</span></li><li><span>最新更新</span></li><li><span>网站留言</span></li><li><span>网页特效</span></li></ul></div></body></html>

上一篇：会自动循环播放的选项卡

下一篇：像滑动门一样的CSs菜单