Day03-作业
2019-01-24 本文已影响0人
萌王史莱姆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.div1{
position: relative;
background-color: black;
height: 30px;
}
.div1_1{
position: absolute;
width: 50%;
left: 250px;
padding: 3px;
}
.div1_2{
position: absolute;
width: 10%;
right: 300px;
padding: 3px;
}
.div1_3{
position: absolute;
width: 5%;
right: 240px;
padding: 3px;
}
.div2{
position: relative;
height: 90px;
}
.div2_1{
position: absolute;
height: 100%;
left: 250px;
right: 250px;
}
.div2_1_1{
position: absolute;
top: 20px;
}
.div2_1_2{
position: absolute;
width: 50%;
left: 180px;
height: 100%;
padding: 35px;
}
.div2_1_3{
position: absolute;
height: 50%;
width: 20%;
top: 20px;
bottom: 20px;
right: 0px;
}
.div3{
position: relative;
height: 1000px;
}
.div3_1{
position: absolute;
height: 100%;
left: 250px;
right: 250px;
}
.div3_1_1{
position: absolute;
height: 550px;
width: 100%;
}
.div3_1_1_1{
position: absolute;
height: 400px;
width: 100%;
}
.div3_1_1_1_1{
position: absolute;
width: 20%;
height: 100%;
background-color: midnightblue;
}
.div3_1_1_1_2{
position: absolute;
width: 80%;
height: 100%;
right: 0px;
background-color: yellowgreen;
}
.div3_1_1_2{
position: absolute;
top: 400px;
width: 100%;
height: 150px;
margin-top: 15px;
}
.div3_1_1_1_2_1{
position: absolute;
width: 20%;
height: 100%;
background-color: black;
}
.div3_1_1_1_2_2{
position: absolute;
width: 25%;
height: 100%;
left: 20%;
background-color: grey;
margin-left: 17px;
}
.div3_1_1_1_2_3{
position: absolute;
width: 25%;
height: 100%;
left: 45%;
background-color: blue;
margin-left: 34px;
}
.div3_1_1_1_2_4{
position: absolute;
width: 25%;
height: 100%;
right: 0px;
background-color: pink;
}
.div3_1_2{
position: absolute;
top: 580px;
height: 420px;
width: 100%;
}
.div3_1_2_1{
position: absolute;
width: 100%;
height: 30px;
background-color: white;
}
.div3_1_2_2{
position: absolute;
width: 100%;
height: 60%;
top: 30px;
}
.div3_1_2_3{
position: absolute;
width: 100%;
height: 20%;
background-color: black;
bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
}
.div3_1_2_2_1{
position: absolute;
width: 20%;
height: 100%;
background-color: red;
}
.div3_1_2_2_2{
position: absolute;
width: 19%;
height: 100%;
background-color: red;
left: 21%;
}
.div3_1_2_2_3{
position: absolute;
width: 19%;
height: 100%;
background-color: red;
left: 41%;
}
.div3_1_2_2_4{
position: absolute;
width: 19%;
height: 100%;
background-color: red;
left: 61%;
}
.div3_1_2_2_5{
position: absolute;
width: 19%;
height: 100%;
background-color: red;
right: 0px;
}
.h2{
font-size: 20px;
text-align: left;
}
.span1{
color: white;
font-size: 10px;
padding-left: 2px;
}
.span2{
color: black;
font-size: 14px;
padding-left: 10px;
}
.form1{
position: absolute;
width: 100%;
height: 100%;
}
.input1{
position: absolute;
font-size: 12px;
width: 70%;
height: 92%;
padding-left: 5px;
}
.input2{
position: absolute;
width: 26%;
height: 100%;
right: 0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">
<span class="span1">小米商城</span>
<span class="span1">MIUI</span>
<span class="span1">loT</span>
<span class="span1">云服务</span>
<span class="span1">金融</span>
<span class="span1">有品</span>
<span class="span1">小爱开放平台</span>
<span class="span1">政企服务</span>
<span class="span1">资质证照</span>
<span class="span1">协议规则</span>
<span class="span1">下载app</span>
<span class="span1">Select Region</span>
</div>
<div class="div1_2">
<span class="span1">登录</span>
<span class="span1">注册</span>
<span class="span1">消息通知</span>
</div>
<div class="div1_3">
<span class="span1">购物车</span>
</div>
</div>
<div class="div2">
<div class="div2_1">
<div class="div2_1_1">
<img src="img/xiaomi.png"/>
</div>
<div class="div2_1_2">
<span class="span2">小米手机</span>
<span class="span2">红米</span>
<span class="span2">电视</span>
<span class="span2">笔记本</span>
<span class="span2">家电</span>
<span class="span2">新品</span>
<span class="span2">路由器</span>
<span class="span2">智能硬件</span>
<span class="span2">服务</span>
<span class="span2">社区</span>
</div>
<div class="div2_1_3">
<form class="form1" action="" method="get">
<input class="input1" type="text" id="search" value="" placeholder="小米8 小米MIX 2S" />
<input class="input2" type="submit" name="" id="" value="[搜索]" />
</form>
</div>
</div>
</div>
<div class="div3">
<div class="div3_1">
<div class="div3_1_1">
<div class="div3_1_1_1">
<div class="div3_1_1_1_1">
</div>
<div class="div3_1_1_1_2">
</div>
</div>
<div class="div3_1_1_2">
<div class="div3_1_1_1_2_1"></div>
<div class="div3_1_1_1_2_2"></div>
<div class="div3_1_1_1_2_3"></div>
<div class="div3_1_1_1_2_4"></div>
</div>
</div>
<div class="div3_1_2">
<div class="div3_1_2_1">
<h2 class="h2">小米闪购</h2>
</div>
<div class="div3_1_2_2">
<div class="div3_1_2_2_1"></div>
<div class="div3_1_2_2_2"></div>
<div class="div3_1_2_2_3"></div>
<div class="div3_1_2_2_4"></div>
<div class="div3_1_2_2_5"></div>
</div>
<div class="div3_1_2_3">
</div>
</div>
</div>
</div>
</body>
</html>
