4分钟学会网页样式

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

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

文本

设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。 编写的内容，就像你目前正在阅读的文章，组成了超过90%的网页。为这个文本内容添加样式将有一个很长的路要走。 让我们假设你已经完成了你想发布的内容，同时已经创建了一个空的style.css文件，什么是你可以写的第一条规则？

居中

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

body {margin: 0 auto;max-width: 50em;}

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

字体

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

如果你坚持要用衬线体，可以试试Georgia。 当我们让文本更具吸引力时，也需要让它更具可读性。

间隔

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

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

颜色和对比度

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

body {color: #555;}

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

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

平衡

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

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

主色调

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

a 

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

辅助色

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

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

自定义字体

由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。 当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

在通过自定义字体凸显你的个性后，想让页面更加丰富多彩又怎么办呢？

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

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

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

瞧！

按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦...

网页标题：4分钟学会网页样式
标题链接：/news26/46226.html

成都网站建设公司_创新互联，为您提供品牌网站建设、网站排名、网站设计公司、响应式网站、云服务器、做网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联