1.版心

  • 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是网页的版心。
  • 版心的宽度一般是960 ~ 1200像素之间
  • 版心可以是一个，也可以是多个。

2.常用布局名词

位置布局名词
顶部导航条topbar
页头header、page-header
导航nav、navigator、navbar
搜索框search、search-box
横幅、广告、宣传图banner
主要内容content、main
侧边栏aside、sidebar
页脚footer、page-footer

3.重置默认样式

很多元素都有默认样式，比如：

  1. p元素有默认的上下margin。
  2. h1 ~ h6标题也有上下margin，且字体加粗。
  3. body元素也有默认的8px外边距。
  4. 超链接有默认的字体颜色和下划线。
  5. ul元素有默认的左pading。
    等等…

    在早期，元素的默认样式，能够让我们快速绘制网页，但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认的样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式。

3.1 方案 1：使用全局选择器

1
2
3
4
* {
	margin: 0;
	padding: 0;
 }

这种方法，在简单案例中可以使用，但在实际开发中不会使用，因为*选择的是所有元素，而并不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让a元素的文字是灰色，其他元素文字是蓝色。

3.2 方案 2：reset.css

选择到具有默认样式的元素，清空其默认的样式。

经过reset后的网页，好似一张白纸，开发人员可以根据设计稿，精细的去添加具体的样式。

3.3 Normalize.css

Normalize.css是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。

  • 官网地址: http://necolas.github.io/normalize.css/
    相对于reset.css，Normalize.css有如下优点：
  1. 保护了有价值的默认样式，而不是完全去掉它们。
  2. 为大部分 HTML 元素提供了一般化的样式。
  3. 新增对HTML5元素的设置
  4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

    备注：Normalize.css的重置，和reset.css相比，更加的温和，开发时间可以根据实际情况进行选择。