前言：
原本是個java後端的，在學校裏學過一點css和js，但是連佈局都學不好，js出錯還不報錯，果斷放棄前端。但是公司嚴重缺前端，硬把我分到前端組。爲了飯碗，只能開始重新學習前端。現在從最基本的佈局開始學起，每日練習寫成博文，以做自勉。
上面的是設計圖，我在學習了浮動佈局後，花了一天半的時間，加上請教別人，終於寫出來了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>浮動佈局</title>
<style type="text/css">
.container{
width: 970px;
margin: 0 auto;
}
.head, .foot{
clear: both;
margin: 10px auto;
}
.middle{
clear: both;
margin: 10px auto;
}
.item-1{
background-color: red;
width: 277px;
height: 103px;
float: left;
}
.item-2{
background-color:chartreuse;
width: 137px;
height: 49px;
float: right;
}
.item-3{
background-color:chartreuse;
width: 679px;
height: 46px;
float: right;
margin-top: 8px;
}
.item-4{
background-color:gold;
width: 310px;
height: 435px;
float: left;
margin-right: 10px;
}
.item-5{
background-color:lightblue;
width: 450px;
height: 240px;
float: right;
margin-right: 10px;
}
.item-6{
background-color: lightblue;
width: 450px;
height: 110px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.item-7{
background-color: lightblue;
width: 450px;
height: 30px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.item-8{
background-color: purple;
width: 190px;
height: 400px;
float: right;
}
.item-9{
background-color: green;
width: 650px;
height: 25px;
float: right;
margin-top: 10px;
}
.item-10{
background-color: blue;
width: 970px;
height: 35px;
}
/* 清除浮動 */
.clearfix:after{
content:"";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{zoom:1;}
</style>
</head>
<body>
<div class="container">
<div class="head clearfix">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<div class="middle clearfix">
<div class="item-4"></div>
<div class="item-8"></div>
<div class="item-5"></div>
<div class="item-6"></div>
<div class="item-7"></div>
<div class="item-9"></div>
</div>
<div class="foot">
<div class="item-10"></div>
</div>
</div>
</body>
</html>
下面的是flex佈局的寫法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>flex佈局</title>
<style type="text/css">
.container{
width: 970px;
height: 593px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.head{
width: 970px;
height: 103px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item-1{
background-color: red;
width: 277px;
height: 103px;
}
.box_23{
width: 679px;
justify-content: flex-end;
}
.item-2{
background-color:chartreuse;
width: 137px;
height: 49px;
float: right;
}
.item-3{
background-color:chartreuse;
width: 679px;
height: 46px;
margin-top: 8px;
float: right;
}
.middle{
width: 970px;
height: 435px;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item-4{
background-color:gold;
width: 310px;
height: 435px;
margin-right: 10px;
}
.middle_56789{
width: 650px;
}
.box_567{
width: 450px;
height: 400px;
}
.box_567_8{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item-5{
background-color:lightblue;
width: 450px;
height: 240px;
}
.item-6{
background-color: lightblue;
width: 450px;
height: 110px;
margin-top: 10px;
}
.item-7{
background-color: lightblue;
width: 450px;
height: 30px;
margin-top: 10px;
}
.item-8{
background-color: purple;
width: 190px;
height: 400px;
}
.item-9{
background-color: green;
width: 650px;
height: 25px;
margin-top: 10px;
}
.foot{
width: 970px;
height: 35px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<div class="item-1"></div>
<div class="box_23">
<div class="item-2"></div>
<div class="item-3"></div>
</div>
</div>
<div class="middle">
<div class="item-4"></div>
<div class="box_56789">
<div class="box_567_8">
<div class="box_567">
<div class="item-5"></div>
<div class="item-6"></div>
<div class="item-7"></div>
</div>
<div class="item-8"></div>
</div>
<div class="item-9"></div>
</div>
</div>
<div class="foot"></div>
</div>
</body>
</html>