Sunny蕭蕭：本文作為小白入門級，相對基礎，是寫給現在想了解一點前端知識的設計師同行們，力求通俗易懂幽默風趣。這一章不僅教大家 網頁排版 的基礎知識，還以百度藝術百科的網頁為例，帶大家簡單做一遍，學得會更快，來收！

往期回顧：

1. 《零基礎也能看懂！寫給設計師的前端小知識之小白入門篇（一）》
2. 《零基礎也能看懂！寫給設計師的前端小知識之征服霸道DIV篇（二）》

閱讀須知：

1. 工具不重要，工具不重要，工具不重要……OK？有人說DW早就淘汰了，我造啊，然后呢？我還打算用小紅本（editPlus）講呢，哈哈哈哈……
2. 希望乃們接受我這種循序漸進的過程。做算術題你會知道“乘法”和“設未知數”來得更快，但是也得從簡單“加減法”過渡。如果有疑問請留言或私信，下篇會著重講。
3. 所有內容基于自己的理解和編碼習慣，并非標準。

好了，進入正題。排版之前先來做點準備工作。

一、嵌入、內聯樣式

1. CSS 嵌入

其實程序員是一幫蠻會偷懶的家伙你信么？^_^ 在碼字過程中，如果遇到常用的一段代碼，就會想辦法打包起來，需要的時候一行代碼或幾行代碼就可以調出來用而不用重復寫，系不系很機智。讓我想起來我們常用的那些PS動作們，不就是同樣的原理嗎？

來吧，排幾個寬高各100px的div試試，如果你現在還不能默寫的話，建議多練習幾遍。

如上圖：代碼如下

（偶的dw過期啦，臨時換了一個。其實也沒多大區別啦，是吧？這是以前一個同事介紹的Webstorm，現在他又不知道換了啥。-_- …乃們繼續用DW敲吧，我會隨時用回DW的，頭部那些東西不要為了和我的一樣而亂改哈。）

像這種直接放在div標簽內style里的樣式稱為嵌入樣式。只服務于它嵌入的那個標簽，而對其他標簽的樣式不會產生影響。

但是，每個div都要寫辣么長，明明有些屬性大家都一樣的，還要重復寫好煩啊……所以接下來介紹一下簡便的寫法。

2. 內聯樣式

第一步：提“公因式”

下面這個你們還記得吧？我雖然讀書少，但我還記得，哈哈……提取公因式的原理即使把a、c共同擁有的公因式b提取出來……所得結果一樣。

同樣方法把前面代碼中style里共同擁有的一句提取出來得到：width:100px; height:100px; float:left; ?不同的樣式保留。

則最后style中就只剩下了顏色值,是不是很短了？而且大部分時間是不用每個div都附上顏色的，我們今天只是拿帶顏色的矩形來模擬一下，所以真正應用時僅存的顏色那一句都會被刪掉。

但是提取出來的公共樣式又要放到哪里呢？

介紹一個新名詞：class（這個也是很重要的哦）

class直譯為級、階級、種類等，也就是相同的東西歸為一類放在一起；我們把提取出來的公共樣式放在class里，在頭部（即head標簽內）新建一個style盒子（標簽），裝入盒子，如下：

注：1）其寫法不變，依然是”屬性名:屬性值;”,但是外包裝從style:” ” 換成了 class{ }; 由于脫離出來的class沒有盒子可裝，所以html出現了這個專門裝樣式類的<style></style>標簽盒子。

2）請注意：class前面還有一個小點 “ . ”。這個點是class的唯一標識，瀏覽器讀取到“.className”，才知道這個東西是類名。否則你就是個單詞而已，再讀下去就是一些括號，單詞，瀏覽器就懵了，說好的點呢？怎么不按套路出牌。

初學時類名可以隨意一點，你寫成 ?.a、.b、.apple、xiaoming1……都沒事，小寫就行了，但不能是中文及以數字開頭，也盡量不要與標簽名一樣。后面會專門講到命名這一塊。

第二步：引用

公共樣式提出來了，也用盒子裝好了，但是他們之間還沒有搭上關系，這就需要在div內引用一下寫好的類：

所有你想用的div都可以引用那個類，引用的方式是在開始標簽后面加上：class=”className”（這里是不需要有“.”的，但注意不要寫錯哦）。保存刷新一下：

是不是和前面那種寫法得到的效果一樣？像這種頭部style標簽中能夠被其他標簽通過類名來引用的樣式，稱為：內聯樣式。

它的作用域就大些了，但是也僅限于當前html文件中，只要引用了便能對引用的標簽樣式產生影響，可復用的。常規做法有時候會加上一句“type=text/css”即為：<style type=text/css></style>，但是我一般會省略，發現也木有啥影響，加了應該是比較規范吧。

class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, s cript, style 以及 title。

