資訊專欄INFORMATION COLUMN
摘要：編寫的內容，就像你目前正在閱讀的文章，組成了超過的網頁。為這個文本內容添加樣式將有一個很長的路要走。添加讓我們借這個機會，來提高文本格調。瞧按照網頁設計的基本原則，我們在短短幾分鐘內設計了一個像樣的頁面。
比方說，你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。
那么你接下來該做什么呢？
文本設計的目的是為了增強它所應用到的內容的表現形式。這看上去是顯而易見的事，但內容是一個網站的主要元素，它不應該在發布后才想到要調整。
編寫的內容，就像你目前正在閱讀的文章，組成了超過90%的網頁。為這個文本內容添加樣式將有一個很長的路要走。
讓我們假設你已經完成了你想發布的內容，同時已經創建了一個空的style.css文件，什么是你可以寫的第一條規則？
長文本很難解析，也因此不易閱讀。每行設置字符限制，可以大大提高大量文本的可讀性和吸引力。
body {
margin: 0 auto;
max-width: 50em;
}
在為文本容器添加了樣式后，為文本本身添加樣式可好？
字體瀏覽器的默認字體為Times，可看起來缺乏吸引力（主要是因為它是“無樣式”字體）。切換到一個無襯線字體，如Helvetica或Arial可以大大提高你網頁的可讀性。
body {
font-family: "Helvetica", "Arial", sans-serif;
}
如果你堅持要用襯線體，可以試試Georgia。
當我們讓文本更具吸引力時，也需要讓它更具可讀性。
當用戶覺得一個頁面崩壞的時候，通常來說都是間距問題。通過在文本周圍和文本內設置適當的間距就可以增加頁面的吸引力。
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;
}
瞧！
按照網頁設計的基本原則，我們在短短幾分鐘內設計了一個像樣的頁面。只剩下最后一件事啦...
分享愛！GitHub下載鏈接
Facebook分享鏈接
Twitter分享鏈接
如果你想學習更過網頁設計, 查看 MarkSheet, 我的免費 HTML 和 CSS 指南.
又或者你想馬上開始嘗試網頁設計, 試試 Bulma, 這是我基于Flexbox的 CSS 框架.
這篇文章介紹了基本的網頁設計過程和設計原則，一步步分解過程，讓剛開始接觸網頁設計的人，也可以很快找到感覺，希望這篇文章能在你剛接觸網頁設計不知所措的時，給到你些幫助。
感謝閱讀！
本文譯自2016年的《Web Design in 4 minutes》 - Jeremy Thomas，第一次翻譯，同時對原文有理解性改動，水平有限，歡迎提出意見。
本文轉載自：眾成翻譯
譯者：shery
鏈接：http://www.zcfy.cc/article/1237
原文：http://jgthms.com/web-design-in-4-minutes/?utm_source=tuicool&utm_medium=referral#share
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50038.html
摘要：編寫的內容，就像你目前正在閱讀的文章，組成了超過的網頁。為這個文本內容添加樣式將有一個很長的路要走。添加讓我們借這個機會，來提高文本格調。瞧按照網頁設計的基本原則，我們在短短幾分鐘內設計了一個像樣的頁面。 showImg(https://segmentfault.com/img/bVCrlL); 比方說，你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布...
摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。 十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...
摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...
閱讀 2327·2021-09-26 10:21
閱讀 2805·2021-09-08 09:36
閱讀 3070·2019-08-30 15:56
閱讀 963·2019-08-30 12:57
閱讀 934·2019-08-26 10:39
閱讀 3565·2019-08-23 18:11
閱讀 3086·2019-08-23 17:12
閱讀 1089·2019-08-23 12:18
