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

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

这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气、简洁专业,在此推荐给大家。菜单上有一个标记,指引当前的位置,也是本菜单的亮点。用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>
<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: "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>
<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程序设计有所帮助。

时间: 2016-08-26

div+css实现仿猪八戒首页导航菜单效果的相关文章

JavaScript+CSS实现仿天猫侧边网页菜单效果_javascript技巧

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st

jQuery+css实现非常漂亮的水平导航菜单效果_jquery

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

js实现改进的仿蓝色论坛导航菜单效果代码_javascript技巧

本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款改进的仿蓝色论坛导航菜单,滑动门级的导航菜单,网址跟踪链接的JS导航菜单,可以支持二级的菜单.为改善用户体验,加了延时.其原理是将链接地址和网址比较,如果一致,则加强该链接和上级链接的显示. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/ 具体代码如下: <html> &l

css ul li实现纵向导航菜单效果

效果如下  代码如下 复制代码 <style type="text/css"> #navsite {     font-family: Verdana, Helvetica, Arial, sans-serif;     font-size: 0.7em;     font-weight: bold;     width: 12em;     border-right: 1px solid #666;     padding: 0;     margin-bottom: 1

不错的div+CSS的无限级扩展下拉菜单效果

我是菜单1 一一一级 01 一一一级 02 第222菜单 01 第222菜单 02 33333333_01 33333333_02 4444级菜单里的01 4444级菜单里的02 这个是第五级菜单 33333333_03 第222菜单 03 第222菜单 04 一一一级 03 一一一级 04 一一一级 05 我是菜单2 游戏业务部 游戏开发组 游戏事业部 海外事业部 我是菜单3 商业技术合作 网 站 合 作 客户服务中心 我是菜单4 公 司 动 态 发 展 历 程 开 发 进 度 其 他 新 闻

css实现横向下拉导航菜单效果代码

视频 健康 房产 广州 北京 上海 深圳 天津 重庆 武汉 杭州 四川 家居 教育 读书 游戏 彩票 购彩大厅 合买大厅 彩票开奖 走势图 彩票资讯 手机购彩

js实现仿爱微网两级导航菜单效果代码_javascript技巧

本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g

jQuery实现仿美橙互联两级导航菜单效果完整实例_jquery

本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

jQuery+css实现的蓝色水平二级导航菜单效果代码_jquery

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo