CSS仿迅雷的网站导航

2024-09-05 12:20:28

字体：大中小

来源：转载

供稿：网友

CSS仿迅雷的网站导航，蓝色风格，很大气的菜单，导航项鼠标经过时切换背景，符合大家的使用习惯，菜单兼容性也不错，在IE、火狐下都有较好表现，希望大家喜欢。

<!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=gb2312" /><title>CSS仿迅雷的网站导航</title><style type="text/css">body{margin:0px;font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif}#nav{position:relative;width:964px;height:95px;z-index:1px;margin:10px auto; background:url(/jscss/demoimg/200910/kkindex_nav.png)}#navli{position:absolute;width:580px;height:32px;left:35px;top:-2px;}ul {margin:0;}.dh li{width:72px;height:30px; float:left;position:relative; line-height:30px;zoom:1;list-style:none;text-align:center; background:url(/jscss/demoimg/200910/kkindex_nav.png) no-repeat; background-position:-125px -99px}.dh li a{color:#000000; text-decoration:none}.dh li a:hover{zoom:1;color:#ffffff;text-decoration:none; font-weight:bold; background:url(/jscss/demoimg/200910/kkindex_nav.png) no-repeat 0 -95px; width:72px; height:30px;}.dhhome{background:url(/jscss/demoimg/200910/kkindex_nav.png) no-repeat 0 -95px;width:72px;height:30px;zoom:1;color:#ffffff !important; font-weight:bold}.dhright{position:absolute;width:280px;height:31px;left:680px;top:-2px; text-align:center; line-height:30px;}.dhrightimg{ position:absolute;right:-4px; top:10px;background:url(/jscss/demoimg/200910/kkindex_nav.png) no-repeat; background-position:-954px -115px; padding-right:15px; width:10px;height:10px;}</style></head><body><div id="nav">  <div id="navli">    <ul class="dh">	<li>首页</li>	<li>电影</li>	<li>电视剧</li>	<li>综艺</li>	<li>动漫</li>	<li>漫画</li>	<li>娱乐</li>	<li>排行榜</li>	</ul>  </div>  <div class="dhright">   大片 - 首播 - 新片 - 客服论坛 - 更多    <div class="dhrightimg"></div></div></div></body></html>

上一篇：简约、兼容好的XHTML+css二级导航菜单

下一篇：CSS仿支付宝菜单，自己亲手写的

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注