一篇文章带你了解HTML的网页布局结构

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>

2. 菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

例

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 内容区域

内容区域一般有三种形式:

1 列：一般用于移动端。
2 列：一般用于平板设备。
3 列：一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

例：

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
      不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明：为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。

代码很简单，希望可以帮助你学习。

容排版的存在是为了荣誉。

沟通在设计中起着至关重要的作用。这是建立用户和网站之间的明确联系，并帮助你的用户实现目标的关键。当我们谈论网页设计环境中的沟通时，这通常是指文本。排版在这个过程中起着至关重要的作用：网络中超过95％的信息是以文字的形式出现。

好的排版提高了用户的阅读积极性性，反之，差的排版会降低用户的阅读积极性。正如Oliver Reichenstein在他的文章《Web Design is 95% Typography》中所说：

优化排版就是优化可读性，可访问性，可用性！让整体的图形平衡。

换句话说：优化你的排版就是优化你的用户界面。在这篇文章中，我将提供一组规则，帮助你提高文本内容的可读性。

1. 减少不同类型字体的使用

使用超过3种不同的字体让网站看起来没有结构且不专业。记住，太多的尺寸类型和风格也可能破坏任何布局。

为了防止这种情况，尝试将字体数量限制在最小限度

一般来说，将字体数量限制在最小限度（两个很充足，通常一个就足够了），并粘贴相同的字体到整个网站。如果使用多个字体，请确保字体系基于字符宽度互相补充。以下面的字体组合为例。Georgia和Verdana（左）的组合具有相似的价值，配对的很和谐。比较与Baskerville和Impact（右）的配对，其中大大加重的Impact使与其对应的衬线字体没有光彩。

确保字体系基于字符宽度互相补充

2. 使用标准字体

字体的嵌入服务（如Google Web Fonts或Typekit)）可以为你的设计提供新鲜的和意想不到的许多有趣的字体。它们也非常容易使用。以Google为例：

选择任何字体，如Open Sans
在HTML文档的<Head>中生成代码并粘贴。
完成！

实际上，这种方法有一个很严重的问题：因为用户更熟悉标准字体，因此可以更快地读取它们。

除非你的网站对于自定义字体（如对品牌宣传或创建沉浸式体验）非常有吸引力，否则通常最好使用系统字体。最安全的方法是用一个系统的字体：Arial，Calibri，Trebuchet等。记住，好的排版可以吸引读者到内容中去，而不是排版本身。

3. 限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计，决定你的文本的宽度，它应该是一个可读性的问题。考虑Baymard Institute关于可读性和行的长度的建议：

“如果你想有一个好的阅读体验，应该每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”

图片来源：Material Design

如果行太短，视线必须经常返回，这就会打破读者的节奏。如果一行文字太长，用户的视线将很难专注于文本。

对于移动设备，应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符，而第二个使是用最佳的30-40个字符。

图片来源：Usertesting

在网页设计中，可以通过使用em或像素限制文本的宽度来实现每行最佳数量的字符。

4. 选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面需要各种大小的文本元素（按钮复制，字段标签，章节标题等）。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常重要。

Google的Roboto字体

确保你说选择的字体在较小的屏幕上清晰可辨！尝试避免使用草书的字体，例如Vivaldi（在下面的示例中）：虽然它们很漂亮，但它们很难阅读。

Vivaldi字体很难以在小屏幕上阅读

5. 使用可区分字母的字体

许多字体让相似的字形很容易混淆，特别是与“i”和“L”（如下图所示）以及在字母间距较小的空间中，例如当“r”和“n”看起来像“M”。因此，在选择你的排版时，请务必在不同的文本环境中检查你的排版，以确保不会为用户造成问题。

6. 避免所有的大写

所有大写字母：意思是文本中的所有大写字母，在不涉及阅读的上下文中很好（如首字母缩略词或标识），但是当你的信息涉及阅读时，不要强制用户阅读所有大写文字。正如Miles Tinker所说，在他的具有里程碑意义的作品中，可读性的印刷，全部大写印刷与小写排版相比，大大地延缓了用户的阅读速度。

7. 行间距的重要性

在排版中，我们有一个特殊术语，用于两行文本之间的间距（或行高）。通过增加行高，可以增加文本行之间的垂直空白空间，通常提高可读性以换取屏幕空间。作为一个规则，行高应该是字符高度的30％，以提高可读性。

好的间距有助于可读性。图片来源：Microsoft

