慕課網《如何用CSS進行網頁布局》視訊學習筆記
[toc]
授課老師：江老實 。
Web前端工程師，資深前端攻城師，深受歡迎的前端領路人，多家大型網站的建造者，主攻前端技術開發、網頁UI設計，影像技術達人，古典音樂發燒友，儒雅先生。
一、内容簡介
網頁可以自适應。
網頁的長度理論上可以沒有限制
常見的網頁分為：頭部、主體（主體可以再分欄）。
分欄又稱為分列，常見的布局分為：一列布局、二列布局、三列布局。
二、一列布局
下面我們寫一個固定寬度的一列布局。
div 水準居中的 css 樣式設定：給 div 設定 margin:0 auto。
div 的寬度如果不定義，它就是一個通欄的 div。
示例代碼：
<style>
body{ margin:; padding:; font-size:px}
div{
text-align:center;
font-weight:bold
}
.head, .main, .footer{
width:px;
margin: auto
}
.head{
height:px;
background:#ccc
}
.main{
height:px;
background:#FCC
}
.footer{
height:px;
background:#9CF
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)