Sunny蕭蕭：本文作為小白入門級(jí)，相對(duì)基礎(chǔ)，是寫(xiě)給現(xiàn)在想了解一點(diǎn)前端知識(shí)的設(shè)計(jì)師同行們，今天這章用設(shè)計(jì)師熟悉的PS來(lái)解釋前端相關(guān)的術(shù)語(yǔ)，通俗易懂幽默風(fēng)趣，絕對(duì)是小白入門的好教程！
往期回顧：
- 《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之小白入門篇（一）》
- 《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之征服霸道DIV篇（二）》
- 《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之網(wǎng)頁(yè)排版（附實(shí)戰(zhàn)）》
一、樣式大集合
之前介紹了“嵌入樣式”及“內(nèi)聯(lián)樣式”，前者只對(duì)自己所在的標(biāo)簽起作用，后者對(duì)當(dāng)前頁(yè)面所有通過(guò)了class引用了該樣式的標(biāo)簽起作用。內(nèi)聯(lián)樣式一般寫(xiě)在頭部，但是當(dāng)樣式積少成多，且其他html頁(yè)面也要引用當(dāng)前頁(yè)面的樣式的時(shí)候（比如針對(duì)body的）就比較麻煩了。你肯定不想再寫(xiě)一遍的
所以又出現(xiàn)了“外聯(lián)樣式”，是的，嵌入不足，內(nèi)聯(lián)不夠，所以拉個(gè)外場(chǎng)援助。
外聯(lián)樣式是寫(xiě)在另一個(gè)文件內(nèi)的，其文件即格式為 .css ，也稱“樣式表”，之所以是表我想大概是因?yàn)闉g覽器要像查表一樣根據(jù)類名來(lái)查詢吧，然后獲取里面的樣式內(nèi)容。其寫(xiě)法跟<style></style> 里的是一模一樣的，只不過(guò)已經(jīng)有了專用的 .css文件來(lái)裝了，自然也就不需要style標(biāo)簽包裝了。如果你還稍微有點(diǎn)暈，那下面我就用PS來(lái)講一下吧。
這是在html（psd）文件中“寫(xiě)的”幾個(gè)div（矩形），其顏色……咳咳……是不大好看……
其中第一個(gè)div（矩形），添加（或稱更改）了樣式，此時(shí)其他矩形是不受影響，即————嵌入樣式
然后我新建了一個(gè)類（組）class1，顏色疊加值為＃e75555
好?。?！現(xiàn)在我要變形啦，，哦 不，我要引用了，注意！！注意！??！把第三第四個(gè)矩形引用（放入）一下class1類（文件夾）。則可以看到03、04都變了顏色。
其實(shí)作為設(shè)計(jì)師的我們都知道，如果把四個(gè)矩形都放入class1 中，無(wú)論01之前是否有疊加顏色，四個(gè)都將變?yōu)橐粋€(gè)顏色，也就是說(shuō)，在PS中，內(nèi)聯(lián)樣式（class1-紅色）的優(yōu)先級(jí)比嵌入樣式（01已疊加的紫色）高。BUT!!! ?在html中卻是反的，反的，反的……記住哦，之所以這么介紹只是為了告訴你，引用了樣式，相當(dāng)于PS里的樣式疊加。
外聯(lián)樣式呢，即是把內(nèi)聯(lián)樣式挪到了另一個(gè)專屬它的地方，以方便管理和調(diào)用；
引入的方式是在頭部（<head></head>）內(nèi)title后加入一句：
<link type="text/css" ?href="?樣式文件名.css?" ?rel="stylesheet" />
也就是說(shuō)，只要是html文件有引入一個(gè)寫(xiě)了樣式的CSS文件，都是起作用的，所以比起只管一個(gè)標(biāo)簽的嵌入樣式和管理一個(gè)html的內(nèi)聯(lián)樣式，外聯(lián)的css文件作用域就相對(duì)比較大了。但是優(yōu)先級(jí)卻成反比。
如果一定要問(wèn)為什么，還記得前面講的“后來(lái)居上”嗎？無(wú)論是外聯(lián)或者內(nèi)聯(lián)，一般都是放在頭部的，而嵌入樣式卻是緊跟標(biāo)簽的，從瀏覽器從上到下和從左到右的解析方式來(lái)看，同一樣式不同值，必定優(yōu)先采用最后讀取的樣式。
好了，這便是html中樣式的三大引用方式。當(dāng)然后續(xù)還有使用JS添加和引用的，也基本是在這三種之上作文章。暫時(shí)用不上，在下面的例子中，由于樣式還沒(méi)有那么多，則還是先采用內(nèi)聯(lián)的，方便查看。
排版去咯，接著上期。
二、排版
這個(gè)網(wǎng)站的網(wǎng)址，上期介紹過(guò)了哈，自己去翻，哈哈……就是讓你們懶不成。
如上所示的部分上期我們已經(jīng)排完了，暫時(shí)是靜態(tài)的，無(wú)鼠標(biāo)經(jīng)過(guò)效果。
如上圖，分為上下兩部分。上部分又劃分為左右兩部分，今天先排圣母圖那部分吧，其他的在學(xué)習(xí)后有興趣的童鞋可以自己排版試試。
總的來(lái)說(shuō)，靜態(tài)排版分為幾步：定大小，定位置，填內(nèi)容（當(dāng)然，事無(wú)絕對(duì)，只是個(gè)人習(xí)慣，但是對(duì)于初學(xué)者來(lái)說(shuō)建議暫時(shí)別另辟蹊徑），以今天要排的內(nèi)容為例大家便明了。
1. 定大小
沒(méi)有源文件，我們也是可以獲取尺寸的，比如截圖到PS里去測(cè)量。
排版也像用標(biāo)簽語(yǔ)言去完成你對(duì)設(shè)計(jì)稿的陳述，像講故事一樣，對(duì)自己說(shuō)：這是一個(gè)380*568px的盒子，帶背景，底部是半透明黑色盒子，裝了一些白色文本，文本類型有四種，還有一個(gè)不規(guī)則形狀，兩個(gè)白框裝的名字……
現(xiàn)在開(kāi)始用標(biāo)簽來(lái)陳述：
定大小：你需要新建一個(gè)380*568的div，并給它賦予一個(gè)好聽(tīng)名字的class。然后在style盒子里完成樣式。
這里為了能看見(jiàn)你的div先添加了一個(gè)背景，至于為什么不加就看不見(jiàn)，請(qǐng)翻閱前面的教程，哈哈哈……/**/內(nèi)是可以寫(xiě)注釋的，對(duì)網(wǎng)頁(yè)無(wú)影響。url是圖片的地址，可以像瀏覽文件一樣選擇圖片，所以不擔(dān)心會(huì)輸錯(cuò)地址。有的童鞋可能會(huì)經(jīng)常遇到提示文字不出來(lái)的情況，你可以刪到“：”前面，從“：”開(kāi)始打字，或者“；”后面空格才會(huì)出來(lái)，總之自己多試試……
然后保存，瀏覽器打開(kāi)：
我去，這圖截得，來(lái)看看原圖：
最起碼給我截個(gè)中間的吧，所以你得加一句來(lái)調(diào)整背景的位置：background-position:center；（center即是將背景放置正中間）這樣才算差不多了吧，當(dāng)然你們隨便下一張圖片當(dāng)背景都OK啦，仲基歐巴也不錯(cuò)喲~
2. 定位置
其實(shí)明顯看到被咨詢那一排擋住了一些，因?yàn)椴辉谝粚樱矸喌诙?。（讓你們學(xué)完就忘，╭(╯^╰)╮哼！）
所以得讓其浮起來(lái)，并使用margin把與周圍的距離隔離出來(lái)。
那么怎么去算位置呢，如果你是UI的話，應(yīng)該很清楚你平時(shí)給開(kāi)發(fā)的標(biāo)注是用來(lái)干什么的吧？隨便量量就造啦：
也就是加上float向右和頂部距離12px；就可以確定此div的位置了。
pic_content的樣式基本就這些了：
.pic_content{ width:380px; height:568px; background:url(imges/01.jpg);background-position:center; float:left; margin-top:12px;}
3.填內(nèi)容
我們可以發(fā)現(xiàn)，此div唯一的內(nèi)容就是背景圖片，然而這一步定大小的時(shí)候已經(jīng)做完了，哈哈哈……
如果你說(shuō)底部那個(gè)黑盒子不是內(nèi)容嗎？是，但是已經(jīng)屬于另一個(gè)包含在pic_content內(nèi)的盒子里的內(nèi)容了，包含在pic_content之內(nèi)，但卻是一個(gè)特殊的個(gè)體，因?yàn)榕cpic_content樣式并不一樣。怎么說(shuō)呢，相當(dāng)于老子生了個(gè)兒子，除了有血緣（位置聯(lián)系）關(guān)系，幾乎是兩個(gè)不同的個(gè)體。所以接下來(lái)又要新建一個(gè)黑色盒子，定大小，定位置，填內(nèi)容……這其實(shí)是一個(gè)循環(huán)的過(guò)程，直到完成最里層的最后一步為止……
好了，再來(lái)寫(xiě)個(gè)黑盒子吧。還是按照定大小（與外層寬一樣，高自己去量咯），定位置（底邊與外層重合，也就是margin-top的值為外層高減去黑盒子的高）和填內(nèi)容來(lái)進(jìn)行，注意層級(jí)關(guān)系，換行縮格。
即成如下效果：
是不是有點(diǎn)像啦？
里面的文字，唔……有的兩三個(gè)字是可以不用定大小哦，因?yàn)槲淖致?，作為設(shè)計(jì)師知道的，多少大小的文字，占的像素就為多少，例如14px的字體，占像素就為14*14px，當(dāng)然，特別特殊的就不能保障了。但是這里的有些文字是在有限的寬度內(nèi)顯示，有換行，便說(shuō)明裝文字的盒子是有寬高的，其次，在第二步定位置時(shí)，不僅要考慮上下的margin，還要考慮左右的距離。（-_-||| ?事情變得好復(fù)雜耶）
先寫(xiě)第一行吧，它與黑盒子的樣式又不一樣，那……就意味著我們又要重添一個(gè)盒子啦。其實(shí)第一步定大小無(wú)非就是為了不遮擋其他、不被其他遮擋、不錯(cuò)位……然而字體就一行，且遠(yuǎn)遠(yuǎn)小于黑盒子的寬，所以可以不用管第一步哦。
這里要用到一個(gè)新標(biāo)簽了：<p> </p>?；這是一個(gè)主要用來(lái)裝文本的盒子，想了解其屬性的自己可以查閱W3C.
其樣式為：
.black p {color:white; font-size:20px; font-weight:500; float:left; margin-left:24px; margin-top:16px; font-family:"微軟雅黑"}
各個(gè)屬性我就不用一一介紹了吧，不過(guò)值得一提的地方是，前面已經(jīng)介紹，不加“.”的標(biāo)簽名代表指當(dāng)前html文件中所有標(biāo)簽都引用該樣式，其實(shí)是蠻危險(xiǎn)的一種做法，但是這里的p前面還有一個(gè)“.black” ，則特指black包含的所有p標(biāo)簽，也就是對(duì)其之外的p標(biāo)簽無(wú)影響。
最終效果如下圖：
底下還有兩種文本，算是留給你們的作業(yè)吧，下期公布答案。其實(shí)你要是只是看看，那真的是對(duì)不起你看文章花的這點(diǎn)時(shí)間，下個(gè)DW去實(shí)踐一下吧。
算起來(lái)，這期主要講了樣式幾個(gè)寫(xiě)法，及靜態(tài)頁(yè)的基本排版步驟，都是經(jīng)驗(yàn)之談，并非神馬標(biāo)準(zhǔn)……
來(lái)說(shuō)點(diǎn)題外話吧！
所有的標(biāo)簽里面，<div></div>的使用率是相當(dāng)高的；最后當(dāng)我學(xué)了javas cript后，幾乎就只用div了。為嘛呢？無(wú)論是專門用作按鈕的button標(biāo)簽還是下拉專用的 select 標(biāo)簽……有些它們自帶的默認(rèn)樣式是灰常丑的，需要采用一些比較麻煩的步驟才能去除或替換成設(shè)計(jì)稿里那種比較漂亮的效果。div可以模擬大部分的頁(yè)面控件，可以是矩形、圓角矩形、圓形、甚至三角形、梯形，這么神通廣大，還不是樣式支持……你說(shuō)呢？
「設(shè)計(jì)師自學(xué)指南系列教程」
- 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
- 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
- UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
- 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
- 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
- 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
- DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 753 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