正如Dmitry Fadeyev所指出的那样，正确地使用段落之间的空白已被证明可以将理解提高20％。使用空白的技能在于为用户提供可消化量的内容，然后剥离无关紧要的细节。

左：几乎重叠的文字。右：良好的间距有助于可读性。图片来源： Apple

8. 确保你有足够的颜色对比度

不要在文本和背景中使用相同或相似的颜色。文本越明显，用户就能更快地扫描和阅读它。 W3C建议对身体文字和图像文字的对比度如下：

与其背景相比，小写文字的对比度应至少为4.5：1。
大文字（14pt/ 常规18pt及以上）的背景对比度应至少为3：1。

这些文本行不符合颜色对比度的建议，难以根据背景颜色进行阅读。

这些文本行符合颜色对比度建议，易于阅读背景颜色。

一旦你选择了颜色，必须要在大多数设备上与真实用户进行测试。如果测试显示阅读副本有问题，那就可以确定你的用户具有完全相同的问题。

9. 避免文本为红色或绿色

色盲是一种常见的情况，特别是在男性中（8％的男性是色盲），建议使用除这些颜色以外的其他颜色来区分重要信息。也避免单独使用红色和绿色来传达信息，因为红色和绿色色盲是最常见的色盲形式。

10. 避免使用闪烁的文字

闪烁的内容可能会引发敏感个体的癫痫发作。它不仅可以引起癫痫发作，而且对于一般用户来说，这是令人讨厌且使人分心。

避免闪烁文字！

结论

排版是一件重要的事情。做出正确的排版选择可以让你的网站看上去更优雅。另一方面，糟糕的排版选择会让人分心，往往会引起对排版的注意。让排版具有可读性，可理解性和清晰度是至关重要。

内容排版的存在是为了荣誉。

排版应以不会增加用户认知负荷的方式来尊重内容。

译者：SKYUI

原文作者：Nick Babich

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可，禁止转载。

是老诗说栏目第6期

今天有小伙伴抱怨，自己做的海报太过于单调，缺少层次感。

其实所谓的单调与否，并不能单纯的去看信息的编排，或者背景的处理。

一定要结合项目的气质去看待问题。

什么是气质？就是一个事物自身透露出的特有属性，比如可爱的，文艺的，时尚的或者是稳重的，高级的等等。

所以在设计中先分清楚气质再去设计，才是首要的，而不是看别人的画面炫酷，自己就去做炫酷，气质不对，努力白费。

比如下面这个萌萌（猛猛）的小哥哥

，你感觉他散发的是什么？

荷尔蒙（尖叫声）！

这就是power，所以在选择字体的时候呢，也应该选择偏粗犷的字型，这样才能感觉出来与肌肉相似的力量感。

上面的小姐姐选择左边的小哥哥，你呢

？

其实检验一个画面气质是否合适，可以多去翻翻优秀大神的作品。

随手找了两张图，这力量感爆棚！

优秀作品

多找同类作品，我们的设计就有章可循，千万不要闭门造车。

关键你都能造车了，还做什么设计

？

接下来看看这个海报，看看它的气质是什么？

设计原稿

已经有小伙伴看出来了，这是个周年店庆的海报，画面整体的色调的感觉有点平和了，那么，我们究竟要的是什么气质呢？

对，就是刺激，消费的欲望。

所以在色调上尽可能要以暖色系为主，更能体现热情的感觉。

当然配色上也可以以对比色为主，体现碰撞性。

促销类型

以上两张是比较有代表性的促销类型的优秀作品，分别以暖色系为主和对比效果为主，信息的跳出率还是不错滴（啊，我的眼睛

）

接下来调整一下原稿的背景色，以时尚紫为主色，搭配上蓝色的光晕，使画面背景更有层次感，纯色就会相对比较单调。

另外在氛围元素的添加上也要注意，尽可能以线的形态去引导，所以在这里我添加了有渐变层次的丝带，与背景更匹配。

最后调整文字信息，比如主标题变成更粗犷更醒目的字体，倾斜效果更有动感，满减的信息与优惠券的信息都以渐变的方式搭配，整体更协调。

当然大家也可以尝试一下，用模特的形式去改稿，出发点不同，结果就不尽相同。

最后的最后，

想看高清视频做练习的小伙伴

点击阅读原文，领取本期练习素材

https://huke88.com/course/61953.html

在线咨询

上一篇：Web前端：CSS 轻松搞定标签(元素)居中问题
下一篇：JavaScript正则深入以及10个非常有意思的正则实战

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商