weipinhui.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>唯品会</title>
<link href="css/weipinhui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="right">
<div id="right1">账号</div>
<div id="right2">购物袋</div>
</div>
<div id="div1">
<div id="div1_content">
<div>
<a href="">我的订单</a> /
</div>
<div>
<a href="">我的特卖</a> /
</div>
<div>
<a href="">会员俱乐部</a> /
</div>
<div>
<a href="">客户服务</a> /
</div>
<div>
<img src="img/smartphonepng.png"/ id="img1"><a href="">手机版</a> /
</div>
<div>
<a href="">更多</a> /
</div>
</div>
</div>
<div id="div2">
<div id="div21">
<img src="img/21.png"/>
</div>
<div id="div22">
<div>100%正品</div>
<div>88元包邮</div>
<div>退换无忧</div>
</div>
<div id="div23">
<div id="div231">
<input type="text" />
</div>
<div id="div232">
<img src="img/search.png" />
</div>
</div>
<div id="div24">
购物袋
<div id="div241">
<div id="div2411"></div>
</div>
</div>
</div>
<div>
<img src="img/01.jpg" />
</div>
<div>
<img src="img/01.jpg" />
</div>
<div>
<img src="img/01.jpg" />
</div>
<div>
<img src="img/01.jpg" />
</div>
<div>
<img src="img/01.jpg" />
</div>
<div>
<img src="img/01.jpg" />
</div>
</body>
</html>
weipinhui.css
*{
margin: 0px;
padding: 0px;
}
body{
min-width: 1200px;/*缩小窗口,出滚动条,内容不串行*/
}
#div1{
width: 100%;
height: 30px;
background-color: #F5F5F5;
/*padding-left: 580px;*//*推到右侧*/
position: relative;
}
#div1_content{
width: 530px;
height: 30px;
line-height: 30px;/*将字体往下移动*/
display: flex; /*弹性盒子*/
color: gray;
position: absolute;
left: 580px;
}
#div1_content div{
flex: 1;/*每个占1份*/
font-size: 13px;
}
#div1_content div a{
text-decoration: none;/*去掉下划线*/
color: gray;
}
#img1{
vertical-align: middle;/*将手机图标移到中间*/
}
#div1_content div a:hover{
color: #FA2A83;
}
#div2{
width: 100%;
height: 100px;
position: relative;
}
#div21{
position: absolute;
left: 120px;
}
#div21 img{
width: 160px;
height: 100px;
}
#div22{
position: absolute;
left: 300px;
display: flex;
width: 300px;
height: 100px;
line-height: 100px;
}
#div22 div{
flex: 1;
}
#div23{
width: 420px;
position: absolute;
left: 660px;
height: 100px;
line-height: 100px;
}
#div231{
position: absolute;
left: 0px;
top: 0px;
}
#div231 input{
border: 2px solid #FA2A83;
width: 340px;
height: 34px;
outline: none;
}
#div232{
position: absolute;
left: 340px;
top: 32px;
width: 50px;
height: 38px;
background-color: #FA2A83;
}
#div232 img{
position: absolute;
top: 5px;
left: 10px;
}
#div24{
border: 1px solid darkgray;
background-color: #F6F7F9;
height: 35px;
line-height: 35px;
width: 100px;
position: absolute;
left: 1100px;
top: 32px;
font-size: 13px;
text-align: center;
}
#div241{
position: absolute;
left: 75px;
top: 10px;
width: 20px;
height: 15px;
background-color: #FA2A83;
border-radius: 8px;/*加圆角*/
}
#div2411{
position: absolute;
left: 5px;
top: 6px;
width: 10px;
height: 2px;
background-color: white;
}
#right{
width: 30px;
height: 800px;
background-color: black;
position: fixed;
right: 0px;
top: 0px;
z-index: 10;
}
#right1{
width: 30px;
height: 50px;
color: white;
position: relative;
top: 200px;
}
