比方說，你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發佈到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那麼回事。那麼你接下來該做什麼呢?
文本
設計的目的是爲了增強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是一個網站的主要元素，它不應該在發佈後纔想到要調整。
編寫的內容，就像你目前正在閱讀的文章，組成了超過90%的網頁。爲這個文本內容添加樣式將有一個很長的路要走。
讓我們假設你已經完成了你想發佈的內容，同時已經創建了一個空的style.css文件，什麼是你可以寫的第一條規則?
居中
長文本很難解析，也因此不易閱讀。每行設置字符限制，可以大大提高大量文本的可讀性和吸引力。
|
1 |
body { |
|
2 |
margin: 0 auto; |
|
3 |
max-width: 50em; |
|
4 |
} |
在爲文本容器添加了樣式後，爲文本本身添加樣式可好?
字體
瀏覽器的默認字體爲Times，可看起來缺乏吸引力(主要是因爲它是“無樣式”字體)。切換到一個無襯線字體，如Helvetica或Arial可以大大提高你網頁的可讀性。
|
1 |
body { |
|
2 |
font-family: "Helvetica", "Arial", sans-serif; |
|
3 |
} |
如果你堅持要用襯線體，可以試試Georgia。
當我們讓文本更具吸引力時，也需要讓它更具可讀性。
間隔
當用戶覺得一個頁面崩壞的時候，通常來說都是間距問題。通過在文本週圍和文本內設置適當的間距就可以增加頁面的吸引力。
|
1 |
body { |
|
2 |
line-height: 1.5; |
|
3 |
padding: 4em 1em; |
|
4 |
} |
|
5 |
|
6 |
h2 { |
|
7 |
margin-top: 1em; |
|
8 |
padding-top: 1em; |
|
9 |
} |
雖然到目前爲止佈局已經大大改善，但讓我們添加更多細節處理。
顏色和對比度
白色背景上的黑色文字看起來會比較扎眼。爲文本選擇一款較軟一點的黑色，讓頁面閱讀起來更舒服。
|
1 |
body { |
|
2 |
color: #555; |
|
3 |
} |
爲了保持一個良好的對比度，讓我們爲重要文本選擇一個更黑暗的陰影。
|
1 |
h1, |
|
2 |
h2, |
|
3 |
strong { |
|
4 |
color: #333; |
|
5 |
} |
雖然大部分頁面在視覺上已經有所提升，但是一些元素依然顯得格格不入，如代碼段。
平衡
只需要一些額外的調整就可以平衡頁面：
|
01 |
code, |
|
02 |
pre { |
|
03 |
background: #eee; |
|
04 |
} |
|
05 |
|
06 |
code { |
|
07 |
padding: 2px 4px; |
|
08 |
vertical-align: text-bottom; |
|
09 |
} |
|
10 |
|
11 |
pre { |
|
12 |
padding: 1em; |
|
13 |
} |
在這一點上，你可能想讓你的頁面脫穎而出，讓它更有個性。
主色調
大多數品牌都有一個主色調，作爲視覺基調。在一個網頁上，這個主色調可以用來強調交互元素，如鏈接。
|
1 |
a { |
|
2 |
color: #e81c4f; |
|
3 |
} |
但是爲了保持平衡/協調，我們還需要一些額外的顏色。
輔助色
主色調可以用更微妙的色調來補充，用於邊框，背景，甚至正文中。
|
01 |
body { |
|
02 |
color: #566b78; |
|
03 |
} |
|
04 |
|
05 |
code, |
|
06 |
pre { |
|
07 |
background: #f5f7f9; |
|
08 |
border-bottom: 1px solid #d8dee9; |
|
09 |
color: #a7adba; |
|
10 |
} |
|
11 |
|
12 |
pre { |
|
13 |
border-left: 2px solid #69c; |
|
14 |
} |
已經改變了色調，爲什麼不一併改變外形/字體...
自定義字體
由於文本是網頁的主要內容，使用自定義字體能使頁面更加引人注目。
當你可以嵌入自己的網頁字體或使用類似Typekit的在線服務時，讓我們使用免費谷歌字體Roboto：
@import'網頁鏈接
|
1 |
@import '網頁鏈接; |
|
2 |
|
3 |
body { |
|
4 |
font-family: "Roboto", "Helvetica", "Arial", sans-serif; |
|
5 |
} |
在通過自定義字體凸顯你的個性後，增加一千個單詞又怎麼辦呢?
圖形和圖標既可用來作爲支持你的內容的裝飾品，還可以在你想要傳達的信息中擔當積極部分。
讓我們從Unsplash挑選一張漂亮的背景圖片來美化header。
|
01 |
header { |
|
02 |
background-color: #263d36; |
|
03 |
background-image: url("header.jpg"); |
|
04 |
background-position: center top; |
|
05 |
background-repeat: no-repeat; |
|
06 |
background-size: cover; |
|
07 |
line-height: 1.2; |
|
08 |
padding: 10vw 2em; |
|
09 |
text-align: center; |
|
10 |
} |
添加logo
|
1 |
header img { |
|
2 |
display: inline-block; |
|
3 |
height: 120px; |
|
4 |
vertical-align: top; |
|
5 |
width: 120px; |
|
6 |
} |
讓我們借這個機會，來提高文本風格。
|
01 |
header h1 { |
|
02 |
color: white; |
|
03 |
font-size: 2.5em; |
|
04 |
font-weight: 300; |
|
05 |
} |
|
06 |
|
07 |
header a { |
|
08 |
border: 1px solid #e81c4f; |
|
09 |
border-radius: 290486px; |
|
10 |
color: white; |
|
11 |
font-size: 0.6em; |
|
12 |
letter-spacing: 0.2em; |
|
13 |
padding: 1em 2em; |
|
14 |
text-transform: uppercase; |
|
15 |
text-decoration: none; |
|
16 |
transition: none 200ms ease-out; |
|
17 |
transition-property: color, background; |
|
18 |
} |
|
19 |
|
20 |
header a:hover { |
|
21 |
background: #e81c4f; |
|
22 |
color: white; |
|
23 |
} |
按照網頁設計的基本原則，我們在短短几分鐘內設計了一個像樣的頁面。只剩下最後一件事啦... 老司機說一句話：html css 多花點時間去記，而JS就是算法及邏輯的學習方法，本酋長後面談談咯
--希望能分享給更多想學習的人學習
WEB前端學習交流羣20 103791667