零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之網(wǎng)頁(yè)排版（附實(shí)戰(zhàn)）

Sunny蕭蕭：本文作為小白入門(mén)級(jí)，相對(duì)基礎(chǔ)，是寫(xiě)給現(xiàn)在想了解一點(diǎn)前端知識(shí)的設(shè)計(jì)師同行們，力求通俗易懂幽默風(fēng)趣。這一章不僅教大家 網(wǎng)頁(yè)排版 的基礎(chǔ)知識(shí)，還以百度藝術(shù)百科的網(wǎng)頁(yè)為例，帶大家簡(jiǎn)單做一遍，學(xué)得會(huì)更快，來(lái)收！

往期回顧：

1. 《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之小白入門(mén)篇（一）》
2. 《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之征服霸道DIV篇（二）》

閱讀須知：

1. 工具不重要，工具不重要，工具不重要……OK？有人說(shuō)DW早就淘汰了，我造啊，然后呢？我還打算用小紅本（editPlus）講呢，哈哈哈哈……
2. 希望乃們接受我這種循序漸進(jìn)的過(guò)程。做算術(shù)題你會(huì)知道“乘法”和“設(shè)未知數(shù)”來(lái)得更快，但是也得從簡(jiǎn)單“加減法”過(guò)渡。如果有疑問(wèn)請(qǐng)留言或私信，下篇會(huì)著重講。
3. 所有內(nèi)容基于自己的理解和編碼習(xí)慣，并非標(biāo)準(zhǔn)。

好了，進(jìn)入正題。排版之前先來(lái)做點(diǎn)準(zhǔn)備工作。

一、嵌入、內(nèi)聯(lián)樣式

1. CSS 嵌入

其實(shí)程序員是一幫蠻會(huì)偷懶的家伙你信么？^_^ 在碼字過(guò)程中，如果遇到常用的一段代碼，就會(huì)想辦法打包起來(lái)，需要的時(shí)候一行代碼或幾行代碼就可以調(diào)出來(lái)用而不用重復(fù)寫(xiě)，系不系很機(jī)智。讓我想起來(lái)我們常用的那些PS動(dòng)作們，不就是同樣的原理嗎？

來(lái)吧，排幾個(gè)寬高各100px的div試試，如果你現(xiàn)在還不能默寫(xiě)的話(huà)，建議多練習(xí)幾遍。

如上圖：代碼如下

（偶的dw過(guò)期啦，臨時(shí)換了一個(gè)。其實(shí)也沒(méi)多大區(qū)別啦，是吧？這是以前一個(gè)同事介紹的Webstorm，現(xiàn)在他又不知道換了啥。-_- …乃們繼續(xù)用DW敲吧，我會(huì)隨時(shí)用回DW的，頭部那些東西不要為了和我的一樣而亂改哈。）

像這種直接放在div標(biāo)簽內(nèi)style里的樣式稱(chēng)為嵌入樣式。只服務(wù)于它嵌入的那個(gè)標(biāo)簽，而對(duì)其他標(biāo)簽的樣式不會(huì)產(chǎn)生影響。

但是，每個(gè)div都要寫(xiě)辣么長(zhǎng)，明明有些屬性大家都一樣的，還要重復(fù)寫(xiě)好煩啊……所以接下來(lái)介紹一下簡(jiǎn)便的寫(xiě)法。

2. 內(nèi)聯(lián)樣式

第一步：提“公因式”

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

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

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

但是提取出來(lái)的公共樣式又要放到哪里呢？

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

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

注：1）其寫(xiě)法不變，依然是”屬性名:屬性值;”,但是外包裝從style:” ” 換成了 class{ }; 由于脫離出來(lái)的class沒(méi)有盒子可裝，所以html出現(xiàn)了這個(gè)專(zhuān)門(mén)裝樣式類(lèi)的<style></style>標(biāo)簽盒子。

2）請(qǐng)注意：class前面還有一個(gè)小點(diǎn) “ . ”。這個(gè)點(diǎn)是class的唯一標(biāo)識(shí)，瀏覽器讀取到“.className”，才知道這個(gè)東西是類(lèi)名。否則你就是個(gè)單詞而已，再讀下去就是一些括號(hào)，單詞，瀏覽器就懵了，說(shuō)好的點(diǎn)呢？怎么不按套路出牌。

