time：2016-08-06
author：wolf3c
目录：
[TOC]
假设你有一款产品、一个投资组合或仅仅是一个想法，你想要在自己的网站上分享给每个人，在你将它发布网上之前，你需要让它看起来很吸引人、很专业，或者至少能拿出手。
那么你首先需要做什么？
内容（Content）
设计 的目的是更好地帮助内容的呈现，这貌似是显而易见的，但 “内容是一个网站主要元素” 这件事情不应该是被最后关注。
被写入的内容（就像你现在读的这段），撑起了这个 web 的 90%，这种样式的文本内容将一直延续下去。
我们先假定你已经有了想要发布的内容了，却只有一个空的 style.css 文件，那么你首先需要写什么规则呢？
主体（Centering）
太长的文本行既难被解析，也难以阅读，设定每行的最大字符数将大大提升可读性和长文本的吸引力。
body {
margin: 0 auto;
max-width: 50em;
}
设定好了文本块的样式后，我们怎么设置文本自身的样式呢？
字体库（Font family）
浏览器的字体默认是 "Times"，没有一点吸引力（主要是因为它是“无样式”字体）换成一种无衬线字体（比如 "Helvetica" 或 "Arial" ）将瞬间提升网页的可观性。
body {
font-family: "Helvetica", "Arial", sans-serif;
}
如果你坚持使用有衬线字体，可以试试 "Georgia"。
文字已经很具有吸引离了，我们需要让它更具可读性。
间距（Spacing）
当用户感到一个页面支离破碎，那多半是间距的问题，无论是内容周围还是内容之中，提供一些空间总能提升页面的吸引力。
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
当布局提升了一大截后，我们需要做一下微调。
颜色和对比（Color & contrast）
白底黑字太刺眼，为主体文本选择一个浅黑色 ( a softer shade of black ) 会让阅读变得舒服很多。
body {
color: #555;
}
为了体现不同层级的对比，我们需要为重要内容选择一个更深的颜色。
h1,
h2,
strong {
color: #333;
}
我们已经提升了大多数页面的视觉感受，一些元素（比如代码块）依旧格格不入。
平衡性（Balance）
只需要略施小计就可以改善页面的平衡性。
code,
pre {
background: #eee;
}
code {
padding: 2px 4px;
vertical-align: text-bottom;
}
pre {
padding: 1em;
}
到了这一步，你大概已经想要将你的页面打上自己的标识并拿出去了。
主色（Primary color）
大多数品牌都有一个主色调作为自己的视觉标识，在一个网站上，这种特色常被用在一些主要的互动元素上，比如链接。
a {
color: #e81c4f;
}
但是为了保持平衡性，我们需要一些其他颜色。
辅色（Secondary colors）
还可以在边框、背景或正文中找一些浅色来补充标识性颜色。
body {
color: #566b78;
}
code,
pre {
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
pre {
border-left: 2px solid #69c;
}
做了这些调整以后，何不对形状做些调整呢。
自定义字体（Custom font）
既然文本是网页主要内容，那使用一个自定义字体让页面更引人注目就无可厚非了。
你既可以嵌入自己的字体，也可以使用线上服务（比如 Typekit ），我们可以使用免费的 Google 字体 服务：
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
在文本方面提升了标识度后，何不加入“千言万语” ( a thousand words )。
图形和图标既可以作为装饰品支撑你的内容，还可以作为你想要传达的信息中的一部分。
我们可以用一张来自 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;
}
我们仅仅用几分钟就靠基础的页面设计原则设计了一个像样的页面，还有最后一件事：
去原文中分享吧。
<<< 回到首页