css simple exercise 3
Requirements: The reference picture of Taobao homepage frame layout is as follows.
Complete with knowledge about div and floating
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0rem;
}
#box1 {
width: 1200px;
}
.box1_left,
.box1_center,
.box1_right {
float: left;
height: 800px;
}
.box1_left {
background-color: #00FFFF;
width: 300px;
}
.box1_center {
background-color:aliceblue;
width: 600px;
height: 800px;
}
.box1_right {
background-color: crimson;
width: 300px;
}
.c11 {
float: left;
background-color: green;
height: 360px;
width: 260px;
margin: 20px 20px;
}
.c12 {
float: left;
background-color: yellow;
height: 360px;
width: 260px;
margin: 20px 20px;
}
.c21 {
float: left;
background-color: red;
height: 360px;
width: 180px;
margin: 20px 10px;
}
.c22 {
float: left;
background-color: lawngreen;
height: 360px;
width: 180px;
margin: 20px 10px;
}
.c23 {
float: left;
background-color: salmon;
height:360px;
width: 180px;
margin: 20px 10px;
}
</style>
</head>
<body>
<div></div>
<div id="box1">
<div class="box1_left">
box1
</div>
<div class="box1_center">
<div>
<div class="c11">左</div>
<div class="c12">右</div>
<div style="clear: left;"></div>
</div>
<div>
<div class="c21">左</div>
<div class="c22">中</div>
<div class="c23">右</div>
<div style="clear: left;"></div>
</div>
</div>
<div class="box1_right">
box3
</div>
<div style="clear: left;"></div>
</div>
</body>
</html>
operation result:
