網頁製作思路
這節要做出以下效果的網頁
其實，做網頁就像畫畫一樣，要分為一個一個的區域製作
當把基本的區域確定好後，我們才能開始製作網頁
拿我們今天要做的這種個網頁為例，我們可以先把它分為三個區域
分別為藍綠黃區域，即頁頭、頁中和頁尾
我們先來定義這三個區域
banner為頭部，navigation為頁中，bottom為頁腳
（當然這個id的屬性也可以自己設置，比如頁頭就可以定義為拼音yetou）
這裡解釋一下div
一個空的div，它的寬度默認為100%，高度為0
當我們給div添加內容時，div才會被撐開，當然，寬和高也可以自己設置
現在我們來插入圖片和對應的超連結文字等
效果如下
現在一個大概已經寫出來了
但是現在我們還要解決一個問題，就是左上角的間隙
要是不想要這個間隙，就要設置一個屬性margin:0;
（這個具體的使用以後會講到，先來解決問題）
寫入這個顯示效果如下
現在空隙就不見了
下一步我們就要讓圖片撐滿整個網頁，就要設置width:100%;
效果如下
以上頁頭就製作完成
接下來，我們要對頁中的內容進行設置，現在看到的兩行文字挨得太近了
我們要增加一下兩行之間的距離，具體步驟：
由於這兩行文字放在兩個容器裡，所以我們就要
1.先增加容器的寬度
2.再設置將文字在容器中居中（當行高=容器的高度時才會垂直居中）
3.設置文字也要在水平方向居中
具體的設置如下
顯示效果為
我們還要將版權部分設置為灰色背景，這裡也有多種方法
1.可以直接將頁腳容器設置為灰色背景
2.可以將整個頁面設置為灰色背景，然後將頁中部分設置為白色背景
我們這節用第2種方法來做一下
顯示效果如下
然後再稍微跳幀報告一下字體大小和字體顏色
效果如下
大致的效果已經做出來了
但是我們不難看出，頁中中的文字空隙很大，那我們怎麼設置文字的左右空隙呢
如何寫這個文字的間隙呢？
就需要用到剛才我們所寫的外邊距margin了
具體編寫如下
顯示效果為
這樣，我們整個的網頁效果便出來了
CSS選擇器
但是，有個很重要的問題！
我們的網頁由於添加各種樣式，使我們的網頁標籤代碼非常的多、亂
這時候我們就需要引入我們的內部樣式表
所謂的內部樣式表就是把我們寫出的所有樣式提取出來，單獨放在一個叫style的標籤中
這樣一來，我們所有的標籤中的樣式就可以全部移到style標籤中
我們把寫在標籤內部的叫標籤樣式，寫在style中的內部樣式
內部樣式的出現，會大大的簡化我們的編寫工作
我們現在就嘗試著吧所有寫的樣式放入style標籤中
（註：style標籤是寫在中的）
當我們提取樣式時，我們怎麼確定樣式對應是哪個標籤呢，這時候就需要我們id中設置的名稱了。即選擇器。
1.標籤的樣式直接寫標籤名
2.id的樣式需要開頭加#號，即#+id名
3.class中的樣式需要開頭加.,即.+class名
這裡注意id只能對一個div設置，而class可以對多個相同樣式的div設置
他們都相當於是給div起的名字。
而對於圖片指定樣式，我們也可以這樣
這就相當於，只在id為banner的標籤下的img設置樣式。
這樣寫完，效果與剛才一模一樣，沒有變化，但是HTML標籤就會顯得乾淨整潔。
我們來總結一下
從上往下，選取的範圍越來越廣，id只能定義一個，通用是定義全部。
這一小節所有代碼：
--- web分享，分享的不只是web