小練習：

寫兩個不同內容的類，分別引用于兩個或更多div。

寫到這里發現樣式真的好多要講的啊，下篇專門講吧，今天先講一點……

二、用矩形模擬網頁布局

請看大屏幕：（截圖于百度藝術百科的網頁）

這個是相對比較傳統的排版方式，雖然中規中矩，形式卻蠻多的。文字、圖片、標簽、視頻播放……比較適合排版練習。

web端網頁最大的優勢在于，設計稿什么樣，開發就能做成什么樣，因為不用像移動端考慮那么多適配問題（想想以前的寫手機端黑歷史，托腮仰天，老淚縱橫……T_T）。我給周圍轉 web前端 的朋友的建議都是，先把PC的布局搞定再去寫移動設備端的會輕松一點。

1. 審“題”

拿到設計需求就立馬打開PS做東西的事情，反正我是不干的，一般會事倍功半。同樣，拿到網頁設計稿也請不要立馬開始碼字，我們需要審題。

告訴我你看上面那張圖片看到了幾塊吧？以前畫素描的時候，老師是不是告訴過你要瞇著眼睛看光影關系，因為人容易被一些細節所影響，所以先鋪大面，再摳細節，一張合格的素描才能被很好的完成。同樣，一個網頁，無論內容再多，分布也是從大到小慢慢摳出來的。

好吧，說多了暈，來看看我的分法吧，這種思路可能跟你在設計時考慮怎么放東西有點相仿：

首先，頭部的tab和下方為一塊，分好之后下面的分成兩塊，再然后……

其實前端工程師差不多是這樣的思路，從上到下，從左到右寫。有的會把其中一個部分寫好再去寫下一個，有的會一次性寫幾個大塊，后面再補。要不是特殊原因，你的設計稿要是不對齊,你就等著他來質問你吧，或者他默認就給你寫對齊了。

類似C3那里的藝術家模塊，工程師最稀飯了，哈哈哈……寫一段，然后ctrl C ?ctrl V，ctrl V，ctrl V……

廢話不多說，跟著來吧……

我們按照有效區域1180px來寫，尺寸的話，自己去網站截來量 http://baike.baidu.com/art ?。

現在去看的話是沒有內容的，從上到小先把A1排出來

好，現在的結構已經不是單獨的平行結構了。第一個div有了自己的孩子（注意換行縮格，這樣層級關系較明顯一些）即裝文字的五個div（也可用其他標簽裝，例如：a、p、span……）。為什么稱之為孩子，因為在html中有子標簽及父標簽一說。有時候子標簽會繼承父標簽的樣式，但大多是標簽所含的內容，而不是標簽本身，即如果給“title_tab”添加針對文本的樣式，那么子標簽內的文本也即將改變，除非子標簽擁有自己的 針對文本的樣式，然而不是所有時候都能成功繼承（誒……越講越多）。

其代碼如下：

紅色部分解析：

（title的樣式那樣寫方便看，你們也可以這樣寫，只不過多了就顯得篇幅較長。）

1）樣式提供多種書寫方式，不僅僅只有.className,可以帶標簽名?p{}、div{}……帶標簽名則不用前面加點，不過是針對當前html文件中所有p標簽和div標簽，所以你知道我為什么說類名盡量不要使用跟標簽名一樣的了吧？要是忘記寫點了，那畫面，簡直不敢想象。像文中“ *{ } ”的*號則代表所有，margin是間距屬性，每個瀏覽器的默認里面，margin是有值的，所以需要進行一些設置。如下圖：

2）padding是內邊距，margin為外邊距；

當他們只有一個值時（例：padding:10px;margin：10px；），則默認為上下左右都為10px

當有兩個值時（例：padding:10px ?20px;），其代表的是 ?上下10px，左右20px;

當有四個值時（例：padding：1px ?5px ?3px ?6px;）,則分別針對 ：上 右 下 左 ，即順時針方向的值，注意，不是上下左右哦。

最后，也可單獨針對一邊設置，例：padding-left:10px; ?margin-top:20px;

color設置字體顏色;font-size——字體大小;font-weight——字體粗細（bold、100、200、300……最大也就八九百的樣子，不帶單位）；font-family:”微軟雅黑”; ……

至于float的屬性，請參照上一篇；

有很多屬性，可以自己去w3cschool慢慢找來試一試。

好了，今天就講到這里了，你們看我寫的代碼都有點不一樣，就說明不是一天寫的啦，時間真是不夠用呢。下篇補充樣式內容，接著排版。

「設計師自學指南系列教程」

1. 平面設計： 《超贊！設計師完全自學指南》
2. 交互設計 ： 《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計： 《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發 ： 《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧： 《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案： 《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南： 《基礎知識學起來！為設計師量身打造的DPI指南》