Sunny蕭蕭：本文(wén)作(zuò)為(wèi)小(xiǎo)白(bγ$♥ái)入門(mén)級，相(xiàng)對(duì)基礎，是(÷↔✔♠shì)寫給現(xiàn)在想了(le)解一¶☆(yī)點前端知(zhī)識的(de)設計(jì)師(shī)同行(xíng)們，力求通(tōnλ♥g)俗易懂(dǒng)幽默風(fēng)趣。這(≠<÷αzhè)一(yī)章(zhāng)不(bù)僅教大(≈αλdà)家(jiā)網頁排版的(de)基礎知(zhī)識，還(hái)以百度藝術(shù) ‌>‌百科(kē)的(de)網頁為(wèi)例，₽$€ 帶大(dà)家(jiā)簡單做(zuò)一('∑∏♦yī)遍，學得(de)會(huì)更快(kuài)，來(lái)收σ↔Ω ！

閱讀(dú)須知(zhī)：

工(gōng)具不(bù)重要(yào)，工(gōng)具不(bù)重要(yà→δo)，工(gōng)具不(bù)重要(yào)……OK？有(yǒu)人(rén)說(sδ✘"huō)DW早就(jiù)淘汰了(le)，<®→★我造啊，然後呢(ne)？我還(hái)打算↓σ↕(suàn)用(yòng)小(xiǎo)紅(hóng)本（ed₹§itPlus）講呢(ne)，哈哈哈哈……

希望乃們接受我這(zhè)種循序漸進的(de)過程。做(zuò)算(suà☆♣n)術(shù)題你(nǐ)會(huì)知(zh><ī)道(dào)“乘法”和(hé)“設未知(zhī)數(shù)”來(lái)得(de)更快(kε₹↓uài)，但(dàn)是(shì)也(yě)得(de)從(cóng)簡× ☆<單“加減法”過渡。如(rú)果有(yǒu)疑問(wèn)請(qǐng)留言或私信，✔σ✔下(xià)篇會(huì)著(zhe)重講。

所有(yǒu)內(nèi)容基于自(zì)己的(de)理(£∑lǐ)解和(hé)編碼習(xí)慣，并非标準。

好(hǎo)了(le)，進入正題。排版之前先來(lái)做(zuò)點準備工≠™ ‌(gōng)作(zuò)。

天貓&京東(dōng),內(nèi)蒙古電(diàn)商品牌策劃,內(nèi)蒙古微(wēi)信營銷,內(nèi)蒙古微(wēi)網站(zh♦¶♣§àn),呼和(hé)浩特電(diàn)商品牌策劃,呼和(hé)浩特微(wēi)信§φ  營銷,呼和(hé)浩特微(wēi)網站(zhà₽'βn),內(nèi)蒙古網站(zhàn)制(zhì)作( φzuò)，內(nèi)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站(zhàn)建設，呼和(hé)浩特網站(zhà>✔n)建設，呼和(hé)浩特網站(zhàn)制(zhì)作(zuò)、呼和(hé)浩特網站(zhàn)設計(jì)首選內(nè→‍&&i)蒙古呼和(hé)浩特先誠網絡科(kē)技(jì)公司。先誠官網：/

一(yī)、嵌入、內(nèi)聯樣式

1. CSS 嵌入

其實程序員(yuán)是(shì)一(yī)幫蠻會(huì)偷懶的(de)家(ji←>ā)夥你(nǐ)信麽？^_^ 在碼字過程中，如(rú)果遇到(dào)≠≈常用(yòng)的(de)一(yī)段代碼，就(jiù)會(huì)想"≈辦法打包起來(lái)，需要(yào)的(α'•®de)時(shí)候一(yī)行(xíng)代碼或幾行(xíng)代碼★‍λ•就(jiù)可(kě)以調出來(lái)用(yòng)而不(bù)用(yòng)重複寫，系→☆不(bù)系很(hěn)機(jī)智。讓我想起÷≈♦來(lái)我們常用(yòng)的(de)那(nà)些(xiē§ λ)PS動作(zuò)們，不(bù)就(jiù)是ε∞(shì)同樣的(de)原理(lǐ)嗎(ma)？

來(lái)吧(ba)，排幾個(gè)寬高(gāo)各100px的(de)div試試，如π↑φ(rú)果你(nǐ)現(xiàn)在還(hái)不(bù)能(néng)默φφ"σ寫的(de)話(huà)，建議(yì)多(duō)練習(xí)幾遍。

代碼如(rú)下(xià)

（偶的(de)dw過期啦，臨時(shí)換了(le)一( £αyī)個(gè)。其實也(yě)沒多(duō)大(dà)區(qū)别啦，¶→∑是(shì)吧(ba)？這(zhè)是(shì)以前一(yī)個(gè×∑φ₹)同事(shì)介紹的(de)Webstorm，現(xiàn)在他(tā)又(yòu)不(bù)®£★知(zhī)道(dào)換了(le)啥。-_- …乃們繼續用(yòng)DW敲吧(ba)，我會(h>≥ε£uì)随時(shí)用(yòng)回DW的(de)→±•，頭部那(nà)些(xiē)東(dōng)西(xī)不(bù)要(✔σ∏λyào)為(wèi)了(le)和(hé)我的(de)一(yī)樣而¶ 亂改哈。）

像這(zhè)種直接放(fàng)在div标簽內(nèi)style裡(lǐ)的(de)樣式稱♣₩為(wèi)嵌入樣式。隻服務于它嵌入的(de)那(nà)個(gè)标簽，而對(duì)其他(tā)÷✘标簽的(de)樣式不(bù)會(huì)産生(shēng)影(yǐng)響。

但(dàn)是(shì)，每個(gè)div都(dōu)要(yào)寫辣麽長(ch≥‌γáng)，明(míng)明(míng)有(yǒu)♠  ↓些(xiē)屬性大(dà)家(jiā)都(dōu)一(yī)樣的(de)，還(hái)要(yào)€ 重複寫好(hǎo)煩啊……所以接下(xià)來(lái)介紹一(yī)下<π¶♠(xià)簡便的(de)寫法。

2. 內(nèi)聯樣式

第一(yī)步：提“公因式”

下(xià)面這(zhè)個(gè)你(nǐ)們還(hái)記得(de)吧(ba)？我γ∏££雖然讀(dú)書(shū)少(shǎo)，但γδ(dàn)我還(hái)記得(de)，哈哈……提取公因式的(de)原¥∏'₽理(lǐ)即使把a、c共同擁有(yǒu)的(de)公因式b提取出來(lái)……所得(de)結果&♠≥一(yī)樣。

同樣方法把前面代碼中style裡(lǐ)共同擁有(yǒu)的(de)一(yī)句提取出βΩ‌"來(lái)得(de)到(dào)：width:100px; height:1γπ£π00px; float:left;  不(bù)同的(de)± ∑Ω樣式保留。

則最後style中就(jiù)隻剩下(xià)了(le)顔色值,是(shì₹Ω)不(bù)是(shì)很(hěn)短(duǎn)了(le)？™♠而且大(dà)部分(fēn)時(shí)間(jiān)是(sh±✘ì)不(bù)用(yòng)每個(gè)div都(dōu∞♦)附上(shàng)顔色的(de)，我們今天隻是(shì)拿(ná)帶顔色的(de)≤"<₩矩形來(lái)模拟一(yī)下(xià↔≈)，所以真正應用(yòng)時(shí)僅存的(de)顔色那(nà)一(®♥yī)句都(dōu)會(huì)被删掉。

但(dàn)是(shì)提取出來(lái)的(de)公共樣式又(yòu)要(yào)放(fàngπ♠)到(dào)哪裡(lǐ)呢(ne)？

介紹一(yī)個(gè)新名詞：class（這(zhè)個(gè¥↓)也(yě)是(shì)很(hěn)重要(yào)‍≤的(de)哦）

class直譯為(wèi)級、階級、種類等，也(yě)就(jiù)是(shì)相(xiàng)↑♣同的(de)東(dōng)西(xī)歸為(wèi)一(yī)類放(fàng)在一(yī)起；我們把₩>λ®提取出來(lái)的(de)公共樣式放(fàng)₹•在class裡(lǐ)，在頭部（即head标簽內(nèi)）新建一(yī)個(gè)styl"σ₽e盒子(zǐ)（标簽），裝入盒子(zǐ)，如(rú)下(xià)：

注：1）其寫法不(bù)變，依然是(shì)”屬性名:屬性值;”,但(÷ ∏∏dàn)是(shì)外(wài)包裝從(cóng)style:” ” 換成了(✔✔✘le) class{ }; 由于脫離(lí)出αε₽來(lái)的(de)class沒有(yǒu)盒子(zǐ)可(kě)裝，所以html出現(xi§‌àn)了(le)這(zhè)個(gè)專門(mén)裝樣式£αγγ類的(de)<style>&≠♦™‌lt;/style>标簽盒子(zǐ)。

2）請(qǐng)注意：class前面還¶→₩₹(hái)有(yǒu)一(yī)個(gè)小(xiǎo)點 “✘¶ . ”。這(zhè)個(gè)點是(shì)class的(de)唯一(yī)标識，浏覽器(q'γì)讀(dú)取到(dào)“.className”，才知(zhī)道(dào)÷δ♣這(zhè)個(gè)東(dōng)西(xī)是(shì)類名。否則你(nǐ)就 ←(jiù)是(shì)個(gè)單詞而已，再讀(dú)下(xi≠Ω∑αà)去(qù)就(jiù)是(shì)一δ←​≠(yī)些(xiē)括号，單詞，浏覽器(qì)就(jiù)懵了(le)，說(shuō)好(hǎλ≤βo)的(de)點呢(ne)？怎麽不(bù)按套路(lù)出牌。

初學時(shí)類名可(kě)以随意一(yī)點，你(γ×≠nǐ)寫成  .a、.b、.apple、xiaoming1……都(dō¥≤u)沒事(shì)，小(xiǎo)寫就(¶→jiù)行(xíng)了(le)，但(dàn)不(bù)能(néng)是(shì)中 λφ★文(wén)及以數(shù)字開(kāi)頭，也(yě)盡量不(bù)¥Ω​¶要(yào)與标簽名一(yī)樣。後面會(huì)專門(mén)講到(dào εσ↔)命名這(zhè)一(yī)塊。

第二步：引用(yòng)

公共樣式提出來(lái)了(le)，也(yě)用(yòng)盒子(zǐ)裝好(hǎo)了(leε✔♠‍)，但(dàn)是(shì)他(tā)們之間(jiān)還(hái)沒有(yǒu)搭上( •&↔shàng)關系，這(zhè)就(jiù)需要(yào)在div內(nèi≈↓ασ)引用(yòng)一(yī)下(xià)寫好(hǎo)的(de)類：

所有(yǒu)你(nǐ)想用(yòng)的(de)div都(dōu)可(kě☆★)以引用(yòng)那(nà)個(gè)類，引用(yòng)的(de)方‍✔φ式是(shì)在開(kāi)始标簽後面加上(shàng)：class=”classNα¥♦ame”（這(zhè)裡(lǐ)是(shì)不(bù)需要(yào)有(yǒu)“.”的(de★"€Ω)，但(dàn)注意不(bù)要(yào)寫錯(cuò)哦）。保存刷新一↕→(yī)下(xià)：

是(shì)不(bù)是(shì)和(hé)前面那(nà)種寫法得(de)到(dào)的(∏↑€de)效果一(yī)樣？像這(zhè)種頭部style标簽中能(néng)&α夠被其他(tā)标簽通(tōng)過類名來(lái)引用(yòng)的(de&♠)樣式，稱為(wèi)：內(nèi)聯樣式。

它的(de)作(zuò)用(yòng)域就(jiù)大(dà)些₽♥'(xiē)了(le)，但(dàn)是(shì)也(yě)僅限于當前html文↓↔↔(wén)件(jiàn)中，隻要(yào)引用(yòng←₹♣)了(le)便能(néng)對(duì)引用(yòng)的(de≤‌γ)标簽樣式産生(shēng)影(yǐng)響，可(kě)複用(yòng)的(de↕ ≤•)。常規做(zuò)法有(yǒu)時(shí)候會(huì)加上(sh↑£✘↕àng)一(yī)句“type=text/css”即為(wèi)：<style type=t☆ §®ext/css></style>，但(dàn)是(shì↕ ♠☆)我一(yī)般會(huì)省略，發現(xiàn)也(yě)♦↔>‌木(mù)有(yǒu)啥影(yǐng)響，加了α ≤(le)應該是(shì)比較規範吧(ba)。

class 屬性不(bù)能(néng)在以下(xià) HTML 元素中使用(yòng)：bas×★e, head, html, meta, pa&$ε∏ram, s cript, style 以及 title。

小(xiǎo)練習(xí)：

寫兩個(gè)不(bù)同內(nèi)容的(de)類，分(fēn)别​±☆$引用(yòng)于兩個(gè)或更多(du☆ε✔ō)div。

寫到(dào)這(zhè)裡(lǐ)發現(xiàn↓¥​₹)樣式真的(de)好(hǎo)多(duō)要(yào)講的(de)啊，下(xià)篇專門(mén)$₹ ♣講吧(ba)，今天先講一(yī)點……

二、用(yòng)矩形模拟網頁布局

這(zhè)個(gè)是(shì)相(xiàng)對(duì)比較傳統的(de)排版方式，雖•→§ε然中規中矩，形式卻蠻多(duō)的(de)。文 ​(wén)字、圖片、标簽、視(shì)頻(∏₩§<pín)播放(fàng)……比較适合排版練習(xí)。

web端網頁最大(dà)的(de)優勢在于，設計(↔βjì)稿什(shén)麽樣，開(kāi)發就(jiù)↔"能(néng)做(zuò)成什(shén)麽樣，因為(wèi)σש不(bù)用(yòng)像移動端考慮那(nà)麽多(duō)适配問(wèε n)題（想想以前的(de)寫手機(jī)端黑(hēi)曆史，托腮$‌仰天，老(lǎo)淚縱橫……T_T）。我給周圍轉web前端的(de)朋(pé↓♥ng)友(yǒu)的(de)建議(yì)都(dōu)是(shì)，先把PC的($∏λde)布局搞定再去(qù)寫移動設備端的(de)會(huì)輕松一(yī)‌δ<點。

1. 審“題”

拿(ná)到(dào)設計(jì)需求就(jiù)立馬打開(kāi)PS做(zuò)東(dōng)λ≤∑西(xī)的(de)事(shì)情，反正我是(shì)不(bù)幹的(de)，一(y$δī)般會(huì)事(shì)倍功半。同樣，拿γ✘¥♥(ná)到(dào)網頁設計(jì)稿也(yě)請(qǐng)不(bù)要(yào)立馬開(kāi$∑ &)始碼字，我們需要(yào)審題。

告訴我你(nǐ)看(kàn)上(shàng)面那(nà)張圖片看(kàn)到£÷←&(dào)了(le)幾塊吧(ba)？以前畫(hu¥≥à)素描的(de)時(shí)候，老(lǎo)師(shī)是(shì)不(bù​ε£π)是(shì)告訴過你(nǐ)要(yào)眯著(zhe)眼睛看(kàn)光(guān☆¥ ≥g)影(yǐng)關系，因為(wèi)人(rén)容易被一(yī)些(xiē)↕±→細節所影(yǐng)響，所以先鋪大(dà)面，再摳細節，一(yī)張合格的(d±×±e)素描才能(néng)被很(hěn)好(hǎo)的(de)完成。同樣，一(yī)個(gè)網頁，><無論內(nèi)容再多(duō)，分(fēn)布§¶也(yě)是(shì)從(cóng)大(dà)到ε '(dào)小(xiǎo)慢(màn)慢(màn ↑)摳出來(lái)的(de)。

好(hǎo)吧(ba)，說(shuō)多(duō)了(le)暈，來(lái‌↓≥")看(kàn)看(kàn)我的(de)分(fε•₹≤ēn)法吧(ba)，這(zhè)種思路(lù)可(kě)能(néng)跟' π>你(nǐ)在設計(jì)時(shí)考慮怎麽放(fàng)東(dōng)西(xī)有↔↑(yǒu)點相(xiàng)仿：

首先，頭部的(de)tab和(hé)下(xià)方為(wèi)一(yī)塊，分(fē←εn)好(hǎo)之後下(xià)面的(de)分(fēn)成兩塊，再然∏¥±後……

其實前端工(gōng)程師(shī)差不(bù)多(duō)是(shì)這(zhè㧀↕)樣的(de)思路(lù)，從(cóng)上(shàng)到(dào)下(xià)，從(cóng)¥€♥λ左到(dào)右寫。有(yǒu)的(de)會(huì)把其中一(yī)個(g✔®è)部分(fēn)寫好(hǎo)再去(qù)寫下(xià)一(yī)個(gè)，有(yǒu)>×的(de)會(huì)一(yī)次性寫幾個(gè)大(dà♣♥)塊，後面再補。要(yào)不(bù)是(shì)特殊原因，你(nǐ)的☆‌→(de)設計(jì)稿要(yào)是(shì)不(bù)σ♣對(duì)齊,你(nǐ)就(jiù)等著(zhe)他(tā)來(lá"€"≠i)質問(wèn)你(nǐ)吧(ba)，或者他(tā)默認就₹$‌δ(jiù)給你(nǐ)寫對(duì)齊了(le)。

類似C3那(nà)裡(lǐ)的(de)藝術(shù)家(jiā)模塊，工(★£→gōng)程師(shī)最稀飯了(le)，哈哈哈……寫一♥↕(yī)段，然後ctrl C  ctrl V，ctrl δ←✔εV，ctrl V……

廢話(huà)不(bù)多(duō)說(shuō)，跟著(z§§he)來(lái)吧(ba)……

我們按照(zhào)有(yǒu)效區(qū)域πε1180px來(lái)寫，尺寸的(de)話(huà)，自(zì)己去(qù)網站(zh↕↕♠☆àn)截來(lái)量 http://baike.baidu.com/art ∑✘ 。

現(xiàn)在去(qù)看(kàn)的(de)話(huà)是↔✘(shì)沒有(yǒu)內(nèi)容的(de)，從(cóng)上(sπ₩¶∏hàng)到(dào)小(xiǎo)先把A1排出來(lái)

好(hǎo)，現(xiàn)在的(de)結構已經不(bù)是(shì)單獨的'> (de)平行(xíng)結構了(le)。第一(yī§×£)個(gè)div有(yǒu)了(le)自(σ≠↑zì)己的(de)孩子(zǐ)（注意換行(xíng)縮格≥ ≥>，這(zhè)樣層級關系較明(míng)顯一(yī)些(xiē)）即裝文(wén)字的(de)五個‍'₹(gè)div（也(yě)可(kě)用(yòng)其他Ω$π(tā)标簽裝，例如(rú)：a、p、span……）。為(wèi)什(shén¥ )麽稱之為(wèi)孩子(zǐ)，因為(wè★↔≠i)在html中有(yǒu)子(zǐ)标簽及父标簽一(yī)說(shuō)。±&$有(yǒu)時(shí)候子(zǐ)标簽會(huì)繼承父标簽的(de)樣式，但₽✔↕"(dàn)大(dà)多(duō)是(shì)标簽所含的(de)內(nèi)容，而不(bù)>₽↑ 是(shì)标簽本身(shēn)，即如(rú)果給“title_tab”添加針對(duì✔☆♦‍)文(wén)本的(de)樣式，那(nà)麽子×₹≠(zǐ)标簽內(nèi)的(de)文(wén)本也(yě↕Ω✔)即将改變，除非子(zǐ)标簽擁有(yǒu)自(zì)己的(de) 針對(duì)文←∞₹♥(wén)本的(de)樣式，然而不(bù)是(shì)所有(yǒσδ•u)時(shí)候都(dōu)能(néng)成功繼承（γ¶☆∑诶……越講越多(duō)）。

紅(hóng)色部分(fēn)解析：

（title的(de)樣式那(nà)樣寫方便看(kàn)，你(nǐ)們也(yě)可(kě)以這(∞→¶$zhè)樣寫，隻不(bù)過多(duō)了(le)就(jiù)顯得‍₹®€(de)篇幅較長(cháng)。）

1）樣式提供多(duō)種書(shū)寫方式，不(b¶®σ'ù)僅僅隻有(yǒu).className,可(kě)以帶标簽名 p{}、div{}……∞€© 帶标簽名則不(bù)用(yòng)前面加點，←β ∞不(bù)過是(shì)針對(duì)當前html文(wén)件(jiàn)中所有(✔★"yǒu)p标簽和(hé)div标簽，所以你(nǐ)知× (zhī)道(dào)我為(wèi)什(shén)麽說(shuō)類名盡量不(bù)要(yào™¶)使用(yòng)跟标簽名一(yī)樣的(de)了(le)吧(ba)？要(yào)•>♥是(shì)忘記寫點了(le)，那(nà)畫(huà)面，簡直不(bù)敢®≠想象。像文(wén)中“ *{ } ”的(d₩÷÷₹e)*号則代表所有(yǒu)，marginΩ§"是(shì)間(jiān)距屬性，每個(gè)浏覽器(qì)的(de)默認裡(lǐ)面，↕™‌margin是(shì)有(yǒu)值的(de)，所以需要(yào)進行(xíng)一(yī)π₹σ★些(xiē)設置。如(rú)下(xià)圖：

2）padding是(shì)內(nèi)邊距，margin為(₹σwèi)外(wài)邊距；

當他(tā)們隻有(yǒu)一(yī)個(gè)值時(shí)（例：padding:10§ ×px;margin：10px；），則默認為(wèi)上✘≤←(shàng)下(xià)左右都(dōu)為(wèi)10px

當有(yǒu)兩個(gè)值時(shí)（例：padding:10px  20px;σ'♥），其代表的(de)是(shì)  €β";上(shàng)下(xià)10px，左右20px;

當有(yǒu)四個(gè)值時(shí)（ β↓例：padding：1px  5px &♦‌nbsp;3px  6px;）,則§← 分(fēn)别針對(duì) ：上(sh£™™ àng) 右 下(xià) 左 ，即順時(shí)針方向的(de)值，注意，不(bù) ✘是(shì)上(shàng)下(xià)左右哦。

最後，也(yě)可(kě)單獨針對(duγ€φ>ì)一(yī)邊設置，例：padding-le'∑≤♣ft:10px;  margin-top:20px;

color設置字體(tǐ)顔色;font-size——字體(tǐ)大(dà↑≤‌)小(xiǎo);font-weight——字體(tǐ)粗細（bold、100、  φ200、300……最大(dà)也(yě)就(jiù)八九百的(de)樣子(zǐ)，不(bù)帶單♣ 位）；font-family:”微(wēi)軟雅黑(hēi)”; ……

至于float的(de)屬性，請(qǐng)參照(zhào)上(shàng)一(yī)篇δ₽¥γ；

有(yǒu)很(hěn)多(duō)屬性，可(kě)以自(z↓÷<ì)己去(qù)w3cschool慢(màn)慢(màn)找來(l≤↓ái)試一(yī)試。

好(hǎo)了(le)，今天就(jiù)講到(dào)這(zhè)裡(lǐ)了(le)，你(n≥γ←ǐ)們看(kàn)我寫的(de)代碼都(dōu)有(yǒ≥≤u)點不(bù)一(yī)樣，就(jiù)說(shuō)明(míng)不(bù)是(s♦λ®✔hì)一(yī)天寫的(de)啦，時(shí)間(jiān)真是(shì)不(bù)夠用(<™σyòng)呢(ne)。下(xià)篇補充樣式♦♣>內(nèi)容，接著(zhe)排版。

注：本文(wén)均來(lái)自(zì)百度搜索，如(rú)涉及版權問(wèn)題，請(↑★♠αqǐng)聯系我們，我們會(huì)第一(yī)時‌$↔(shí)間(jiān)解決。