此篇文章是給初學(xué)者網(wǎng)站設(shè)計(jì)師的，一旦網(wǎng)站設(shè)計(jì)師了解了box模型是如何工作的，以及如何浮動(dòng)這些框的，那么網(wǎng)站設(shè)計(jì)師與前端工程師合作起來(lái)就會(huì)非常順暢了。為此，我們收集了大量的技巧來(lái)幫助你構(gòu)建你想要的設(shè)計(jì)。

1、絕對(duì)定位

如果你想控制某個(gè)元素在我們網(wǎng)站上的位置，絕對(duì)定位是實(shí)現(xiàn)這個(gè)目標(biāo)的關(guān)鍵。如果你認(rèn)為你的瀏覽器是一個(gè)大的包圍盒，絕對(duì)定位允許你精確地控制那個(gè)盒子里的元素會(huì)停留在哪里。使用頂部、右、底部和左側(cè)，并帶有一個(gè)像素值來(lái)控制元素停留的位置。

上面的CSS設(shè)置了一個(gè)元素的位置，從瀏覽器的頂部和右邊緣保持20px。您還可以在div中使用絕對(duì)定位。

2、選擇器

允許您選擇特定選擇器的所有元素。例如，如果您使用*p，然后添加CSS樣式，那么它將對(duì)文檔中的所有元素執(zhí)行標(biāo)記。這使得你可以很容易地將你的網(wǎng)站的各個(gè)部分作為目標(biāo)。

3、覆蓋所有的風(fēng)格

這一點(diǎn)應(yīng)該謹(jǐn)慎使用，因?yàn)槿绻銥槊考露歼@樣做，你就會(huì)發(fā)現(xiàn)自己長(zhǎng)期處于麻煩之中。但是，如果您想要為特定的元素覆蓋另一個(gè)CSS樣式，請(qǐng)使用!在css樣式之后很重要。例如，如果我想要在我的網(wǎng)站的某個(gè)特定區(qū)域的H2標(biāo)題為紅色而不是藍(lán)色，我將使用以下CSS:

4、定心

定心是很棘手的，因?yàn)樗Q于你想要集中的東西。讓我們看一下以內(nèi)容為中心的項(xiàng)目的CSS。

文本

文本以文本對(duì)齊為中心;如果你想讓它左右兩邊，用左邊或者右邊而不是中心。

內(nèi)容

一個(gè)div(或任何其他元素)可以以添加塊屬性為中心，然后使用自動(dòng)邊緣。CSS是這樣的:

我之所以把"100%"放在寬度上是因?yàn)槿绻?00%寬的，那么如果它是全寬的，就不需要定心。最好有固定的寬度，比如60%或550px等等。

5、垂直對(duì)齊(一行文本)

你會(huì)在CSS導(dǎo)航菜單中使用這個(gè)，我?guī)缀蹩梢员ＷC。關(guān)鍵是要使菜單的高度和文本的行高相同。當(dāng)我回去為客戶編輯現(xiàn)有的網(wǎng)站時(shí)，我經(jīng)常看到這種技術(shù)。這里有一個(gè)例子:

6、懸停效果

它用于按鈕、文本鏈接、站點(diǎn)的bock區(qū)域、圖標(biāo)等等。如果你想改變顏色，當(dāng)有人把鼠標(biāo)懸停在它上面時(shí)，使用相同的CSS，但是添加:鼠標(biāo)懸停在它上，改變樣式。這里有一個(gè)例子:

它會(huì)改變你的h2標(biāo)簽從黑到紅的顏色當(dāng)有人在它上面徘徊時(shí)。使用的好處是:如果它沒(méi)有改變，你就不必再次聲明字體大小或重量了。它只會(huì)改變您指定的內(nèi)容。

過(guò)渡

對(duì)于懸停效果，就像在你的網(wǎng)站上的菜單或圖片一樣，你不希望顏色太快地停止到最終結(jié)果。理想情況下，您希望逐步簡(jiǎn)化變更，這是過(guò)渡屬性發(fā)揮作用的地方。

這使得變化發(fā)生了。3秒，而不是瞬間變成紅色。這使得懸停效果更悅目，更不刺耳。

7、鏈接狀態(tài)

很多設(shè)計(jì)師都忽略了這些樣式，它確實(shí)會(huì)給訪問(wèn)者帶來(lái)可用性問(wèn)題。鏈接偽類控制所有尚未點(diǎn)擊的鏈接。訪問(wèn)的pseudo類將處理您已經(jīng)訪問(wèn)過(guò)的所有鏈接的樣式。這告訴網(wǎng)站訪問(wèn)者他們已經(jīng)在你的網(wǎng)站上，以及他們還沒(méi)有探索的地方。

8、輕松調(diào)整圖像大小以適應(yīng)

有時(shí)，你會(huì)在縮放比例的情況下，在圖像需要符合一定寬度的情況下進(jìn)行縮放。一個(gè)簡(jiǎn)單的方法是使用最大寬度來(lái)處理這個(gè)。這是一個(gè)例子:

這意味著最大的圖像可能是100%，并且高度是根據(jù)圖像寬度自動(dòng)計(jì)算的。在某些情況下，您可能還必須指定寬度為100%。

9、控制部分的元素

使用上面的圖像示例，如果您只想針對(duì)某個(gè)部分的圖像(比如您的博客)，使用一個(gè)類作為blog部分，并將其與實(shí)際的選擇器相結(jié)合。這將使您只選擇博客部分的圖像，而不是其他圖像，例如您的徽標(biāo)，或社交meia圖標(biāo)，或站點(diǎn)其他任何部分的圖像，如側(cè)邊欄。下面是CSS的外觀:

10、指導(dǎo)孩子們

我希望在我開始使用CSS的時(shí)候就知道了。這會(huì)節(jié)省我很多時(shí)間!使用>來(lái)選擇元素的直接子元素。例如:

這將選擇和樣式化所有在頁(yè)腳ID下的活動(dòng)鏈接元素。它不會(huì)選擇任何過(guò)去的活動(dòng)元素，或者頁(yè)腳中包含的其他內(nèi)容，比如純文本。這也適用于頂級(jí)導(dǎo)航元素。

特定的子元素

相信我，當(dāng)你設(shè)計(jì)清單時(shí)，這是很方便的。您只需要計(jì)算元素的數(shù)量，然后應(yīng)用該樣式。

上面的CSS目標(biāo)是列表中的第二項(xiàng)，并使其粗體、下劃線和藍(lán)色。在括號(hào)內(nèi)加上一個(gè)"n"，你可以把目標(biāo)列在每一個(gè)第二項(xiàng)上。想象一下，你可以在表格式的布局中，把所有的線條都設(shè)計(jì)成便于閱讀的樣式。CSS是:

11、將CSS應(yīng)用于多個(gè)類或選擇器

假設(shè)您想在所有圖片、博客區(qū)和側(cè)邊欄中添加一個(gè)相同的邊框。你不需要寫出相同的CSS 3次。把那些項(xiàng)目列出來(lái)，用逗號(hào)隔開。這是一個(gè)例子:

不管你是多年的網(wǎng)頁(yè)設(shè)計(jì)師，還是剛剛起步，學(xué)習(xí)如何正確地建立網(wǎng)站，似乎是一段坎坷的旅程。一旦你縮小了你想學(xué)的語(yǔ)言，你就必須學(xué)習(xí)和提高你的技能。無(wú)論你學(xué)什么，CSS都是必不可少的，但你必須掌握的技能是令人畏縮的。不過(guò)，這并不需要那么困難，特別是如果您知道一些方便且不太熟悉的CSS技術(shù)來(lái)完成任務(wù)。

12、box-sizing:border-box;

這是許多web設(shè)計(jì)人員的最愛，因?yàn)樗鉀Q了填充和布局問(wèn)題?；旧希?dāng)您設(shè)置一個(gè)特定寬度的框，并向它添加填充時(shí)，填充會(huì)增加框的大小。但是，隨著盒子大小的增加，這是被否定的，并且盒子保持了它們本來(lái)的尺寸。

13、:在

