当当网导航菜单实例仅供学习
2013-11-06 14:14
211 查看
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="welcome" class="wrap">
<ul>
<li class="login">欢迎光临当当网,请<a href="#">登录</a><a href="#">免费注册</a></li>
<li class="shopping"><a href="#">购物车</a></li>
<li><em></em><a href="#">我的订单</a></li>
<li><em></em><a class="arrow" href="#">我的当当</a></li>
<li><em></em><a class="arrow" href="#">礼品卡</a></li>
<li><em></em><a href="#">帮助</a></li>
</ul>
</div>
<div id="mainNav" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="large">
<div class="organge">网上购物享当当</div>
<ul>
<li class="home"><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="side">
<ul>
<li><a href="#">商家</a></li>
<li><em></em><a href="#">当当榜</a></li>
<li><em></em><a class="arrow" href="#">礼物</a></li>
<li><em></em><a href="#">在线读书</a></li>
<li><em></em><a class="arrow" href="#">更多服务</a></li>
</ul>
</div>
</div>
<div id="navbar">
<ul class="wrap">
<li><a href="#">音乐</a></li>
<li><em></em><a href="#">影视</a></li>
<li><em></em><a href="#">少儿</a></li>
<li><em></em><a href="#">教辅</a></li>
<li><em></em><a href="#">小说</a></li>
<li><em></em><a href="#">外语</a></li>
<li><em></em><a href="#">数码相机</a></li>
<li><em></em><a href="#">笔记本</a></li>
<li><em></em><a href="#">连衣裙</a></li>
<li><em></em><a href="#">高跟鞋</a></li>
<li><em></em><a href="#">运动鞋</a></li>
<li><em></em><a href="#">美容护肤</a></li>
<li><em></em><a href="#">厨卫用品</a></li>
<li><em></em><a href="#">婴幼奶粉</a></li>
<li><em></em><a href="#">玩具</a></li>
<li><em></em><a href="#">没事保健</a></li>
<li><em></em><a href="#">饰品</a></li>
</ul>
</div>
</body>
@charset "utf-8";
/* CSS Document */
body { padding:0; margin:0; font-size:12px; line-height:22px; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
.wrap { width:960px; margin:0 auto; }
#welcome ul { margin-left:450px; }
#welcome ul li { float:left; }
#welcome ul li a { color:#000000; text-decoration:none; margin:0 5px; }
#welcome ul li.login a { color:#1a66b3; }
#welcome ul li.shopping { background:url(../images/shopping.gif) left center no-repeat; padding-left:20px; }
#welcome ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#welcome ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#mainNav #logo { float:left; width:160px; text-align:center; }
#mainNav .large { float:left; width:450px; }
#mainNav .large .organge { color:#ff6600; }
#mainNav .large ul li { float:left; margin:0 2px; line-height:30px; font-size:14px; text-align:center; font-weight:bold; }
#mainNav .large ul li a { display:block; background:url(../images/nav_bg.gif); width:77px; text-decoration:none; color:#333; }
#mainNav .large ul li.home a { background:url(../images/nav_home.gif); width:59px; color:#fff; }
#mainNav .side { float:right; margin-top:30px; }
#mainNav .side ul li { float:left; font-weight:bold; }
#mainNav .side ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#mainNav .side ul li a { margin:0 5px; color:#333; text-decoration:none; }
#mainNav .side ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#navbar { clear:both; background:#fc883b; height:30px; }
#navbar ul li { float:left; line-height:30px; }
#navbar ul li a { color:#fff; text-decoration:none; padding:0 9px; }
#navbar ul li em { display:block; float:left; border-left:#dc6b04; border-right:1px solid #fba455; height:5px; margin:12px 0; overflow:hidden; }
</head>
<body>
<div id="welcome" class="wrap">
<ul>
<li class="login">欢迎光临当当网,请<a href="#">登录</a><a href="#">免费注册</a></li>
<li class="shopping"><a href="#">购物车</a></li>
<li><em></em><a href="#">我的订单</a></li>
<li><em></em><a class="arrow" href="#">我的当当</a></li>
<li><em></em><a class="arrow" href="#">礼品卡</a></li>
<li><em></em><a href="#">帮助</a></li>
</ul>
</div>
<div id="mainNav" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="large">
<div class="organge">网上购物享当当</div>
<ul>
<li class="home"><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="side">
<ul>
<li><a href="#">商家</a></li>
<li><em></em><a href="#">当当榜</a></li>
<li><em></em><a class="arrow" href="#">礼物</a></li>
<li><em></em><a href="#">在线读书</a></li>
<li><em></em><a class="arrow" href="#">更多服务</a></li>
</ul>
</div>
</div>
<div id="navbar">
<ul class="wrap">
<li><a href="#">音乐</a></li>
<li><em></em><a href="#">影视</a></li>
<li><em></em><a href="#">少儿</a></li>
<li><em></em><a href="#">教辅</a></li>
<li><em></em><a href="#">小说</a></li>
<li><em></em><a href="#">外语</a></li>
<li><em></em><a href="#">数码相机</a></li>
<li><em></em><a href="#">笔记本</a></li>
<li><em></em><a href="#">连衣裙</a></li>
<li><em></em><a href="#">高跟鞋</a></li>
<li><em></em><a href="#">运动鞋</a></li>
<li><em></em><a href="#">美容护肤</a></li>
<li><em></em><a href="#">厨卫用品</a></li>
<li><em></em><a href="#">婴幼奶粉</a></li>
<li><em></em><a href="#">玩具</a></li>
<li><em></em><a href="#">没事保健</a></li>
<li><em></em><a href="#">饰品</a></li>
</ul>
</div>
</body>
@charset "utf-8";
/* CSS Document */
body { padding:0; margin:0; font-size:12px; line-height:22px; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
.wrap { width:960px; margin:0 auto; }
#welcome ul { margin-left:450px; }
#welcome ul li { float:left; }
#welcome ul li a { color:#000000; text-decoration:none; margin:0 5px; }
#welcome ul li.login a { color:#1a66b3; }
#welcome ul li.shopping { background:url(../images/shopping.gif) left center no-repeat; padding-left:20px; }
#welcome ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#welcome ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#mainNav #logo { float:left; width:160px; text-align:center; }
#mainNav .large { float:left; width:450px; }
#mainNav .large .organge { color:#ff6600; }
#mainNav .large ul li { float:left; margin:0 2px; line-height:30px; font-size:14px; text-align:center; font-weight:bold; }
#mainNav .large ul li a { display:block; background:url(../images/nav_bg.gif); width:77px; text-decoration:none; color:#333; }
#mainNav .large ul li.home a { background:url(../images/nav_home.gif); width:59px; color:#fff; }
#mainNav .side { float:right; margin-top:30px; }
#mainNav .side ul li { float:left; font-weight:bold; }
#mainNav .side ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#mainNav .side ul li a { margin:0 5px; color:#333; text-decoration:none; }
#mainNav .side ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#navbar { clear:both; background:#fc883b; height:30px; }
#navbar ul li { float:left; line-height:30px; }
#navbar ul li a { color:#fff; text-decoration:none; padding:0 9px; }
#navbar ul li em { display:block; float:left; border-left:#dc6b04; border-right:1px solid #fba455; height:5px; margin:12px 0; overflow:hidden; }
相关文章推荐
- jQuery实现仿美橙互联两级导航菜单效果完整实例
- 实例:用UL制作横向CSS导航菜单
- Bootstrap学习--导航菜单
- Js实例:实现导航菜单的高亮显示
- bootstrap历练实例: 垂直胶囊式的导航菜单
- dedecms首页导航菜单二级栏目调用标签实例
- jQuery仿Flash上下翻动的中英文导航菜单实例
- JavaScript实现简单的二级导航菜单实例
- jQuery实现的动态伸缩导航菜单实例
- jQuery渐变发光导航菜单的实例代码
- js二级导航菜单代码实例
- 折叠树形导航菜单实例
- bootstrap菜单、按钮及导航学习笔记5-18导航(基础样式)
- 一个js控制的导航菜单实例代码
- 仿XP菜单,仿XP导航,JS特效免费供学习
- bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
- [Android实例] Android 实现导航菜单左右滑动效果
- DIV CSS 布局定位 实例 菜单导航 详解
- jQuery实现的动态伸缩导航菜单实例
- 官方NotePad实例学习--标准菜单onCreateOptionsMenu的使用