当前位置：A5下载 > 网页制作 > div+css实现仿猪八戒首页导航菜单效果

div+css实现仿猪八戒首页导航菜单效果

时间：2015-08-26 15:34作者：yezheng人气：180

本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下：

这是一款仿猪八戒2010年首页的网页导航菜单，蓝色风格，非常漂亮大气、简洁专业，在此推荐给大家。菜单上有一个标记，指引当前的位置，也是本菜单的亮点。用CSS究竟是如何实现的呢？那么就请一起看代码吧。

先来看看运行效果截图：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>仿2010猪八戒首页导航菜单</title>

<!--

body{font:12px 微软雅黑,Verdana,Tahoma;}

*{padding:0px;margin:0px;}

* li{list-style:none;}

a{text-decoration:none;color:#20537A;}

a:hover{text-decoration:underline;}

.clearfix:after {

content: "020";

display: block;

height: 0;

clear: both;

}

.clearfix {

_zoom: 1;

}

*+html .clearfix {

overflow:auto;

}

.menu_navcc{width:970px; margin:0 auto;}

.menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}

.menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}

.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}

.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}

.menu_nav .nav_content li.current{line-height:37px;}

.menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}

.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}

.menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}

.menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}

p{margin-bottom:15px}

-->

</style>

</head>

<li><a href="#" title="CSS教程"><span>CSS教程</span></a></li>

</ul>

</div>

<p></p>

</body>

</html>

希望本文所述对大家的div+css程序设计有所帮助。

标签div+css,实现,猪八戒,首页,导航,菜单,效果,本文

A5站长下载站

div+css实现仿猪八戒首页导航菜单效果

相关推荐

相关下载

网友评论

热门阅览

最新排行