App下載

CSS的單列布局如何實現(xiàn)?附源碼

猿友 2021-05-25 15:47:56 瀏覽數 (3751)
反饋

網頁中的單列布局方式常見的開發(fā)方式之一。那么你知道網站中的單列布局如何實現(xiàn)嗎?這篇文章告訴你。

單列布局中還能劃分為兩種,一種是等寬的單列布局;另一種是 header 和 footer 等寬并占滿屏幕,而 contant 略窄的單列布局。

等寬單列布局:

在等寬單列布局中,我們需要對 header、contant、footer 都設置同樣的寬度,設置寬度可以使用 width 或者 max-width 兩個屬性,兩者不同的區(qū)別的在于,當屏幕小于設置的寬度時,width 會出現(xiàn)滾動條,而 max-width 顯示屏幕實際的寬度。設完寬度后,在設置 ?margin:0 auto;? 實現(xiàn)居中。

我們先來看下實現(xiàn)效果:

CSS實現(xiàn)單列布局

實現(xiàn)代碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS實現(xiàn)單列布局 - 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		.header{
			max-width: 1080px;
			height: 100px;
			margin: 0 auto;
			background-color: gray;
		}
		.contant{
			max-width: 1080px;
			height: 500px;
			margin: 0 auto;
			background-color: red;
		}
		.footer{
			max-width: 1080px;
			height: 100px;
			margin: 0 auto;
			background-color: gray;
		}	
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="contant"></div>
	<div class="footer"></div>
</body>
</html>

不等寬單列布局

不等寬的實現(xiàn)原理與上述相似,只是不在設置header與footer設置寬度,而在contant中設置寬度即可。

實現(xiàn)效果如下:

CSS實現(xiàn)單列布局

源代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS實現(xiàn)單列布局 - 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		.header{
			height: 100px;
			margin: 0 auto;
			background-color: gray;		
		}
		.contant{
			max-width: 1080px;
			height: 500px;
			margin: 0 auto;
			background-color: red;
		}
		.footer{
			height: 100px;
			margin: 0 auto;
			background-color: gray;
		}	
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="contant"></div>
	<div class="footer"></div>
</body>
</html>

以上就是文章中的提到的兩種單列布局。如果同學們對網頁布局感興趣的話,可以使用HTML在線工具進行練習。

這就是文章“CSS 的單列布局如何實現(xiàn)?附源碼”的全部內容。想要學習更多 CSS 知識請前往 w3cschool。

CSS

0 人點贊