第四章 web前端开发工程师--JavaScript京东商城项目开发 4-2 京东商城导航栏

index.html;

    
    
    
    
    
    
    
    
    


    
    

        

            
            
            
            
        
    
    
    

        

            
            

                

                    

                    收藏京东
                
                

                    

                    关注京东
                        


                        
                    
                
                

                    

                    北京
                    [更换]
                
            
        
    

style.css

/* 顶部图片 */
#header{
    width: 100%;
    height: 80px;
    background:#FFBC01;
}
.top-center{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    background: blue;
    position: relative;
}
#t-c-z{
    width: 1190px;
    height: 80px;
    display: block;
    background: url(../image/5919208fN56f65f84.jpg);
}
#close{
    /* 若不设置父级元素的定位属性，只设置关闭按钮的，会随着窗口的放大而放大，缩小而缩小 */
   position: absolute;
   top: 5px;
   right: 5px;
   /* 指镇悬浮上去为手指型 */
   cursor: pointer;    
}
    /* 导航栏*/
#top{
    width: 100%;
    height: 30px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 100;
}
#top #top_main{
    width: 1210px;
    height: 30px;
    margin: 0 auto;
    border: 1px solid blue;
}
#top #top_main .topu{
    float: left;
    border: 1px solid red;
}
#top #top_main .topu li{
    width: 85px;
    height: 30px;
    display: block;
    float: left;
    line-height: 30px;
    font-size: 12px;
    color: #666666;
}
#top #top_main .topu li .xing{
    width: 13px;
    height: 13px;
    background: url(../images/xing.png) no-repeat;
    position: absolute;
    top:8px;
}
#top #top_main .topu li .erwei{
    width: 13px;
    height: 13px;
    background: url(../images/erwei.png) no-repeat;
    position: absolute;
    top:9px;
}
#top #top_main .topu li .didian{
    width: 13px;
    height: 13px;
    background: url(../images/didian.png) no-repeat;
    position: absolute;
    top:4px;
}
#top #top_main .topu li a{
    padding-left: 15px;
}
#top #top_main .topu .erweitu{
    width: 116px;
    height: 120px;
    background: url(../images/erwei.png) no-repeat 0px -40px;
    border: 1px sloid #ccc;
    position: absolute;
    z-index: 22;
    display: none;
}
#top #top_main .topu .aa:hover .erweitu{
    display: block;
}
#top #top_main .topu .aa{
    display: block;
}

 

悬浮出现二维码：