首发：http://forums.fami2u.com/t/topic/113
比方说，你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它看起来有吸引力，专业，或者至少得看起来像那么回事。
- 文本
设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。 编写的内容，就像你目前正在阅读的文章，组成了超过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;
}