比方說(shuō)，你想要在自己網(wǎng)站上分享一個(gè)產(chǎn)品，或者是一個(gè)作品集，又或者僅僅只是一個(gè)靈感。在你發(fā)布到網(wǎng)上之前，你想讓它看起來(lái)有吸引力，專業(yè)，或者至少得看起來(lái)像那么回事。那么你接下來(lái)該做什么呢?

　　文本

　　設(shè)計(jì)的目的是為了增強(qiáng)它所應(yīng)用到的內(nèi)容的表現(xiàn)形式。這看上去是顯而易見(jiàn)的事，但內(nèi)容是一個(gè)網(wǎng)站的主要元素，它不應(yīng)該在發(fā)布后才想到要調(diào)整。

　　編寫(xiě)的內(nèi)容，就像你目前正在閱讀的文章，組成了超過(guò)90%的網(wǎng)頁(yè)。為這個(gè)文本內(nèi)容添加樣式將有一個(gè)很長(zhǎng)的路要走。

　　讓我們假設(shè)你已經(jīng)完成了你想發(fā)布的內(nèi)容，同時(shí)已經(jīng)創(chuàng)建了一個(gè)空的style.css文件，什么是你可以寫(xiě)的第一條規(guī)則?

　　居中

　　長(zhǎng)文本很難解析，也因此不易閱讀。每行設(shè)置字符限制，可以大大提高大量文本的可讀性和吸引力。

body {    margin: 0 auto;    max-width: 50em;  }

　　在為文本容器添加了樣式后，為文本本身添加樣式可好?

　　字體

　　瀏覽器的默認(rèn)字體為T(mén)imes，可看起來(lái)缺乏吸引力(主要是因?yàn)樗恰盁o(wú)樣式”字體)。切換到一個(gè)無(wú)襯線字體，如Helvetica或Arial可以大大提高你網(wǎng)頁(yè)的可讀性。

body {    font-family: "Helvetica", "Arial", sans-serif;  }

　　如果你堅(jiān)持要用襯線體，可以試試Georgia。

　　當(dāng)我們讓文本更具吸引力時(shí)，也需要讓它更具可讀性。

　　間隔

　　當(dāng)用戶覺(jué)得一個(gè)頁(yè)面崩壞的時(shí)候，通常來(lái)說(shuō)都是間距問(wèn)題。通過(guò)在文本周?chē)臀谋緝?nèi)設(shè)置適當(dāng)?shù)拈g距就可以增加頁(yè)面的吸引力。

body {    line-height: 1.5;    padding: 4em 1em;  }    h2 {    margin-top: 1em;    padding-top: 1em;  }

　　雖然到目前為止布局已經(jīng)大大改善，但讓我們添加更多細(xì)節(jié)處理。

　　顏色和對(duì)比度

　　白色背景上的黑色文字看起來(lái)會(huì)比較扎眼。為文本選擇一款較軟一點(diǎn)的黑色，讓頁(yè)面閱讀起來(lái)更舒服。

body {    color: #555;  }

　　為了保持一個(gè)良好的對(duì)比度，讓我們?yōu)橹匾谋具x擇一個(gè)更黑暗的陰影。

h1,  h2,  strong {    color: #333;  }

　　雖然大部分頁(yè)面在視覺(jué)上已經(jīng)有所提升，但是一些元素依然顯得格格不入，如代碼段。

　　平衡

　　只需要一些額外的調(diào)整就可以平衡頁(yè)面：

code,  pre {    background: #eee;  }    code {    padding: 2px 4px;    vertical-align: text-bottom;  }    pre {    padding: 1em;  }

　　在這一點(diǎn)上，你可能想讓你的頁(yè)面脫穎而出，讓它更有個(gè)性。

　　主色調(diào)

　　大多數(shù)品牌都有一個(gè)主色調(diào)，作為視覺(jué)基調(diào)。在一個(gè)網(wǎng)頁(yè)上，這個(gè)主色調(diào)可以用來(lái)強(qiáng)調(diào)交互元素，如鏈接。

a {    color: #e81c4f;  }

　　但是為了保持平衡/協(xié)調(diào)，我們還需要一些額外的顏色。

　　輔助色

　　主色調(diào)可以用更微妙的色調(diào)來(lái)補(bǔ)充，用于邊框，背景，甚至正文中。

body {    color: #566b78;  }    code,  pre {    background: #f5f7f9;    border-bottom: 1px solid #d8dee9;    color: #a7adba;  }    pre {    border-left: 2px solid #69c;  }

　　已經(jīng)改變了色調(diào)，為什么不一并改變外形/字體…

　　自定義字體

　　由于文本是網(wǎng)頁(yè)的主要內(nèi)容，使用自定義字體能使頁(yè)面更加引人注目。

　　當(dāng)你可以嵌入自己的網(wǎng)頁(yè)字體或使用類似Typekit的在線服務(wù)時(shí)，讓我們使用免費(fèi)谷歌字體Roboto：

　　@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';    body {    font-family: "Roboto", "Helvetica", "Arial", sans-serif;  }

　　在通過(guò)自定義字體凸顯你的個(gè)性后，增加一千個(gè)單詞又怎么辦呢?

　　圖形和圖標(biāo)既可用來(lái)作為支持你的內(nèi)容的裝飾品，還可以在你想要傳達(dá)的信息中擔(dān)當(dāng)積極部分。

　　讓我們從Unsplash挑選一張漂亮的背景圖片來(lái)美化header。

  header {    background-color: #263d36;    background-image: url("header.jpg");    background-position: center top;    background-repeat: no-repeat;    background-size: cover;    line-height: 1.2;    padding: 10vw 2em;    text-align: center;  }

　　添加logo

header img {    display: inline-block;    height: 120px;    vertical-align: top;    width: 120px;  }

　　讓我們借這個(gè)機(jī)會(huì)，來(lái)提高文本風(fēng)格。

header h1 {    color: white;    font-size: 2.5em;    font-weight: 300;  }    header a {    border: 1px solid #e81c4f;    border-radius: 290486px;    color: white;    font-size: 0.6em;    letter-spacing: 0.2em;    padding: 1em 2em;    text-transform: uppercase;    text-decoration: none;    transition: none 200ms ease-out;    transition-property: color, background;  }    header a:hover {    background:  #e81c4f;    color: white;  }

　　按照網(wǎng)頁(yè)設(shè)計(jì)的基本原則，我們?cè)诙潭處追昼妰?nèi)設(shè)計(jì)了一個(gè)像樣的頁(yè)面。只剩下最后一件事啦…