一、樣(yàng)式大集合

之前介紹了“嵌入樣(yàng)式”及“内聯樣(yàng)式”，前者隻對(duì)自己所在的标簽起(qǐ)作用，後(hòu)者對(duì)當前頁面(miàn)所有通過(guò)了class引用了該樣(yàng)式的标簽起(qǐ)作用。内聯樣(yàng)式一般寫在頭部，但是當樣(yàng)式積少成(chéng)多，且其他html頁

面(miàn)也要引用當前頁面(miàn)的樣(yàng)式的時候（比如針對(duì)body的）就比較麻煩了。你肯定不想再寫一遍的

所以又出現了“外聯樣(yàng)式”，是的，嵌入不足，内聯不夠，所以拉個外場援助。

外聯樣(yàng)式是寫在另一個文件内的，其文件即格式爲 .css ，也稱“樣(yàng)式表”，之所以是表我想大概是因爲浏覽器要像查表一樣(yàng)根據類名來查詢吧，然後(hòu)獲取裡(lǐ)面(miàn)的樣(yàng)式内容。其寫法跟 

裡(lǐ)的是一模一樣(yàng)的，隻不過(guò)已經(jīng)有了專用的 .css文件來裝了，自然也就不需要style标簽包裝了。如果你還(hái)稍微有點暈，那下面(miàn)我就用PS來講一下吧。

這(zhè)是在html（psd）文件中“寫的”幾個div（矩形），其顔色……咳咳……是不大好(hǎo)看……

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

其中第一個div（矩形），添加（或稱更改）了樣(yàng)式，此時其他矩形是不受影響，即————嵌入樣(yàng)式

然後(hòu)我新建了一個類（組）class1，顔色疊加值爲＃e75555

好(hǎo)！！！現在我要變形啦，，哦 不，我要引用了，注意！！注意！！！把第三第四個矩形引用（放入）一下class1類（文件夾）。則可以看到03、04都(dōu)變了顔色。

其實作爲設計師的我們都(dōu)知道(dào)，如果把四個矩形都(dōu)放入class1 中，無論01之前是否有疊加顔色，四個都(dōu)將(jiāng)變爲一個顔色，也就是說，在PS中，内聯樣(yàng)式（class1-紅色）的優先級比嵌入樣(yàng)式（01已疊加

的紫色）高。BUT!!!  在html中卻是反的，反的，反的……記住哦，之所以這(zhè)麼(me)介紹隻是爲了告訴你，引用了樣(yàng)式，相當于PS裡(lǐ)的樣(yàng)式疊加。

外聯樣(yàng)式呢，即是把内聯樣(yàng)式挪到了另一個專屬它的地方，以方便管理和調用；

引入的方式是在頭部内title後(hòu)加入一句：

也就是說，隻要是html文件有引入一個寫了樣(yàng)式的CSS文件，都(dōu)是起(qǐ)作用的，所以比起(qǐ)隻管一個标簽的嵌入樣(yàng)式和管理一個html的内聯樣(yàng)式，外聯的css文件作用域就相對(duì)比較大了。但是優先級卻成(chéng)反比

。

如果一定要問爲什麼(me)，還(hái)記得前面(miàn)講的“後(hòu)來居上”嗎？無論是外聯或者内聯，一般都(dōu)是放在頭部的，而嵌入樣(yàng)式卻是緊跟标簽的，從浏覽器從上到下和從左到右的解析方式來看，同一樣(yàng)式不同值，必

定優先采用最後(hòu)讀取的樣(yàng)式。

好(hǎo)了，這(zhè)便是html中樣(yàng)式的三大引用方式。當然後(hòu)續還(hái)有使用JS添加和引用的，也基本是在這(zhè)三種(zhǒng)之上作文章。暫時用不上，在下面(miàn)的例子中，由于樣(yàng)式還(hái)沒(méi)有那麼(me)多，則還(hái)是先采用内聯的，方便查看

。

二、排版

分爲上下兩(liǎng)部分。上部分又劃分爲左右兩(liǎng)部分，今天先排聖母圖那部分吧，其他的在學(xué)習後(hòu)有興趣的童鞋可以自己排版試試。

總的來說，靜态排版分爲幾步：定大小，定位置，填内容（當然，事(shì)無絕對(duì)，隻是個人習慣，但是對(duì)于初學(xué)者來說建議暫時别另辟蹊徑），以今天要排的内容爲例大家便明了。

1. 定大小

沒(méi)有源文件，我們也是可以獲取尺寸的，比如截圖到PS裡(lǐ)去測量。

排版也像用标簽語言去完成(chéng)你對(duì)設計稿的陳述，像講故事(shì)一樣(yàng)，對(duì)自己說：這(zhè)是一個380*568px的盒子，帶背景，底部是半透明黑色盒子，裝了一些白色文本，文本類型有四種(zhǒng)，還(hái)有一個不規則形狀，兩(liǎng)

個白框裝的名字……

現在開(kāi)始用标簽來陳述：

定大小：你需要新建一個380*568的div，并給它賦予一個好(hǎo)聽名字的class。然後(hòu)在style盒子裡(lǐ)完成(chéng)樣(yàng)式。

