4分钟学会网页样式

正文

请到「今天看啥」查看全文

间隔

当用户觉得一个页面崩坏的时候，通常来说都是间距问题。通过在文本周围和文本内设置适当的间距就可以增加页面的吸引力。

body {   
  line-height: 1.5;   
  padding: 4em 1em;   
}   h2 {   
  margin-top: 1em;   
  padding-top: 1em;   
}

虽然到目前为止布局已经大大改善，但让我们添加更多细节处理。

5 颜色和对比度

白色背景上的黑色文字看起来会比较扎眼。为文本选择一款较软一点的黑色，让页面阅读起来更舒服。

body {   
  color: #555;   
}

为了保持一个良好的对比度，让我们为重要文本选择一个更黑暗的阴影。

h1,   
h2,   
strong {   
  color: #333;   
}

虽然大部分页面在视觉上已经有所提升，但是一些元素依然显得格格不入，如代码段。

6 平衡

只需要一些额外的调整就可以平衡页面：

code,   
pre {   
  background: #eee;   
}

请到「今天看啥」查看全文