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 人點贊