初學(xué)時(shí)類(lèi)名可以隨意一點(diǎn)，你寫(xiě)成 ?.a、.b、.apple、xiaoming1……都沒(méi)事，小寫(xiě)就行了，但不能是中文及以數(shù)字開(kāi)頭，也盡量不要與標(biāo)簽名一樣。后面會(huì)專(zhuān)門(mén)講到命名這一塊。

第二步：引用

公共樣式提出來(lái)了，也用盒子裝好了，但是他們之間還沒(méi)有搭上關(guān)系，這就需要在div內(nèi)引用一下寫(xiě)好的類(lèi)：

所有你想用的div都可以引用那個(gè)類(lèi)，引用的方式是在開(kāi)始標(biāo)簽后面加上：class=”className”（這里是不需要有“.”的，但注意不要寫(xiě)錯(cuò)哦）。保存刷新一下：

是不是和前面那種寫(xiě)法得到的效果一樣？像這種頭部style標(biāo)簽中能夠被其他標(biāo)簽通過(guò)類(lèi)名來(lái)引用的樣式，稱(chēng)為：內(nèi)聯(lián)樣式。

它的作用域就大些了，但是也僅限于當(dāng)前html文件中，只要引用了便能對(duì)引用的標(biāo)簽樣式產(chǎn)生影響，可復(fù)用的。常規(guī)做法有時(shí)候會(huì)加上一句“type=text/css”即為：<style type=text/css></style>，但是我一般會(huì)省略，發(fā)現(xiàn)也木有啥影響，加了應(yīng)該是比較規(guī)范吧。

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

小練習(xí)：

寫(xiě)兩個(gè)不同內(nèi)容的類(lèi)，分別引用于兩個(gè)或更多div。

寫(xiě)到這里發(fā)現(xiàn)樣式真的好多要講的啊，下篇專(zhuān)門(mén)講吧，今天先講一點(diǎn)……

二、用矩形模擬網(wǎng)頁(yè)布局

請(qǐng)看大屏幕：（截圖于百度藝術(shù)百科的網(wǎng)頁(yè)）

這個(gè)是相對(duì)比較傳統(tǒng)的排版方式，雖然中規(guī)中矩，形式卻蠻多的。文字、圖片、標(biāo)簽、視頻播放……比較適合排版練習(xí)。

web端網(wǎng)頁(yè)最大的優(yōu)勢(shì)在于，設(shè)計(jì)稿什么樣，開(kāi)發(fā)就能做成什么樣，因?yàn)椴挥孟?a class='sowmlink' id='zhongguoyidongtongxin' onmouseout='Fhidden()' onmouseover='Fpop(this)' target=_blank >移動(dòng)端考慮那么多適配問(wèn)題（想想以前的寫(xiě)手機(jī)端黑歷史，托腮仰天，老淚縱橫……T_T）。我給周?chē)D(zhuǎn) web前端 的朋友的建議都是，先把PC的布局搞定再去寫(xiě)移動(dòng)設(shè)備端的會(huì)輕松一點(diǎn)。

1. 審“題”

拿到設(shè)計(jì)需求就立馬打開(kāi)PS做東西的事情，反正我是不干的，一般會(huì)事倍功半。同樣，拿到網(wǎng)頁(yè)設(shè)計(jì)稿也請(qǐng)不要立馬開(kāi)始碼字，我們需要審題。

告訴我你看上面那張圖片看到了幾塊吧？以前畫(huà)素描的時(shí)候，老師是不是告訴過(guò)你要瞇著眼睛看光影關(guān)系，因?yàn)槿巳菀妆灰恍┘?xì)節(jié)所影響，所以先鋪大面，再摳細(xì)節(jié)，一張合格的素描才能被很好的完成。同樣，一個(gè)網(wǎng)頁(yè)，無(wú)論內(nèi)容再多，分布也是從大到小慢慢摳出來(lái)的。

好吧，說(shuō)多了暈，來(lái)看看我的分法吧，這種思路可能跟你在設(shè)計(jì)時(shí)考慮怎么放東西有點(diǎn)相仿：

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