這個(gè)CSS是一個(gè)選擇器，它允許您選擇一個(gè)CSS元素并在每個(gè)元素之前插入內(nèi)容。假設(shè)你有一個(gè)網(wǎng)站，在每個(gè)H2標(biāo)簽之前，你需要特定的文本。你可以這樣設(shè)置:

這是非常方便的，特別是如果您使用的是圖標(biāo)字體。您可以在某些元素之前放置圖標(biāo)，并將其應(yīng)用于全局。

14、:在

如:在選擇器之前，您可以使用:在特定的元素上插入內(nèi)容。一個(gè)實(shí)用的用法是在博客上的每一個(gè)節(jié)選后加上"更多的閱讀"。這是你的做法。

15、內(nèi)容

內(nèi)容是一個(gè)CSS屬性，當(dāng)你需要插入一個(gè)你想要控制的元素時(shí)，它會(huì)很方便。我所見過(guò)的最常見的用法是在一個(gè)特定的地方插入一個(gè)圖標(biāo)。在上面的示例中，您可以看到必須將要插入的文本包裝在引號(hào)中。

16、CSS重置

不同的瀏覽器有默認(rèn)的CSS設(shè)置，所以必須重置這些設(shè)置，所以你有一個(gè)均勻的，一致的競(jìng)技場(chǎng)。把它想象成建一座房子，無(wú)論你是建在山的一側(cè)，在沙灘上，還是在樹木繁茂的地方，你都希望這個(gè)基礎(chǔ)是水平的。

這個(gè)CSS重置方法為你所有的網(wǎng)站設(shè)置一個(gè)標(biāo)準(zhǔn)的基礎(chǔ)，使它們?cè)贑SS的起點(diǎn)上保持一致。它移除不需要的邊框、預(yù)設(shè)的邊緣、填充、線條高度、列表樣式等等。

17、首字下沉

每個(gè)人都喜歡帽子。它讓我們想起了傳統(tǒng)的印刷書籍，它是一種很好的開始一頁(yè)內(nèi)容的方式。那首大信確實(shí)吸引了你的注意力。有一種簡(jiǎn)單的方法可以在css中創(chuàng)建一個(gè)drop cap，它使用的是pseudo元素::第一個(gè)字母。這里有一個(gè)例子:

它的作用是將信的大小設(shè)置為其他字母的3倍。它在字母周圍設(shè)置3px的空間以防止重疊，并將字母的顏色設(shè)置為紅色。

18、強(qiáng)制文本為所有大寫，所有小寫，或大寫

在所有的大寫字母中輸入一整段是很荒謬的。想象一下，當(dāng)網(wǎng)站的格式發(fā)生變化，或者它被更新時(shí)，你必須回去修復(fù)它。相反，使用以下css樣式將文本強(qiáng)制轉(zhuǎn)換成某種格式。這個(gè)css目標(biāo)是h2標(biāo)題標(biāo)簽。

h2 {首字母大寫;} -全部大寫

h2 {首字母:小寫;} -所有小寫

h2 {首字母大寫;把每個(gè)單詞的第一個(gè)字母大寫。

19、垂直高度

有時(shí)你想要一個(gè)部分填充整個(gè)屏幕，不管屏幕大小是多少。您可以使用vh或視圖高度來(lái)控制它。在它之前的數(shù)字是一個(gè)百分比，所以如果你想讓它100%地填充瀏覽器，你會(huì)把它設(shè)置為100。您可以將其設(shè)置為85%，以適應(yīng)固定的導(dǎo)航菜單。

為容器創(chuàng)建一個(gè)類，并應(yīng)用您希望它擁有的vh的數(shù)量。你可能需要調(diào)整的一件事是特定屏幕的媒體查詢值，或者像豎屏模式的手機(jī)那樣的朝向。想象一下，拉伸一幅風(fēng)景圖片以適應(yīng)豎屏模式。這看起來(lái)不太好。

20、風(fēng)格的電話聯(lián)系

如果你有一個(gè)電話號(hào)碼的鏈接，當(dāng)用戶在他們的手機(jī)上點(diǎn)擊它時(shí)，你可能很難用傳統(tǒng)的主動(dòng)鏈接選擇器來(lái)設(shè)計(jì)它。相反，使用以下CSS: