塊級元素<div>，用于組合其他HTML元素的容器
<div class="head">
? ? <h1>頁面頂部區(qū)域</h1>
</div>
<div class="left">
? ? <h1>頁面左邊區(qū)域</h1>
</div>
<div class="middle">
? ? <h1>頁面中間區(qū)域</h1>
</div>
<div class="foot">
? ? <h1>頁面底部區(qū)域</h1>
</div>
CSS層疊樣式表：表現(xiàn)形式如字體大小、背景顏色、布局等
1.直接將樣式<style></style>放入HTML的頭標簽<head></head>之中
<style>
????.head{
????????background-color: blue;
????????color: white;
????????text-align: center;
????????padding: 5px;
????}
????.left{
????????line-height: 30px;
????????background-color: #eeeeee;
????????color: black;
????????height: 300px;
????????width: 100px;
????????float: left;
????????text-align: center;
????????padding: 5px;
????}
????.middle{
????????background-color: yellow;
????????width: 350px;
????????color: white;
????????text-align: center;
????????padding: 5px;
????}
????.head{
????????background-color: blue;
????????color: white;
????????text-align: center;
????????padding: 5px;
????}
</style>
2.引入樣式，并將引入的代碼放入HTML的頭標簽<head></head>之中
<link rel="stylesheet" type="text/css" href="1.css">
并新建一個名為“1.css”的文件，代碼內(nèi)容如下
.head{
????background-color: pink;
????color: black;
????text-align: center;
????padding: 5px;
}
.left{
????line-height: 30px;
????background-color: #eeeeee;
????color: black;
????height: 300px;
????width: 100px;
????float: left;
????text-align: center;
????padding: 5px;
}
.middle{
????background-color: yellow;
????width: 350px;
????color: white;
????text-align: center;
????padding: 5px;
}
.foot{
????background-color: blue;
????color: white;
????text-align: center;
????padding: 5px;
}
