摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航

最新推荐文章于 2024-04-22 13:27:18 发布

weixin_33787529

最新推荐文章于 2024-04-22 13:27:18 发布

阅读量3.5k

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/05/25/2056327.html

版权

代码简介：

这个导航条做的不错，是模仿迅雷视频网站的，完全基于CSS和HTML代码，大气清新，请运行一下看看效果如何。

代码内容：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航_网页代码站(www.webdm.cn)</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

(http://www.webdm.cn/images/20100420/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

(http://www.webdm.cn/images/20100420/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(http://www.webdm.cn/images/20100420/kkindex_nav.png) 

no-repeat 0 -95px; width:72px; height:30px;}
.dhhome{background:url(http://www.webdm.cn/images/20100420/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(http://www.webdm.cn/images/20100420/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><a href="#" class="dhhome">首页</a></li>
	<li><a href="#">电影</a></li>
	<li><a href="#">电视剧</a></li>
	<li><a href="#">综艺</a></li>
	<li><a href="#">动漫</a></li>
	<li><a href="#">漫画</a></li>
	<li><a href="#">娱乐</a></li>
	<li><a href="#">排行榜</a></li>
	</ul>
  </div>
  <div class="dhright">
   大片 - 首播 - 新片 - 客服论坛 - 更多  
  <div class="dhrightimg"></div></div>
</div>
</body>
</html>

<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/2d85402b-6945-416c-9c26-33acd094502f.html

转载于:https://www.cnblogs.com/webdm/archive/2011/05/25/2056327.html

weixin_33787529

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航

代码简介：这个导航条做的不错，是模仿迅雷视频网站的，完全基于CSS和HTML代码，大气清新，请运行一下看看效果如何。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航_网页代码站(www.webdm.cn...
复制链接

扫一扫