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;
}
悬浮出现二维码: