当前位置：首页>C++>正文

前端學習之版心和布局流程

C++12-25

前端學習之版心和布局流程

什么是版心？

“版心”（可視區）是指網頁中主體內容所在的區域。一般在瀏覽器窗口水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

布局流程

為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程。具體如下：

確定頁面的版心（可視區）
分析頁面的行模塊，以及每個行模塊中的列模塊。
制作html結構
css初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

常用布局

一列固定寬度且居中（最普通、最為常用的結構）

一列固定寬度且居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.header,.banner,.main,.footer{width: 960px;/*版心*/background-color: #676767;border:1px dashed #c1c1c1;margin:0 auto; /*塊級元素水平居中*/text-align: center;}.header{height: 90px;}.banner{	height: 200px;margin:5px auto;}.main{height: 500px;}.footer{height: 90px;margin:5px auto 0;}</style>
</head>
<body><div class="header">header</div><div class="banner">banner</div><div class="main">main</div><div class="footer">footer</div>
</body>
</html>

效果圖
一列固定寬度且居中

能共用的盡量共用，使代碼看起來精簡一些。
行間距使用margin-top或者margin-bottom時，考慮已有的margin:0 auto,避免沖突，盡量寫進一個margin屬性里。

兩列左窄右寬型結構（比如小米官網）

兩列左窄又寬

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.top{width: 960px;/*版心*/height: 90px;background-color: #000;margin:0 auto;/*塊級元素水平居中*/text-align: center;/*文字水平居中*/color: #fff;}.banner{width: 960px;/*版心*/height: 200px;background-color: grey;margin:0 auto;/*塊級元素水平居中*/text-align: center;/*文字水平居中*/color: #fff;}.main{width: 960px;/*版心*/height: 500px;background-color: #fff;margin:0 auto;/*塊級元素水平居中*/text-align: center;/*文字水平居中*/color: #fff;}.left{width: 350px;height: 500px;/*子元素不繼承高度，所以要給個height值*/background-color: #c1c1c1;float: left;}.right{width: 600px;height: 500px;/*子元素不繼承高度，所以要給個height值*/background-color: #717171;float: right;}.footer{width: 960px;/*版心*/height: 90px;background-color: #000;margin:0 auto;/*塊級元素水平居中*/text-align: center;/*文字水平居中*/color: #fff;}</style>
</head>
<body><div class="top">TOP</div><div class="banner">BANNER</div><div class="main"><div class="left">LEFT</div><div class="right">RIGHT</div></div><div class="footer">FOOTER</div>
</body>
</html>

效果圖
兩列左窄右寬

左右設置寬度之后，在調整間距邊框等樣式時，需要考慮到margin、border、padding等導致的盒子寬度變大，一方被擠下去的情況。確保兩者之和在父元素的寬度范圍內。

通欄平均分布型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;}.top{/*width: 960px;*/height: 90px;background-color: #000;/*margin:0 auto;*/color: #fff}.inner{width: 960px;height: 90px;margin:0 auto;background-color: #1b1b1b;}.banner{width: 960px;height: 200px;background-color: grey;margin:0 auto;}.main{width: 960px;height: 500px;background-color: #fff;margin:0 auto;}.footer{/*width: 960px;*/height: 90px;background-color: #000;color: #fff;/*margin:0 auto;*/}.left{width: 200px;height: 500px;background-color: #c1c1c1;float: left;}.right{width: 700px;height: 500px;background-color: #717171;float: right;}.banner li{float: left;height: 200px;list-style: none;width:calc( (100% - 30px)/4);}.one{background-color: red;}.two{background-color: yellow;margin:0 10px;}.three{background-color: skyblue;margin-right: 10px;}.four{background-color: green;}</style>
</head>
<body><!-- 在左右分布型的基礎上可以改為通欄平均分布型 --><div class="top"><div class="inner">這是top</div></div><div class="banner"><ul><li class="one">one</li><li class="two">two</li><li class="three">three</li><li class="four">four</li></ul></div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer"><div class="inner">這是footer</div></div>
</body>
</html>