比方说，你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它看起来有吸引力，专业，或者至少得看起来像那么回事。那么你接下来该做什么呢?
文本
设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事，但内容是一个网站的主要元素，它不应该在发布后才想到要调整。
编写的内容，就像你目前正在阅读的文章，组成了超过90%的网页。为这个文本内容添加样式将有一个很长的路要走。
让我们假设你已经完成了你想发布的内容，同时已经创建了一个空的style.css文件，什么是你可以写的第一条规则?
居中
长文本很难解析，也因此不易阅读。每行设置字符限制，可以大大提高大量文本的可读性和吸引力。
| 1 | body { |
| 2 | margin: 0 auto; |
| 3 | max-width: 50em; |
| 4 | } |
在为文本容器添加了样式后，为文本本身添加样式可好?
字体
浏览器的默认字体为Times，可看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体，如Helvetica或Arial可以大大提高你网页的可读性。
| 1 | body { |
| 2 | font-family: "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 | } |
在这一点上，你可能想让你的页面脱颖而出，让它更有个性。
主色调
大多数品牌都有一个主色调，作为视觉基调。在一个网页上，这个主色调可以用来强调交互元素，如链接。
| 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 '网页链接
| 1 | @import '网页链接; |
| 2 |
| 3 | body { |
| 4 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; |
| 5 | } |
在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?
图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。
让我们从Unsplash挑选一张漂亮的背景图片来美化header。
| 01 | header { |
| 02 |
|
| 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 | } |
按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦... 老司机说一句话：html css 多花点时间去记，而JS就是算法及逻辑的学习方法，本酋长后面谈谈咯
--希望能分享给更多想学习的人学习
WEB前端学习交流群20 103791667
扫一扫
3537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
