该案例是主要练习div盒子的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Redmi</title>
<style>
*{
margin: 0px auto;
padding: 0px ;
}
.div1{
width: 100%;
height: 70px;
background-color: slategray;
}
.top ul li{
display: inline;
padding: 5px;
color: white;
font-size: 180%;
}
.top{
width: 80%;
height: 70px;
padding-top: 10px;
margin-left: 5px;
}
.from1{
position: absolute;
left: 75%;
width: 20%;
top: 20px;
}
.div2{
width: 100%;
height: 100px;
background-color: white;
padding-left: 20%;
padding-top: 2%;
}
.div3{
background-image: url(imgs/xiaomi.jpg);
width: 100%;
height: 900px;
background-repeat: no-repeat;
}
.div4{
width: 20%;
height: 0px;
margin-left: 0;
padding-left: 5px;
background: rgba(0, 0, 0,40%);
}
.ul2{
color: white;
font-size: 20px;
line-height:75px;
list-style: none;
/* opacity: 1; */
}
span{
margin-right: 40px;
font-size: 40px;
}
</style>
</head>
<body>
<!-- <header> -->
<div class="div1">
<div class="top">
<ul>
<li>小米官网</li>
<li>小米商城</li>
<li>小米有品</li>
<li>小爱开放平台</li>
<li>云服务</li>
<li>企业团购</li>
<li>资质证照</li>
<li>资协议规则</li>
<li>天星教科</li>
</ul>
</div>
<div class="from1">
<form action="" >
<input type="text" placeholder="请输入关键字"/>
<input type="button" value="搜索"/>
</form>
</div>
</div>
<div class="div2">
<span>Xiaomi手机</span>
<span>平板</span>
<span>笔记本</span>
<span>家电</span>
<span>服务中心</span>
<span>NIUI</span>
<span>关于我们</span>
</div>
<div class="div3" >
<div class="div4">
<ul class="ul2" >
<li>手机 ></li>
<li>电视 ></li>
<li>家电 ></li>
<li>平板 ></li>
<li>音响 ></li>
<li>健康 ></li>
<li>儿童 ><li>
<li>配件 ></li>
<li>电源 ></li>
</ul>
</div>
</div>
<!-- </header> -->
</body>
</html>