淺談網頁製作

標籤：style   color   io   os   使用   ar   div   sp   問題   

在開發一個完整的網頁之前，我們首先應該做好一些相關的準備，例如切片，布局，測量網頁版心等。準備工作完成之後，我們就可以進行網頁開發了。

測量網頁尺寸大小的準確性可以直接影響最後網頁的布局，所以盡量細心一些。

對於布局，我覺得最關鍵的一點是，對網頁大局觀的認識。

布局完成後我們就可以使用css來控制網頁的樣式：

對於每個網頁的製作我想都有一些相同的全域樣式  

例如（*{margin:0;padding:0;list-style:none等等}）一般情況下在做正式的網頁開發我們一般不用*萬用字元因為它的權重很低，所以我們應該把網頁中可能涉及到的所有元素都寫出來。

（body{font-size:12px;color:#ccc;}等等）給全域的網頁設定字型的大小及它的顏色。製作網頁後我們可以發現網頁中不同的版塊中很多地方的字型及顏色不一樣，那就的單獨控制局部的字型和顏色了。

（a:link,a:visited{color:#ccc;text-decoration:none;}）(a:hover{color:red;text-decoration:underline;})

這是全域設定a標籤的樣式，當靜態時候的a標籤是灰色沒有底線的，當滑鼠進入的時候a標籤變成紅色並帶有底線的，當然網頁中其他地方a不同，可以進行單獨的控制，且必須注意權重問題。

寫完這些所有網頁中都可以通用的樣式後，我們就可以進行開發了。一般寫完全域式樣後，都必須換行，那樣可以使在開發網頁時格式清楚利於自己開發，且加上注釋。

今天我主要想說幾個方面的問題，我覺得這些是網頁開發中的重點，也是一些基礎知識

1. 版心置中，及其文字置中問題

2. 盒子模型

3. float，溢出

4. 相對及絕對位置

   5.html中標籤的合理化使用

    6.網頁中給標籤的命名

第一：對於置中的問題可以分為區塊層級元素和行內元素置中

區塊層級元素主要使用margin：0 auto；（上下距離為0，左右距離自動）。(也可以用版心50%-div的width)

        對於行內元素的置中：對於文字的置中主要使用text-align:center;對於img的置中我們使用vertical-align:middle;

當我們要使文字和圖片（圖片的尺寸大小不同時）置中在一條線上是，加上這兩個屬性就可以搞定了；

第二：盒子模型

有了盒子模型最直觀的感受是能使每一個標籤看起來更加的美觀：內邊距:padding;外邊距:margin;

例如：使用div{原div實際大小為：width:100px;height:100px;}現在我們加上padding：20px；

那麼padding會把我們盒子的實際大小撐大很多，為了使盒子的大小不變我們必須在原有的寬高上減去相應的值；

div：{width:60px;height:60px;padding:20px}這樣就可以和原div一樣大了 ，margin的使用也是一樣的。

注意：一般情況來說：增加padding的值就必須減去相應的距離，而magrin一般不用減（magrin是外邊距）。

padding的書寫方式：padding:20px;padding:20px 20px; padding:20px 20px 20px; padding:20px 20px 20px 20px;

有四種書寫方式分別代表：（1.上下左右）（2.上下，左右）（3.上，左右，下）4.（順時針上，右，下，左）

第三：float:浮動      說起浮動首先從布局說起：布局一般情況是標準流布局（區塊層級元素：自上而下，內嵌元素：從左至右）

浮動元素屬性：float:left;  float:right（它可以使區塊層級元素和內嵌元素都脫離標準流）在製作網頁時，配合ul li能後快速的達到想要的效果，但是float後它也會影響後面的標準流所以我們一般使用clean:both;overflow：hidden;來清除float的影響；

這裡順便說說區塊層級元素和行內元素的轉換：display:block;（行內元素轉化為區塊層級元素）

                                                                 display:inline-block;（區塊層級元素轉化為行內元素）

                                                                  display：none；（隱藏元素）

第四：定位：（分為四種：靜態定位，相對定位，絕對位置，固定定位）

這裡說說相對定位和絕對位置

相對定位：position：relative；（以標準流中自身為參照物，如果脫離標準流後，會保留標準流原來的位置，屬於半脫離狀態）

絕對位置：position：abosolute;（完全脫離標準流，參照瀏覽器左上方來進行定位，但這樣的參照一般無意義。它的主要用途是父級相對子級絕對，這樣的定位方式才有實際的意義。）

第五：html標籤的合理化使用：對於這點來說舉個列子

<p>和<span>：當這兩個標籤同時控制一行文字時：一般情況p控制重要的文字，span控制無關緊要的文字和控制單獨的文字。說這個的主要意思是：當製作網頁的時候儘可能的多思考，用什麼樣的標籤來描述網頁最合適。

第六：網頁中的命名：當網頁製作中給元素制定id或class的時候，注意一定要使用稍微規範的命名：

例如：<div class="nav_div"></div>而盡量不要使用<div class="daohang"></div>讓自己養成一個良好的習慣。

             今天的分享結束，還有許多html和css的知識未涉及到例如css3，html5本人正在學習中，待整理後，會第一時間和大家分享，交流，也希望看了本人部落格的朋友，給出學習意見和建議，部落格中許多知識寫的不好不深入，還請見諒。

淺談網頁製作