您的位置: 首页 > 软件教程 > HTML教程专题 > 教你5分钟设计一个网页样式

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

8.3分
出处:https://segmentfault.com/ 时间:2017-02-10

您可能感兴趣的话题: 网页样式  

核心提示:假如你想要在网站上分享一个产品,如何设计才能让它看起来更酷呢?

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

  文本

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

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

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

  居中

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

1body {
2  margin: 0 auto;
3  max-width: 50em;
4}

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

  字体

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

1body {
2  font-family: "Helvetica", "Arial", sans-serif;
3}

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

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

  间隔

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

1body {
2  line-height: 1.5;
3  padding: 4em 1em;
4}
5
6h2 {
7  margin-top: 1em;
8  padding-top: 1em;
9}

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

  颜色和对比度

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

1body {
2  color: #555;
3}

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

1h1,
2h2,
3strong {
4  color: #333;
5}

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

  平衡

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

01code,
02pre {
03  background: #eee;
04}
05

06code {
07  padding: 2px 4px;
08  vertical-align: text-bottom;
09}
10

11pre {
12  padding: 1em;
13}

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

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
JavaScript是基于对象和事件驱动并具... [详细]