1列式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1列式佈局</title>
<style type="text/css">
body{
/*讓整個body中的文字居中*/
text-align: center;
}
.div1{
border: 1px solid red;
/* 高度不是必須的可以根據內容多少而自動適應
如果寬度不設置將自動佔滿整個屏幕*/
height: 586px;
width: 586px;
/* 給四個值分別是上右下左外邊距,給兩個值是,第一值上或低,第二值是,左右的外邊距.給aotu則表示
自動計算出左右兩邊相等的距離,這個設置能讓div居中*/
margin: 0px auto;
}
</style>
</head>
<body>
<div class="div1">
我是一列式佈局
</div>
</body>
</html>
二列式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2列式佈局</title>
<style type="text/css">
.divOut{
border: 1px solid green;
width: 95%;
/*讓該元素居中顯示*/
margin: 0px auto;
}
.div1{
border: 1px solid red;
width: 168px;
height: 620px;
float: left;
}
.div2{
border: 1px solid green;
height: 620px;
/*讓其自動適應該顯示多寬,此處不要浮動了*/
}
</style>
</head>
<body>
<div class="divOut">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>
3列式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3列式佈局</title>
<style type="text/css">
.divOut{
position: absolute;
border: 1px solid green;
width: 95%;
/*讓該元素居中顯示*/
margin: 0px auto;
}
.div1,.div2,.div3{
border: 1px solid red;
height: 680px;
}
.div1{
width: 182px;
position: absolute;
left: 10px;
top: 0px;
}
.div2{
margin-left: 186px;
margin-right:184px ;
}
.div3{
width: 180px;
position: absolute;
right: 10px;
top: 0px;
}
</style>
</head>
<body>
<div class="divOut">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</body>
</html>
3行3列式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3列3行式佈局</title>
<style type="text/css">
*{
/*爲了解決因爲瀏覽器不同他們的默認值不同所以這裏設置一下*/
margin: 0px;
padding: 0px;
font-size: 1em;
}
.divOut{
border: 1px solid green;
width: 960px;
margin: 0px auto;
}
.divTop{
border: 1px solid blue;
width: 100%;
height: 68px;
}
.divMain{
border: 1px solid red;
height: 450px;
}
.div1{
width: 200px;
border: 1px solid red;
float: left;
height: 100%;
}
.div2{
border: 1px solid blueviolet;
width: 520px;
float: left;
margin: 0px 10px;
height: 100%;
}
.div3{
width: 200px;
border: 1px solid yellow;
float: left;
height: 100%;
}
.divBott{
width: 100%;
height: 120px;
border: 1px solid cyan;
}
</style>
</head>
<body>
<div class="divOut">
<div class="divTop">
我是標題
</div>
<div class="divMain">
<div class="div1">
我是左欄
</div>
<div class="div2">
我是中間
</div>
<div class="div3">
我是右欄
</div>
</div>
<div class="divBott">
我底標
</div>
</div>
</body>
</html>
講無可講自己理解