CSS布局易于設(shè)計(jì)。我們可以使用CSS布局來設(shè)計(jì)我們的網(wǎng)頁，例如主頁，與我們聯(lián)系，關(guān)于我們等。
有三種設(shè)計(jì)網(wǎng)頁布局的方法：
HTML Div+CSS布局：現(xiàn)在已廣泛使用。
HTML表格：速度較慢，較不受歡迎。
HTML框架集：現(xiàn)已棄用。
CSS布局可以包含頁眉，頁腳，左窗格，右窗格和正文部分。讓我們看一個簡單的CSS布局示例。
<!DOCTYPE html>
<html>
<head>
<style>
.header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
.container{width:100%}
.left{width:15%;float:left;}
.body{width:65%;float:left;background-color:pink;padding:5px;}
.right{width:15%;float:left;}
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
</style>
</head>
<body>
<div class="header"><h2>基礎(chǔ)教程 (cainiaoplus.com)</h2></div>
<div class="container">
<div class="left">
<p>左邊欄</p>
</div>
<div class="body">
<h1>正文</h1>
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>
<p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p><p>頁面內(nèi)容在這里</p>
<p>頁面內(nèi)容在這里</p>
</div>
<div class="right">
<p>右邊欄</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>測試看看?/?輸出效果:
左邊欄
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
頁面內(nèi)容在這里
右邊欄
底部