一、用DIV佈局
1、DIV簡介
DIV是標記對，表示一個層，裏面包含HTML代碼，也可以被HTML標記包圍。
基本語法：
<div>
<p>添加文字</p>
</div>
以上的效果與<body>添加文字</body>的效果一致。
設置CSS修飾DIV
<title>無標題文檔</title>
<style>
#header{
width: 700px;
margin: auto;
border: 1px solid #bbbbbb;
}
</style>
</head>
<body>
<div id="header">
測試div
</div>
</body>
在使用DIV時，要注意ID與類選擇符的應用，ID是在一張網頁中單獨的HTML關聯CSS的名稱，而類可以在HTML中重複出現。
2、SPAN
SPAN標記指行內元素，主要用於文本的容器。
<title>無標題文檔</title>
<style>
#span1{
color: blue;
}
#span2{
color: red;
}
</style>
</head>
<body>
<span id="span1">測試</span><span id="span2" >SPAN</span>
</body>
測試效果：
二、DIV與CSS結合
DIV通過與CSS的結合，使CSS能夠控制DIV的外觀、大小等。
DIV與CSS結合有以下三種方式：
- 在網頁中通過外接方式鏈接CSS文件
- 通過內接方式寫CSS文件
- 在<div>中加入style方式結合樣式文件
1、樣式表控制DIV
即在<div>標記裏用style表示。
語法：<div style=#></div>
#代表樣式的內容。
2、CSS文件鏈接
CSS文本的鏈接方式有三種：內聯定義、鏈入內容CSS、鏈接外部CSS。
（1）內聯定義
內聯定義即在對象的標記內，使用對象的style屬性定義適用的樣式表屬性。內聯定義的好處是可以靈活地設置對象的樣式，缺點是樣式擴展性差。
<body>
<p style="border: 2px solid #F10E12">內聯定義</p>
</body>
（2）鏈接內部CSS
鏈接內部樣式所在的範圍在整個網頁中。CSS內連接是由<style></style>標記對放在<head></head>中。
在<style>中有個屬性type,type="text/css"，表示CSS文本。
格式：
<style type="text/css">
</style>
<div>可以用ID和CLASS進行修飾，ID表示層的名稱，CLASS表示類。ID在網頁中只能用一次，而CLASS可以重複使用，不限次數。
應用舉例：
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#p1{
color: blue;
}
.p2{
color: red;
}
</style>
</head>
<body>
<p id="p1" >這是ID，一張頁面只能出現一次</p>
<p class="p2">這是class，一張頁面可以多次出現</p>
<p class="p2">這是class，一張頁面可以多次出現</p>
</body>
（3）鏈接外部CSS
CSS外鏈接是把CSS文件放在網頁外面，通過鏈接使得CSS文件對本網頁的樣式有效。
鏈接格式：
<link type="text/css" rel="stylesheet" src="style.css">
通過link把外面的樣式文本鏈接到網頁。rel是樣式。鏈接時需要css文件和頁面是同一個目錄。
應用舉例：
html文件：
<title>無標題文檔</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="p1" >這是ID，一張頁面只能出現一次</p>
<p class="p2">這是class，一張頁面可以多次出現</p>
<p class="p2">這是class，一張頁面可以多次出現</p>
</body>
css文件
@charset "utf-8";
#p1{
color: blue;
}
.p2{
color: red;
}
測試結果：
三、CSS基礎知識
1、CSS文件的鏈接方式
分爲內連接、鏈接內部CSS、鏈接外部CSS三種方式。
2、選擇符
CSS選擇符就是CSS樣式的名字。
（1）ID選擇符
ID選擇符以#開頭，接上ID名，再由CSS代碼組成，CSS樣式語法是由選擇符加屬性和屬性值構成。
樣式：
#mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
ID選擇符在HTML代碼中，對ID符只能引用一次。如果多次引用，只能第一個有效，其他的沒有效果。
（2）CLASS選擇符
CLASS選擇符是多重選擇符，以“.”開頭。
.mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
CSS選擇符在網易代碼中可以重複，次數不限。
（3）類型選擇符
如div、p等標記類型的樣式設置，成爲類型選擇符。
3、僞類
除了類型選擇符、ID選擇符和CLASS選擇符外，CSS也允許使用僞類選擇符和僞元素選擇符。