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

閱讀須知：

工具不重要，工具不重要，工具不重要……OK？有人說DW早就淘汰了，我造啊，然後(hòu)呢？我還(hái)打算用小紅本（editPlus）講呢，哈哈哈哈……

希望乃們接受我這(zhè)種(zhǒng)循序漸進(jìn)的過(guò)程。做算術題你會知道(dào)“乘法”和“設未知數”來得更快，但是也得從簡單“加減法”過(guò)渡。如果有疑問請留言或私信，下篇會著(zhe)重講。

所有内容基于自己的理解和編碼習慣，并非标準。

好(hǎo)了，進(jìn)入正題。排版之前先來做點準備工作。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

一、嵌入、内聯樣(yàng)式

1. CSS 嵌入

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

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

代碼如下

（偶的dw過(guò)期啦，臨時換了一個。其實也沒(méi)多大區别啦，是吧？這(zhè)是以前一個同事(shì)介紹的Webstorm，現在他又不知道(dào)換了啥。-_- …乃們繼續用DW敲吧，我會随時用回DW的，頭部那些東西不要爲了和我的一樣(yàng)而亂改哈。）

像這(zhè)種(zhǒng)直接放在div标簽内style裡(lǐ)的樣(yàng)式稱爲嵌入樣(yàng)式。隻服務于它嵌入的那個标簽，而對(duì)其他标簽的樣(yàng)式不會産生影響。

但是，每個div都(dōu)要寫辣麼(me)長(cháng)，明明有些屬性大家都(dōu)一樣(yàng)的，還(hái)要重複寫好(hǎo)煩啊……所以接下來介紹一下簡便的寫法。

2. 内聯樣(yàng)式

第一步：提“公因式”

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

同樣(yàng)方法把前面(miàn)代碼中style裡(lǐ)共同擁有的一句提取出來得到：width:100px; height:100px; float:left;  不同的樣(yàng)式保留。

則最後(hòu)style中就隻剩下了顔色值,是不是很短了？而且大部分時間是不用每個div都(dōu)附上顔色的，我們今天隻是拿帶顔色的矩形來模拟一下，所以真正應用時僅存的顔色那一句都(dōu)會被(bèi)删掉。

但是提取出來的公共樣(yàng)式又要放到哪裡(lǐ)呢？

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

class直譯爲級、階級、種(zhǒng)類等，也就是相同的東西歸爲一類放在一起(qǐ)；我們把提取出來的公共樣(yàng)式放在class裡(lǐ)，在頭部（即head标簽内）新建一個style盒子（标簽），裝入盒子，如下：

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

2）請注意：class前面(miàn)還(hái)有一個小點 “ . ”。這(zhè)個點是class的唯一标識，浏覽器讀取到“.className”，才知道(dào)這(zhè)個東西是類名。否則你就是個單詞而已，再讀下去就是一些括号，單詞，浏覽器就懵了，說好(hǎo)的點呢？怎麼(me)不按套路出牌。

初學(xué)時類名可以随意一點，你寫成(chéng)  .a、.b、.apple、xiaoming1……都(dōu)沒(méi)事(shì)，小寫就行了，但不能(néng)是中文及以數字開(kāi)頭，也盡量不要與标簽名一樣(yàng)。後(hòu)面(miàn)會專門講到命名這(zhè)一塊。

第二步：引用

公共樣(yàng)式提出來了，也用盒子裝好(hǎo)了，但是他們之間還(hái)沒(méi)有搭上關系，這(zhè)就需要在div内引用一下寫好(hǎo)的類：

所有你想用的div都(dōu)可以引用那個類，引用的方式是在開(kāi)始标簽後(hòu)面(miàn)加上：class=”className”（這(zhè)裡(lǐ)是不需要有“.”的，但注意不要寫錯哦）。保存刷新一下：

是不是和前面(miàn)那種(zhǒng)寫法得到的效果一樣(yàng)？像這(zhè)種(zhǒng)頭部style标簽中能(néng)夠被(bèi)其他标簽通過(guò)類名來引用的樣(yàng)式，稱爲：内聯樣(yàng)式。

它的作用域就大些了，但是也僅限于當前html文件中，隻要引用了便能(néng)對(duì)引用的标簽樣(yàng)式産生影響，可複用的。常規做法有時候會加上一句“type=text/css”即爲：<style type=text/css></style>，但是我一般會省略，發(fā)現也木有啥影響，加了應該是比較規範吧。

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

