CSS 語法教學 – 4 欄式網頁版型 – 範例下載

使用 <div> 和 CSS 語法設計 4 欄式的網頁版型

4 欄式的網頁版型的確只要使用 float:left 就可以完成了~

中間的 4 個 <div> 在使用 float:left 的時候,就會依序的直接靠在前面一個 <div> 的旁邊~

就跟上課的時候教過的【範例 14_003】 float 浮動式排列的 BOX 的方法是一模一樣的~

一個接著一個的並排在一起,就會形成 4 欄式並排的網頁版型~

請參考以下範例:

在 HTML 網頁上初步規劃 7 個 <div> 位置圖,如下:

CSS 語法教學 - 4 欄式網頁版型 - 範例下載




 

新開一頁 CSS 文件,版型配置相關的主要 CSS 語法部份,如下:

@import url("reset.css");
#HEADER {
	margin:0 auto;
	width:900px;
	height:200px;
	background-color:#336699;
}
#WRAPPER {
	margin:0 auto;
	width:900px;
	overflow:hidden;
	background-color:#999999;
	padding-top:20px;
	padding-bottom:20px;
}
#BOX_A {
	width:170px;
	float:left;
	background-color:#FFFFCC;
	margin-left:12px;
	_display:inline;
}
#BOX_B {
	width:250px;
	float:left;
	background-color:#FFFF66;
	margin-left:12px;
	_display:inline;
}
#BOX_C {
	width:250px;
	float:left;
	background-color:#FFFFCC;
	margin-left:12px;
	_display:inline;
}
#BOX_D {
	width:170px;
	float:left;
	background-color:#FFFF66;
	margin-left:12px;
	_display:inline;
}
br.CLEAR {
	clear: both;
	height:0;
	font-size:1px;
	line-height:0;
}
#FOOTER {
	clear:both;
	margin:0 auto;
	width:900px;
	height:120px;
	background-color:#336699;
}

 

範例下載【4 欄式 CSS 網頁版型

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , .

回應已關閉。