zoukankan      html  css  js  c++  java
  • 当当网导航菜单实例仅供学习

    <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 { 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; 160px; text-align:center; }
    #mainNav .large { float:left; 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); 77px; text-decoration:none; color:#333; }
    #mainNav .large ul li.home a { background:url(../images/nav_home.gif); 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; }

  • 相关阅读:
    oracle之sqlplus讲解
    oracle数据库--启动和关闭
    linux下使用SSL代理(SSLedge)
    Titanium系列--利用js动态获取当前时间
    Titanium系列--利用Titanium开发android App实战总结
    Titanium系列--我常用的Titanium的快捷键(持续更新中。。)
    Titanium系列--安装Titanium Studio 中的Android SDK,JDK以及环境变量的配置(二)
    Titanium系列--Titanium的简介、Titanium Studio安装和配置(一)
    Happymenu新的开始
    对IEnumerable<T>和IQueryable<T>的一点见解
  • 原文地址:https://www.cnblogs.com/914556495wxkj/p/3410463.html
Copyright © 2011-2022 走看看