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

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

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

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/div-css-fzbj-web-menu-style-codes/

具体代码如下：

复制代码代码如下:!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> 仿2010猪八戒首页导航菜单/title>
style type="text/css">
!--
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: "\0020";
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>
body style="text-align:center">
div style="height:100px; "> /div>
div style="clear:both"> /div>
!--nav,start-->
div class="menu_navcc">
div class="menu_nav clearfix">
ul class="nav_content">
li class="current"> a href="#" title="首页"> span> 网站首页/span> /a> /li>
li> a href="#" title="广告代码"> span> 广告代码/span> /a> /li>
li> a href="#" title="CSS教程"> span> CSS教程/span> /a> /li>
li style="position:relative; "> a href="#" title="导航菜单"> span> 导航菜单/span> /a> em> /em> /li>
li> a href="#" title="源码素材"> span> 源码素材/span> /a> /li>
li> a href="#" title="常用代码"> span> 常用代码/span> /a> /li>
/ul>
div class="menu_nav_right">
/div>
/div>
/div>
!--nav,end-->
p> /p>
p> /p>
/body>
/html>

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！