4分钟学会网页样式

正文

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

; padding-top : 1em ; }

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

5 颜色和对比度

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

body {   
  color: #555;   
}

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

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

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

6 平衡

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

code,   
pre {   
  background: #eee;   
}   code {   
  padding: 2px 4px;   
  vertical-align: text-bottom;   
}   pre {   
  padding: 1em;   
}

在这一点上，你可能想让你的页面脱颖而出，让它更有个性。

7 主色调

大多数品牌都有一个主色调，作为视觉基调。在一个网页上，这个主色调可以用来强调交互元素，如链接。

a {   
  color: #e81c4f;   
}

但是为了保持平衡/协调，我们还需要一些额外的颜色。

8 辅助色

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