其實(shí)前端工程師差不多是這樣的思路，從上到下，從左到右寫(xiě)。有的會(huì)把其中一個(gè)部分寫(xiě)好再去寫(xiě)下一個(gè)，有的會(huì)一次性寫(xiě)幾個(gè)大塊，后面再補(bǔ)。要不是特殊原因，你的設(shè)計(jì)稿要是不對(duì)齊,你就等著他來(lái)質(zhì)問(wèn)你吧，或者他默認(rèn)就給你寫(xiě)對(duì)齊了。

類(lèi)似C3那里的藝術(shù)家模塊，工程師最稀飯了，哈哈哈……寫(xiě)一段，然后ctrl C ?ctrl V，ctrl V，ctrl V……

廢話(huà)不多說(shuō)，跟著來(lái)吧……

我們按照有效區(qū)域1180px來(lái)寫(xiě)，尺寸的話(huà)，自己去網(wǎng)站截來(lái)量 http://baike.baidu.com/art ?。

現(xiàn)在去看的話(huà)是沒(méi)有內(nèi)容的，從上到小先把A1排出來(lái)

好，現(xiàn)在的結(jié)構(gòu)已經(jīng)不是單獨(dú)的平行結(jié)構(gòu)了。第一個(gè)div有了自己的孩子（注意換行縮格，這樣層級(jí)關(guān)系較明顯一些）即裝文字的五個(gè)div（也可用其他標(biāo)簽裝，例如：a、p、span……）。為什么稱(chēng)之為孩子，因?yàn)樵趆tml中有子標(biāo)簽及父標(biāo)簽一說(shuō)。有時(shí)候子標(biāo)簽會(huì)繼承父標(biāo)簽的樣式，但大多是標(biāo)簽所含的內(nèi)容，而不是標(biāo)簽本身，即如果給“title_tab”添加針對(duì)文本的樣式，那么子標(biāo)簽內(nèi)的文本也即將改變，除非子標(biāo)簽擁有自己的 針對(duì)文本的樣式，然而不是所有時(shí)候都能成功繼承（誒……越講越多）。

其代碼如下：

紅色部分解析：

（title的樣式那樣寫(xiě)方便看，你們也可以這樣寫(xiě)，只不過(guò)多了就顯得篇幅較長(zhǎng)。）

1）樣式提供多種書(shū)寫(xiě)方式，不僅僅只有.className,可以帶標(biāo)簽名?p{}、div{}……帶標(biāo)簽名則不用前面加點(diǎn)，不過(guò)是針對(duì)當(dāng)前html文件中所有p標(biāo)簽和div標(biāo)簽，所以你知道我為什么說(shuō)類(lèi)名盡量不要使用跟標(biāo)簽名一樣的了吧？要是忘記寫(xiě)點(diǎn)了，那畫(huà)面，簡(jiǎn)直不敢想象。像文中“ *{ } ”的*號(hào)則代表所有，margin是間距屬性，每個(gè)瀏覽器的默認(rèn)里面，margin是有值的，所以需要進(jìn)行一些設(shè)置。如下圖：

2）padding是內(nèi)邊距，margin為外邊距；

當(dāng)他們只有一個(gè)值時(shí)（例：padding:10px;margin：10px；），則默認(rèn)為上下左右都為10px

當(dāng)有兩個(gè)值時(shí)（例：padding:10px ?20px;），其代表的是 ?上下10px，左右20px;

當(dāng)有四個(gè)值時(shí)（例：padding：1px ?5px ?3px ?6px;）,則分別針對(duì) ：上 右 下 左 ，即順時(shí)針?lè)较虻闹担⒁猓皇巧舷伦笥遗丁?/p>

最后，也可單獨(dú)針對(duì)一邊設(shè)置，例：padding-left:10px; ?margin-top:20px;

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

至于float的屬性，請(qǐng)參照上一篇；

有很多屬性，可以自己去w3cschool慢慢找來(lái)試一試。

好了，今天就講到這里了，你們看我寫(xiě)的代碼都有點(diǎn)不一樣，就說(shuō)明不是一天寫(xiě)的啦，時(shí)間真是不夠用呢。下篇補(bǔ)充樣式內(nèi)容，接著排版。

「設(shè)計(jì)師自學(xué)指南系列教程」

1. 平面設(shè)計(jì)： 《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì) ： 《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)： 《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā) ： 《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧： 《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案： 《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南： 《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》