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

index.html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购
    物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个
    护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <link rel="Shortcut icon" href="./images/favicon.ico">
    <link rel="stylesheet" href="./css/base.css" type="text/css">
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <script type="text/javascript" src="./js/style.js"></script>
</head>
<body>
    <!-- 顶部图片 -->
    <div id="header">
        <div class="top-center">
            <!-- 顶部图片 -->
            <a href="" id="t-c-z"></a>
            <!-- 关闭按钮 -->
            <img src="./image/qwe.png" id="close">
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="top">
        <div id="top_main">
            <!-- 导航栏左边区域 -->
            <ul class="topu">
                <li>
                    <div class="xing"></div>
                    <a href="">收藏京东</a>
                </li>
                <li>
                    <div class="erwei"></div>
                    <a href="" class="aa">关注京东
                        <div class="erweitu">

                        </div>
                    </a>
                </li>
                <li>
                    <div class="didian"></div>
                    <strong style="padding-left: 15px">北京</strong>
                    <a href="" style="padding-left:0px">[更换]</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</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;
}

悬浮出现二维码：

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

猜你喜欢