常見 css 佈局整理

注意： 代碼裏面都有比較詳細的註釋
項目代碼全部已經上傳至 碼雲 和 Github，兩個倉庫我會同步更新

碼雲 git 下載地址：[email protected]:gorit/Coding-with-Front-end.git
Github git 下載地址：[email protected]:CodingGorit/Coding-with-Front-end.git

一、垂直居中

有父容器和子容器，實現子容器在父容器中的居中效果

佈局效果：

二、等分佈局

實現一行元素，在等高，等寬的情況下，在遊覽器彙總均勻排布

佈局效果

三、等高佈局

兩列在同一級的 div 元素，實現等高等寬效果

佈局效果

四、多列布局

多列布局實現 （等寬，非等寬，有間隙）

佈局效果

自適應的效果不方便展示，可以在代碼中查看

五、局中佈局（垂直居中）

兩個 div 元素，小盒子在 大盒子上下，左右都在中間

六、全屏佈局

常見的 header，body， foot 的主流界面佈局效果

七、三列布局

三列元素分攤 width

八、聖盃佈局

頭 + 尾佈局

佈局效果

九、雙飛翼佈局

left + item + right （left = right）

佈局效果

十、水平居中

元素在水平內部居中效果實現

佈局效果

十一、css 佈局特別整理

11.1 快速製作一行底部導航欄

html

<div class="page"><!-- 頁碼的製作 -->
	<a href="#">首頁</a><a href="#">&lt;</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">&gt;</a><a href="#">末頁</a>
</div>

css

.page {
	height: 40px;
	margin-top: 10px;
	text-align: center;
}

.page a {
	/* 內聯元素 和 塊級元素的特性都有 */
	display: inline-block;
	border: 1px solid #E8E8E8;
	text-decoration: none;
	margin: 5px;
	padding: 5px 10px;
}

.page a:link, .page a:visited {
	color: #000;
}

.page a:hover,.page a:active {
	color: #FFF;
	background-color: #cc1b1b;
}

實現效果：