本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下:BvUHTML5中文学习网 - HTML5先行者学习网
这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气、简洁专业,在此推荐给大家。菜单上有一个标记,指引当前的位置,也是本菜单的亮点。用CSS究竟是如何实现的呢?那么就请一起看代码吧。BvUHTML5中文学习网 - HTML5先行者学习网
先来看看运行效果截图:BvUHTML5中文学习网 - HTML5先行者学习网
BvUHTML5中文学习网 - HTML5先行者学习网
具体代码如下:BvUHTML5中文学习网 - HTML5先行者学习网
代码如下:BvUHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"BvUHTML5中文学习网 - HTML5先行者学习网
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">BvUHTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml">BvUHTML5中文学习网 - HTML5先行者学习网
<head>BvUHTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />BvUHTML5中文学习网 - HTML5先行者学习网
<title>仿2010猪八戒首页导航菜单</title>BvUHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">BvUHTML5中文学习网 - HTML5先行者学习网
<!--BvUHTML5中文学习网 - HTML5先行者学习网
body{font:12px 微软雅黑,Verdana,Tahoma;}BvUHTML5中文学习网 - HTML5先行者学习网
*{padding:0px;margin:0px;}BvUHTML5中文学习网 - HTML5先行者学习网
* li{list-style:none;}BvUHTML5中文学习网 - HTML5先行者学习网
a{text-decoration:none;color:#20537A;}BvUHTML5中文学习网 - HTML5先行者学习网
a:hover{text-decoration:underline;}BvUHTML5中文学习网 - HTML5先行者学习网
.clearfix:after {BvUHTML5中文学习网 - HTML5先行者学习网
content: "