分分鐘學會網頁樣式

首發地址：http://forums.fami2u.com/t/to...
做者：FAMI2U

比方說，你想要在本身網站上分享一個產品，或者是一個做品集，又或者僅僅只是一個靈感。在你發佈到網上以前，你想讓它看起來有吸引力，專業，或者至少得看起來像那麼回事。

• 文本

設計的目的是爲了加強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是一個網站的主要元素，它不該該在發佈後纔想到要調整。 編寫的內容，就像你目前正在閱讀的文章，組成了超過90%的網頁。爲這個文本內容添加樣式將有一個很長的路要走。 讓咱們假設你已經完成了你想發佈的內容，同時已經建立了一個空的style.css文件，什麼是你能夠寫的第一條規則？

• 居中

長文本很難解析，也所以不易閱讀。每行設置字符限制，能夠大大提升大量文本的可讀性和吸引力。

body {

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

• 字體

瀏覽器的默認字體爲Times，可看起來缺少吸引力（主要是由於它是「無樣式」字體）。切換到一個無襯線字體，如Helvetica或Arial能夠大大提升你網頁的可讀性。

body {

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

• 間隔

當用戶以爲一個頁面崩壞的時候，一般來講都是間距問題。經過在文本週圍和文本內設置適當的間距就能夠增長頁面的吸引力。

body {

  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

• 顏色和對比度

白色背景上的黑色文字看起來會比較扎眼。爲文本選擇一款較軟一點的黑色，讓頁面閱讀起來更舒服。

body {

  color: #555;
}

爲了保持一個良好的對比度，讓咱們爲重要文本選擇一個更黑暗的陰影。

h1,

h2,
strong {
  color: #333;
}

• 平衡

只須要一些額外的調整就能夠平衡頁面：

code,

pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

• 主色調

大多數品牌都有一個主色調，做爲視覺基調。在一個網頁上，這個主色調能夠用來強調交互元素，如連接。

a {

  color: #e81c4f;
}

• 輔助色

主色調能夠用更微妙的色調來補充，用於邊框，背景，甚至正文中。

body {

  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

• 自定義

因爲文本是網頁的主要內容，使用自定義字體能使頁面更加引人注目。 當你能夠嵌入本身的網頁字體或使用相似Typekit的在線服務時，讓咱們使用免費谷歌字體Roboto：

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


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

圖片和圖標既可用來做爲支持你的內容的裝飾品，還能夠在你想要傳達的信息中擔當積極部分。

讓咱們從Unsplash挑選一張漂亮的背景圖片來美化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;
}

• 彩蛋

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;
}