小練習：

寫兩(liǎng)個不同内容的類，分别引用于兩(liǎng)個或更多div。

寫到這(zhè)裡(lǐ)發(fā)現樣(yàng)式真的好(hǎo)多要講的啊，下篇專門講吧，今天先講一點……

二、用矩形模拟網頁布局

這(zhè)個是相對(duì)比較傳統的排版方式，雖然中規中矩，形式卻蠻多的。文字、圖片、标簽、視頻播放……比較适合排版練習。

web端網頁最大的優勢在于，設計稿什麼(me)樣(yàng)，開(kāi)發(fā)就能(néng)做成(chéng)什麼(me)樣(yàng)，因爲不用像移動端考慮那麼(me)多适配問題（想想以前的寫手機端黑曆史，托腮仰天，老淚縱橫……T_T）。我給周圍轉web前端的朋友的建議都(dōu)是，先把PC的布局搞定再去寫移動設備端的會輕松一點。

1. 審“題”

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

告訴我你看上面(miàn)那張圖片看到了幾塊吧？以前畫素描的時候，老師是不是告訴過(guò)你要眯著(zhe)眼睛看光影關系，因爲人容易被(bèi)一些細節所影響，所以先鋪大面(miàn)，再摳細節，一張合格的素描才能(néng)被(bèi)很好(hǎo)的完成(chéng)。同樣(yàng)，一個網頁，無論内容再多，分布也是從大到小慢慢摳出來的。

好(hǎo)吧，說多了暈，來看看我的分法吧，這(zhè)種(zhǒng)思路可能(néng)跟你在設計時考慮怎麼(me)放東西有點相仿：

首先，頭部的tab和下方爲一塊，分好(hǎo)之後(hòu)下面(miàn)的分成(chéng)兩(liǎng)塊，再然後(hòu)……

其實前端工程師差不多是這(zhè)樣(yàng)的思路，從上到下，從左到右寫。有的會把其中一個部分寫好(hǎo)再去寫下一個，有的會一次性寫幾個大塊，後(hòu)面(miàn)再補。要不是特殊原因，你的設計稿要是不對(duì)齊,你就等著(zhe)他來質問你吧，或者他默認就給你寫對(duì)齊了。

類似C3那裡(lǐ)的藝術家模塊，工程師最稀飯了，哈哈哈……寫一段，然後(hòu)ctrl C  ctrl V，ctrl V，ctrl V……

廢話不多說，跟著(zhe)來吧……

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

現在去看的話是沒(méi)有内容的，從上到小先把A1排出來

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

紅色部分解析：

（title的樣(yàng)式那樣(yàng)寫方便看，你們也可以這(zhè)樣(yàng)寫，隻不過(guò)多了就顯得篇幅較長(cháng)。）

1）樣(yàng)式提供多種(zhǒng)書寫方式，不僅僅隻有.className,可以帶标簽名 p{}、div{}……帶标簽名則不用前面(miàn)加點，不過(guò)是針對(duì)當前html文件中所有p标簽和div标簽，所以你知道(dào)我爲什麼(me)說類名盡量不要使用跟标簽名一樣(yàng)的了吧？要是忘記寫點了，那畫面(miàn)，簡直不敢想象。像文中“ *{ } ”的*号則代表所有，margin是間距屬性，每個浏覽器的默認裡(lǐ)面(miàn)，margin是有值的，所以需要進(jìn)行一些設置。如下圖：

2）padding是内邊距，margin爲外邊距；

當他們隻有一個值時（例：padding:10px;margin：10px；），則默認爲上下左右都(dōu)爲10px

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

當有四個值時（例：padding：1px  5px  3px  6px;）,則分别針對(duì) ：上 右 下 左 ，即順時針方向(xiàng)的值，注意，不是上下左右哦。

最後(hòu)，也可單獨針對(duì)一邊設置，例：padding-left:10px;  margin-top:20px;

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

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

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

好(hǎo)了，今天就講到這(zhè)裡(lǐ)了，你們看我寫的代碼都(dōu)有點不一樣(yàng)，就說明不是一天寫的啦，時間真是不夠用呢。下篇補充樣(yàng)式内容，接著(zhe)排版。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。