微信号:programmer_club

介绍:程序员第一自媒体,与你探讨码农人生路上遇到的各类泛技术话题,定期为你推荐码农人生思考、感悟以及启迪!

4分钟学会网页样式

2017-05-03 22:13 Jeremy Thomas

作者:Jeremy Thomas

原文:Web Design in 4 minutes

译者:shery

译文:www.zcfy.cc/article/web-design-in-4-minutes-1237.html

点击文末阅读原文即可前往) 


比方说,你想要在自己网站上分享一个产品,或者是一个作品集,又或者仅仅只是一个灵感。在你发布到网上之前,你想让它看起来有吸引力,专业,或者至少得看起来像那么回事。


那么你接下来该做什么呢?


文本


设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事,但内容是一个网站的主要元素,它不应该在发布后才想到要调整。 编写的内容,就像你目前正在阅读的文章,组成了超过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;

}

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



自定义字体


由于文本是网页的主要内容,使用自定义字体能使页面更加引人注目。 当你可以嵌入自己的网页字体或使用类似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;

}

瞧!


按照网页设计的基本原则,我们在短短几分钟内设计了一个像样的页面。




微信公众号内回复数字“1”

小编拉你进粉丝微信群

不是在文章评论里回复

 
程序员之家 更多文章 你所不知道的 Console 花点时间聊聊关于计算机网络的事 如何让快速地"偷css"? 大型网站技术架构 如果只有一个月的时间学 iOS 开发,我们该做些什么?
猜您喜欢 给女朋友的 iOS 开发教程 10 UITableViewCell 读《图解密码技术》(一):密码 推荐一把好椅子,程序员必买! 据说程序员写完代码是这个样子,99%的人都中枪了 番茄工作法体验总结(The Pomodoro Technique)