京东---- 

首页：

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东</title>
    <style>
       #d1{
           width:990px;
           height:40px;
           background-color: #e64346;
            margin:0 auto;
       }
        #d2{
            width:210px;
            height:40px;
            background-color:#cd2a2c;
            float:left;
        }
         #d2 a{
             text-decoration:none;
             color:#fff;
             font-size:14px;
             padding-left:15px;
             line-height:40px;
             color:#e64346;
             float:left;
         }
        #d2 b{
            float:right;
            width:20px;
            height:20px;
            background:url("iconlist_2.png") no-repeat -65px 0px;
            margin:10px;
                 }
          #d1>ul{
              float:left;
              list-style:none;
              margin:0;
              padding:0;
          }
        #d1>ul li{
            float:left;
            width:100px;
               }
        #d1>ul li a{
            text-decoration:none;
            color:#fff;
            float:left;
            width:100px;
            height:40px;
            line-height:40px;
            text-align:center;
            font-size:14px;
            font-weight:bold;
            }
        #d1>ul li a:hover{
            background-color:#BD2A2C;
        }
           #ul{
               width:206px;
               height:400px;
               border:2px solid #CD2A2C;
               border-top:0;
               list-style:none;
               margin:0px;
               background-color:#b3d4fc;
               padding: 0px;
               padding-top:3px;
               position:relative;
           }
        #ul li a{
            padding:5px 0px 5px 10px;
            width:186px;
            border-bottom:1px solid #ffffff;
            border-top:1px solid transparent;
            color: #333333;
            text-decoration:none;
            font-size:14px;
            display:block;
            position:relative;
         }
         #ul div.kuang{
             width:800px;
             height:400px;
             border:1px solid #ddd;
             background-color: #ffffff;
             position: absolute;
             top:3px;
             height:195px;
             display: none;
             z-index: 8;
         }
       #u1>li:hover div.kuang {
           display:block;
       }
       #u1 li a:hover{
           z-index:88;
           position:relative;
           border-top:1px solid #ddd;
           border-bottom:1px solid #ddd;
           background-color:#fff;
       }
      #ul li.kuang div{
          width:400px;
          height:400px;
          border:1px solid #ffffff;
          margin:2px;
      }
    </style>
</head>
<body>
   <nav id="d1">
       <div id="d2">
           <a href="#">全部商品分类</a>
           <b></b>
       </div>
       <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">服装城</a></li>
           <li><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>
   </nav>
<div id="d3">
    <ul id="ul">
        <li><a href="#">图书音像数字产品</a></li>
        <li>
            <a href="#" class="xiang">家用电器</a>
            <div>
                <div class="kuang"></div>
            </div>
        </li>
        <li><a href="#">吃</a></li>
        <li><a href="#">玩</a></li>
        <li><a href="#">买买买</a></li>
    </ul>
     </div>
  </body>
</html>

posted on 2017-03-24 01:36  zhangailing  阅读(97)  评论(0)  编辑  收藏  举报

导航