用四分钟创建一个网页

假如你想在你自己的网站上给大家分享一个产品、作品集或者一个想法。在你把网页发布到互联网之前，你想要让它看起来吸引人、更专业或者仅仅是得体大方，

那么你需要做的第一件事是什么呢？

内容

设计的目标是增强内容的表现力。看起来好像很简单，但是内容作为网站的基本元素，不应该留到最后才确定。

文字内容，比如你正在看的这段话，组成了网站超过 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;
}

改变了颜色，为什么不再变变形呢？

自定义字体

既然文本是网页上最主要的部分，用自定义字体就可以让页面更具识别度。

你可以嵌入自己制作的 Webfont 或者使用在线服务。比如 Typekit，我们试试看使用 Google Fonts 上的 "Roboto" 字体:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

在通过文本增强识别度之后，不如我们再加点超越文字的东西……

由于文件较大，中文对 Webfont 的支持并不好，不过现在可以通过字蛛等工具来构建中文的 Webfont，或者通过 Justfont 等中文 Webfont 服务来实现

另外由于某些原因，国内不能支持 Google Fonts，可以使用这个公共库来实现
译者注

图形和图标既可以用作装饰支撑你的内容，或者让它作为你想传达的信息的一部分。

让我们用一张来自 Unsplash 的好看的背景图来美化网页的头部。

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;
}

看下效果吧！

我们在几分钟之内就根据一些网页设计的原则，创建了一个得体的页面。我们只剩下最后一件事了……

内容

居中

字体

间距

颜色和对比

平衡

基础色

辅助色

自定义字体

点赞和分享吧！