這(zhè)裡(lǐ)爲了能(néng)看見你的div先添加了一個背景，至于爲什麼(me)不加就看不見，請翻閱前面(miàn)的教程，哈哈哈……/**/内是可以寫注釋的，對(duì)網頁無影響。url是圖片的地址，可以像浏覽文件一樣(yàng)選擇圖片，所以

不擔心會輸錯地址。有的童鞋可能(néng)會經(jīng)常遇到提示文字不出來的情況，你可以删到“：”前面(miàn)，從“：”開(kāi)始打字，或者“；”後(hòu)面(miàn)空格才會出來，總之自己多試試……

然後(hòu)保存，浏覽器打開(kāi)：

最起(qǐ)碼給我截個中間的吧，所以你得加一句來調整背景的位置：background-position:center；（center即是將(jiāng)背景放置正中間）這(zhè)樣(yàng)才算差不多了吧，當然你們随便下一張圖片當背景都(dōu)OK啦，仲基歐

巴也不錯喲~

2. 定位置

其實明顯看到被(bèi)咨詢那一排擋住了一些，因爲不在一層，原理翻閱第二篇。（讓你們學(xué)完就忘，╭(╯^╰)╮哼！）

所以得讓其浮起(qǐ)來，并使用margin把與周圍的距離隔離出來。

那麼(me)怎麼(me)去算位置呢，如果你是UI的話，應該很清楚你平時給開(kāi)發(fā)的标注是用來幹什麼(me)的吧？随便量量就造啦：

也就是加上float向(xiàng)右和頂部距離12px；就可以确定此div的位置了。

3.填内容

我們可以發(fā)現，此div唯一的内容就是背景圖片，然而這(zhè)一步定大小的時候已經(jīng)做完了，哈哈哈……

如果你說底部那個黑盒子不是内容嗎？是，但是已經(jīng)屬于另一個包含在pic_content内的盒子裡(lǐ)的内容了，包含在pic_content之内，但卻是一個特殊的個體，因爲與pic_content樣(yàng)式并不一樣(yàng)。怎麼(me)說呢

，相當于老子生了個兒子，除了有血緣（位置聯系）關系，幾乎是兩(liǎng)個不同的個體。所以接下來又要新建一個黑色盒子，定大小，定位置，填内容……這(zhè)其實是一個循環的過(guò)程，直到完成(chéng)最裡(lǐ)層的最後(hòu)

一步爲止……

好(hǎo)了，再來寫個黑盒子吧。還(hái)是按照定大小（與外層寬一樣(yàng)，高自己去量咯），定位置（底邊與外層重合，也就是margin-top的值爲外層高減去黑盒子的高）和填内容來進(jìn)行，注意層級關系，換行縮格

。

是不是有點像啦？

裡(lǐ)面(miàn)的文字，唔……有的兩(liǎng)三個字是可以不用定大小哦，因爲文字嘛，作爲設計師知道(dào)的，多少大小的文字，占的像素就爲多少，例如14px的字體，占像素就爲14*14px，當然，特别特殊的就不能(néng)保障了

。但是這(zhè)裡(lǐ)的有些文字是在有限的寬度内顯示，有換行，便說明裝文字的盒子是有寬高的，其次，在第二步定位置時，不僅要考慮上下的margin，還(hái)要考慮左右的距離。（-_-|||  事(shì)情變得好(hǎo)複雜耶）

先寫第一行吧，它與黑盒子的樣(yàng)式又不一樣(yàng)，那……就意味著(zhe)我們又要重添一個盒子啦。其實第一步定大小無非就是爲了不遮擋其他、不被(bèi)其他遮擋、不錯位……然而字體就一行，且遠遠小于黑盒子的

寬，所以可以不用管第一步哦。

這(zhè)裡(lǐ)要用到一個新标簽了 ；這(zhè)是一個主要用來裝文本的盒子，想了解其屬性的自己可以查閱W3C.

各個屬性我就不用一一介紹了吧，不過(guò)值得一提的地方是，前面(miàn)已經(jīng)介紹，不加“.”的标簽名代表指當前html文件中所有标簽都(dōu)引用該樣(yàng)式，其實是蠻危險的一種(zhǒng)做法，但是這(zhè)裡(lǐ)的p前面(miàn)還(hái)有一

個“.black” ，則特指black包含的所有p标簽，也就是對(duì)其之外的p标簽無影響。

底下還(hái)有兩(liǎng)種(zhǒng)文本，算是留給你們的作業吧，下期公布答案。其實你要是隻是看看，那真的是對(duì)不起(qǐ)你看文章花的這(zhè)點時間，下個DW去實踐一下吧。

算起(qǐ)來，這(zhè)期主要講了樣(yàng)式幾個寫法，及靜态頁的基本排版步驟，都(dōu)是經(jīng)驗之談，并非神馬标準……

來說點題外話吧！

所有的标簽裡(lǐ)面(miàn)，的使用率是相當高的；最後(hòu)當我學(xué)了js後(hòu)，幾乎就隻用div了。爲嘛呢？無論是專門用作按鈕的button标簽還(hái)是下拉專用的 s标簽……有些它們自帶的默認

樣(yàng)式是灰常醜的，需要采用一些比較麻煩的步驟才能(néng)去除或替換成(chéng)設計稿裡(lǐ)那種(zhǒng)比較漂亮的效果。

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