前端思考聖盃佈局思考
阿新 • • 發佈:2020-12-20
最近從新鞏固了一遍前端的HTML+CSS學習,發現好多知識點記憶是沒有問題的,但是在頁面佈局的時候,還是有瑕疵,所以在這裡總結一下前端常用的佈局思路,我本人基礎最早的是聖盃佈局,所以先在這裡介紹一下:
結構
聖盃佈局是我接觸到網站佈局之後的第一個完整頁面佈局的思路,大概如圖:
這種佈局主要顯示內容的部分在頂部和中間部分,強調的點是中間部分優先載入,左右後載入的問題,並且從結構上要求:左右部分固定寬度,中間部分100%。
所以分為下面的三個步驟進行思考:
基礎結構
寫出結構,並且,給他們分別加上顏色和文字:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0 } a{ text-decoration: none; } li{ list-style: none; } .top{ color:white; background-color: black; text-align: center; } .bottom { color:white; background-color: black; text-align: center; } .center{ color:white; background-color: red; text-align: center; } .left{ color: white; background-color: green; text-align: center; } .right{ color: white; background-color: blue; text-align: center; } </style> </head> <body> <div class="top"> 頂部 </div> <div class="center">中間部分</div> <!-- 注意,要先載入中間部分,所以需要先把中間部分的div放到這裡--> <div class="left">左邊部分</div> <div class="right">右邊部分</div> <div class="bottom"> 底部 </div> </body> </html>
注意,這裡為了優先載入,中間三聯部分,第一個是center部分,效果如下:
初次佈局
現在已經把需要的結構塊兒搭建了上來,下面開始編寫基本的佈局
1、頂部和底部寬度100%,高度50px固定
.top{ color:white; background-color: black; text-align: center; width: 100%; height: 50px; } .bottom { color:white; background-color: black; text-align: center; width: 100%; height: 50px; }
2、中間的三個都浮動起來,高度設定一個值580px;左邊寬度200px,右邊寬度150px,中間自適應100%
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0 } a{ text-decoration: none; } li{ list-style: none; } .top{ color:white; background-color: black; text-align: center; width: 100%; height: 50px; } .bottom { color:white; background-color: black; text-align: center; width: 100%; height: 50px; } .m-item{ height: 580px; float: left; } .center{ color:white; background-color: red; text-align: center; width: 100%; } .left{ color: white; background-color: green; text-align: center; width: 200px; } .right{ color: white; background-color: blue; text-align: center; width: 150px; } </style> </head> <body> <div class="top"> 頂部 </div> <div class="center m-item">中間部分</div> <!-- 注意,要先載入中間部分,所以需要先把中間部分的div放到這裡--> <div class="left m-item">左邊部分</div> <div class="right m-item">右邊部分</div> <div class="bottom"> 底部 </div> </body> </html>
3、不要讓底部和中間部分粘到一起
.bottom {
color:white;
background-color: black;
text-align: center;
width: 100%;
height: 50px;
clear: both;
}
佈局調整
現在亂的夠嗆,我們來調整一下結構吧。
1、設定一個外邊框,佔滿中間,然後設定內邊距,這個邊距的目的是將中間部分擠到中間
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
....
.m-item{
height: 580px;
float: left;
}
.content{
padding-left: 200px;
padding-right: 150px;
}
......
</style>
</head>
<body>
<div class="top">
頂部
</div>
<div class="content"> <!-- 這裡的div是為了約束中間部分使用的-->
<div class="center m-item">中間部分</div> <!-- 注意,要先載入中間部分,所以需要先把中間部分的div放到這裡-->
<div class="left m-item">左邊部分</div>
<div class="right m-item">右邊部分</div>
</div>
<div class="bottom">
底部
</div>
</body>
</html>
2、安頓左邊的div
兩邊的div佈局需要用到一個知識點,負數外邊距。我們用一下:
.left{
color: white;
background-color: green;
text-align: center;
width: 200px;
margin-left: -100%;
}
這裡浮動上去了,但是覆蓋了中間部分的200px,不合適,我們採用相對定位方式:
.left{
color: white;
background-color: green;
text-align: center;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
3、 然後安頓(嘿嘿嘿)右邊的div
.right{
color: white;
background-color: blue;
text-align: center;
width: 150px;
margin-right: -150px;
}
提供一下完整的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.top{
color:white;
background-color: black;
text-align: center;
width: 100%;
height: 50px;
}
.bottom {
color:white;
background-color: black;
text-align: center;
width: 100%;
height: 50px;
clear: both;
}
.m-item{
height: 580px;
float: left;
}
.content{
padding-left: 200px;
padding-right: 150px;
}
.center{
color:white;
background-color: red;
text-align: center;
width: 100%;
}
.left{
color: white;
background-color: green;
text-align: center;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
color: white;
background-color: blue;
text-align: center;
width: 150px;
margin-right: -150px;
}
</style>
</head>
<body>
<div class="top">
頂部
</div>
<div class="content"> <!-- 這裡的div是為了約束中間部分使用的-->
<div class="center m-item">中間部分</div> <!-- 注意,要先載入中間部分,所以需要先把中間部分的div放到這裡-->
<div class="left m-item">左邊部分</div>
<div class="right m-item">右邊部分</div>
</div>
<div class="bottom">
底部
</div>
</body>
</html>
到此完成了基本的聖盃樣式,匆忙寫的,有漏洞希望大家多多幫忙提點啊。