教你5分钟设计一个网页样式

　　你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它看起来有吸引力，更加专业，下文将教给你具体的实现方法，快来一起操作吧~

　　文本

　　设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。

　　编写的内容，就像你目前正在阅读的文章，组成了超过90%的网页。为这个文本内容添加样式将有一个很长的路要走。

　　让我们假设你已经完成了你想发布的内容，同时已经创建了一个空的style.css文件，什么是你可以写的第一条规则?

　　居中

　　长文本很难解析，也因此不易阅读。每行设置字符限制，可以大大提高大量文本的可读性和吸引力。

Stream Vera Sans Mono', 'Courier New', Courier, monospace !important; word-WRAP: break-word; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none !important; HEIGHT: auto !important; FONT-SIZE: 10pt !important; VERTICAL-ALIGN: baseline !important; BORDER-TOP: 0px; TOP: auto !important; RIGHT: auto !important; FONT-WEIGHT: normal !important; BORDER-RIGHT: 0px; PADDING-TOP: 0px !important; LEFT: auto !important">

1 body {

`2`	`margin: 0 auto;`

`3`	`max-width: 50em;`

4 }

　　在为文本容器添加了样式后，为文本本身添加样式可好?

　　字体

　　浏览器的默认字体为TIMes，可看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体，如Helvetica或Arial可以大大提高你网页的可读性。

1 body {

`2`	`font-family:Apple-converted-space">` `"Helvetica",` `"Arial", sans-serif;`

3 }

　　如果你坚持要用衬线体，可以试试Georgia。

　　当我们让文本更具吸引力时，也需要让它更具可读性。

　　间隔

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

1 body {

`2`	`line-height: 1.5;`

`3`	`padding: 4em 1em;`

4 }

5

6 h2 {

`7`	`margin-top: 1em;`

`8`	`padding-top: 1em;`

9 }

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

　　颜色和对比度

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

1 body {

`2`	`color: #555;`

3 }

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

1 h1,

2 h2,

`3`	`strong {`

`4`	`color: #333;`

5 }

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

　　平衡

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

01 code,

02 pre {

`03`	`background: #eee;`

04 }

05

06 code {

`07`	`padding: 2px 4px;`

`08`	`vertical-align: text-bottom;`

09 }

10

11 pre {

`12`	`padding: 1em;`

13 }

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

#p#副标题#e#

　　主色调

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

1 a {

`2`	`color: #e81c4f;`

3 }

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

　　辅助色

　　主色调可以用更微妙的色调来补充，用于边框，背景，甚至正文中。

01 body {

`02`	`color: #566b78;`

03 }

04

05 code,

06 pre {

`07`	`background: #f5f7f9;`

`08`	`border-bottom: 1px solid #d8dee9;`

`09`	`color: #a7adba;`

10 }

11

12 pre {

`13`	`border-left: 2px solid #69c;`

14 }

　　已经改变了色调，为什么不一并改变外形/字体...

　　自定义字体

　　由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。

　　当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

　　@import ',400,500';

`1`	`@import` `',400,500';`

2

3 body {

`4`	`font-family:` `"Roboto",` `"Helvetica",` `"Arial", sans-serif;`

5 }

　　在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?

　　图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。

　　让我们从Unsplash挑选一张漂亮的背景图片来美化header。

`01`	`header {`

`02`	`background-color: #263D36;`

`03`	`background-image: url("header.jpg");`

`04`	`background-position: center top;`

`05`	`background-repeat: no-repeat;`

`06`	`background-size: cover;`

`07`	`line-height: 1.2;`

`08`	`padding: 10vw 2em;`

`09`	`text-align: center;`

10 }

　　添加logo

`1`	`header img {`

`2`	`display: inline-block;`

`3`	`height: 120px;`

`4`	`vertical-align: top;`

`5`	`width: 120px;`

6 }

　　让我们借这个机会，来提高文本风格。

`01`	`header h1 {`

`02`	`color: white;`

`03`	`font-size: 2.5em;`

`04`	`font-weight: 300;`

05 }

06

`07`	`header a {`

`08`	`border: 1px solid #e81c4f;`

`09`	`border-radius: 290486px;`

`10`	`color: white;`

`11`	`font-size: 0.6em;`

`12`	`letter-spacing: 0.2em;`

`13`	`padding: 1em 2em;`

`14`	`text-transform: uppercase;`

`15`	`text-decoration: none;`

`16`	`transition: none 200ms ease-out;`

`17`	`transition-property: color, background;`

18 }

19

`20`	`header a:hover {`

`21`	`background: #e81c4f;`

`22`	`color: white;`

23 }

　　按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。现在你可以将它发布出去啦~

教你5分钟设计一个网页样式

下一个样式

超级网页设计器

Antenna网页设计软件

网页设计师

Chrome网页样式自定义插件(Stylist)

stylist(chrome网页样式自定义插件)

教你化妆

教你画画

教你折纸

VvvebJs(网页设计工具)

WebAcappella Fx(网页设计软件)

网页模板设计工具