标签：
作者：Jeremy Thomas
译者：张宝
原文地址：http://jgthms.com/web-design-in-4-minutes/
译文地址：http://123.56.108.61/web-design-in-4-minutes/
我假设你有一个产品，文件夹或者仅仅是一个想法，想发布在自己的网站上与大家分享，在这之前，你想让它看起来迷人、专业至少看上去体面些.
那么你要做的第一件事是什么?
内容（Content）
设计的目的，是为了提升你提供的内容的展示效果. 听起来可能是废话, 但是内容确实是一个网站的基本元素, 你在建站前就应该考虑它.
书写像你现在读到的段落内容, 组成了一个网站 90% 还要多的部分. 给这些文本内容添加样式的规则也有很多.
我假设你已经准备好了内容，并且刚刚建立好一个空的style.css文件, 那么你要书写的第一条规则是什么?
居中（Centering）
长文本很难解析,也很难阅读. 设置每一行可以显示字数的限制，很大程度上能提升文本墙的可读性和吸引力.
body {
margin: 0 auto;
max-width: 50em;
}
给文本块添加完样式后, 怎样给文字本身添加样式呢?
字体（Font family）
浏览器默认字体是"Times", 看上去没有吸引力(大多是因为它是“无样式”字体). 转换到 sans-serif 字体，像 "Helvetica" 或者"Arial" 可以很大程度上提升页面的观看效果.
body {
font-family: "Helvetica", "Arial", sans-serif;
}
如果你想坚持用 serif 字体, 可以试试 "Georgia".
我们已经让文本看起来更加有吸引力了, 让我们再把它变得 可读性更好一些.
间距（Spacing）
当用户觉得页面看起来“很烂”时, 通常是间距的问题. 给你的内容周围和内容本身提供间距可以增加页面的吸引力.
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
到现在为止，布局发生了很大的改观, 让我们再做一些 细微的改变.
颜色和对比（Color & contrast）
白色背景下的黑色字很刺眼. 可以为网页文本选择较为柔和的黑色让网页读起来更舒服些.
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 Fonts 服务的 "Roboto" 字体 :
@import ‘https://fonts.googleapis.com/css?family=Roboto:300,400,500‘;
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
通过文本提升网页特征后, 我还要添加更多的内容...
（这里假装有张图片）
图片和图表可以当做装饰品支持你的页面内容, 或者灵活地加入你想传递的信息.
让我们用超赞的背景图片来改变我们的网页头部。
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 框架.
感谢阅读!
@jgthms制作 @zhangbao翻译
标签：
原文地址：http://www.cnblogs.com/zhangbao/p/5764457.html
