IT培训网

达内论坛

 找回密码
 立即注册
搜索
查看: 1242|回复: 1

教你四分钟学会网页样式

[复制链接]

2052

主题

2251

帖子

7731

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7731
QQ
发表于 2017-6-28 13:48:19 | 显示全部楼层 |阅读模式
  比方说,你想要在自己网站上分享一个产品,或者是一个作品集,又或者仅仅只是一个灵感。在你发布到网上之前,你想让它看起来有吸引力,专业,或者至少得看起来像那么回事。那么你接下来该做什么呢?
  文本
  设计的目的是为了增强它所应用到的内容的表现形式。这看上去是显而易见的事,但内容是一个网站的主要元素,它不应该在发布后才想到要调整。
  编写的内容,就像你目前正在阅读的文章,组成了超过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 'http://fonts.googleapis.com/css?family=Roboto:300,400,500';
  @import 'http://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;
  }
  按照网页设计的基本原则,我们在短短几分钟内设计了一个像样的页面。




上一篇:讲述JavaScript 中的 for 循环的使用
下一篇:石家庄达内中山路Linux宣讲会--选择决定未来
回复

使用道具 举报

2052

主题

2251

帖子

7731

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7731
QQ
 楼主| 发表于 7 天前 | 显示全部楼层
一、模块组排版

模块组的排版样式组合的模块至少要有2个,方向可以是横向的,也可以是纵向的,用户鼠标停留在哪一个模块上,就显示哪一个模块。这种排版方式比较井然有序,能让用户清晰、明确地了解每一模块的内容。

二、竖列排版

竖列排版也叫骨骼型排版,它包括竖向的双栏、三栏、四栏以及五栏,下图中的例子就是常用的三栏排版。这种排版方式能让人感觉和谐、理性,一眼就看清所有模块的内容,非常方便。不过,选择模块时要注意每个模块之间长宽度的统一,不能像下图这样混乱。

三、通栏排版

通栏排版中每个模块之间的切换就好像网站横幅图切换一样,靠点击模块下方的小按钮来实现。这些小按钮的样式可以是数字切换、原点轮播和方块滑动。我们还可以设置通栏的页数,范围是2-6,通常页数为3-4是最好的。

四、自由方式排版

顾名思义,这种排版方式就是满足用户在一个空白区域内,随意添加模块并移动它们的位置。同时,空白区域的大小是可以用鼠标拖拽来进行放大缩小操作的,非常人性化。不过,运用这种排版时要注意避免混乱。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

IT培训网

QQ|小黑屋|手机版|cnitedu Inc. ( 豫ICP备16023996号-1 )

GMT+8, 2019-10-15 03:07 , Processed in 0.128022 second(s), 12 queries , File On.

Powered by Discuz! X3.3

© 2011-2017 cnitedu Inc.

快速回复 返回顶部 返回列表