常見的幾種頁面內容佈局方式
在前端開發中頁面佈局總是最開始的工作,就像蓋樓時,先搭框架,然後再填磚,前端也是一樣的,先做好頁面的佈局工作。
通過瀏覽不同的網站發現,頁面的佈局都是大同小異,總結下來大概就幾種:
第一種:
單列布局,這是最簡潔的一種。整個頁面感覺很乾淨。目前主流的電商網站基本上都是使用這種佈局。
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面佈局</title>
<style >
.box{
width:800px;
height: 600px;
text-align: center;
line-height: 60px;
}
.container{
width: 805px;
margin:0 auto;
}
.header{
width :100%;
height:60px;
background: orange;
}
.content{
position: relative;
width:700px;
margin:0 auto;
}
.content_body{
position: relative;
width:100%;
height :480px;
background: olive;
}
.content_footer{
position: relative;
height:60px;
background: orangered;
width:100%
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="header">header</div>
<div class="content">
<div class="content_body">body</div>
<div class="content_footer">footer</div>
</div>
</div>
</div>
</body>
</html>
第二種:
兩列布局:
這中佈局在一般的技術分享站點比較常見
,
上面是csdn部落格的首頁,佈局就是兩列布局,只是有一點變化而已,但是萬變不離其中,都是從兩列布局演變而來的。
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面佈局</title>
<style>
.box{
width:800px;
height: 600px;
text-align: center;
line-height: 60px;
}
.container{
width: 805px;
margin:0 auto;
}
.header{
width:100%;
height:60px;
background: orange;
}
.content{
position: relative;
width:700px;
margin:0 auto;
}
.content_body{
position: relative;
width:100%;
height:480px;
background: olive;
}
.content_footer{
position: relative;
height:60px;
background: orangered;
width:100%
}
.left{
height:100%;
width:100px;
float: left;
background: orchid;
}
.right{
height:100%;
width:100px;
float: right;
background:yellowgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="header">header</div>
<div class="content">
<div class="content_body">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="content_footer">footer</div>
</div>
</div>
</div>
</body>
</html>
第三種:
有兩列布局就有三列布局:
單列,兩列,三列都有,那有沒有四列…,我們說這只是常見的佈局,並不是所有的佈局,如果你需要,可以有無數列,只是這些佈局是小眾而已。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面佈局</title>
<style>
.box{
width:800px;
height: 600px;
text-align: center;
line-height: 60px;
}
.container{
width: 805px;
margin:0 auto;
}
.header{
width:100%;
height:60px;
background: orange;
}
.content{
position: relative;
width:700px;
margin:0 auto;
}
.content_body{
position: relative;
width:100%;
height:480px;
background: olive;
}
.content_footer{
position: relative;
height:60px;
background: orangered;
width:100%
}
.left{
height:100%;
width:100px;
float: left;
background: orchid;
}
.center{
float: left;
width: 500px;
height: 100%;
background: blanchedalmond;
}
.right{
height:100%;
width:100px;
float: right;
background:yellowgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="header">header</div>
<div class="content">
<div class="content_body">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="content_footer">footer</div>
</div>
</div>
</div>
</body>
</html>
上面的中三種常見的佈局都是內容居中的列式佈局。這種方式一般內容區的大小是固定的,所以當瀏覽器視窗大小改變的時候,頁面的佈局不會改變,只是距離兩邊的距離會改變。這也是這種佈局比較受歡迎的原因之一。
但是我們在一些管理類網站的時候,他也是列式佈局,但是內容不是居中的,而是鋪滿螢幕:
,
這種佈局內容區的寬度是不定的,這個時候就需要做自適應了。一般這種佈局左邊的選單列寬度是固定的,但是右邊的內容區域的寬度是不固定的。
實現方式一:
.left{
float:left;
}
.right{
width:100%;
}
這種方式比較簡單,但是是有缺陷的,這種佈局右邊其實是填充滿整個一行的,left只是浮動在他上面,造成了左右佈局的現象,我們還需要給右邊加上左邊距,如果左邊的選單欄收縮時,還要動態的去改變右側內容的左邊距。這樣是比較麻煩的。
實現方式二:
採用flex:
.content{
display:flex;
}
.left:{
width:100px;
}
.right:{
flex:1
}
這種方式最簡單,完全符合我們的需求,但是他用的是彈性佈局,相容性你懂得。
實現方式三
css樣式計算calc();
.left:{
float:left;
width:100px;
}
.right:{
float:right;
width:100%-100px;
}
calc這個屬性也是css3提供的。所以相容性…….
實現方式四:
寬度採用百分比的方式:
.left{
width:10%
}
.right{
height:85%;
}
這種方式的優勢是相容性好,但是,當頁面寬度變化時,頁面內容會被壓縮變形。
實現方式五:
就是通過計算,瀏覽器寬度減去左邊選單寬度,當瀏覽器寬度改變的時候,再計算,這種方式比較耗瀏覽器效能,如果一定要相容到低版本IE,一般不考慮這種方式。
如果有更好的佈局方式,歡迎大家來交流交流