DIV+CSS单列通栏布局
一、单列通栏布局的适用场景
单列通栏布局是DIV+CSS最简单、最基础的布局模式，是所有复杂布局的入门基础，整个页面只有一列垂直排列的模块，所有模块宽度和浏览器窗口同宽，从上到下依次排列，没有侧边栏、没有并列模块，结构简单清晰，适合新手入门实战练习。
单列通栏布局的适用场景非常广泛，常见的全屏官网头部、通栏banner广告、通栏导航栏、文章详情页面、全屏底部版权栏、移动端单页网站，全部采用单列通栏布局，也是所有网页都会用到的基础布局，哪怕是复杂的多列布局，头部和底部也都是单列通
单列通栏布局的结构设计非常简单，按照页面模块从上到下的顺序，依次用DIV划分独立模块，常用结构分为：页面最外层容器、头部header模块、导航nav模块、通栏banner模块、主体内容content模块、底部footer模块，每个模块都是独立的DIV，独占一行，垂直排列，无需设置浮动，无需清除浮动，只需要控制每个DIV的高度、背景色、内边距即可，零基础也能
二、单列布局前置基础：全局默认样式重置
在制作所有网页布局之前，第一步必须做全局默认样式重置，也就是清除浏览器给HTML标签设置的默认样式，不同浏览器的默认样式不同，会有默认的内外边距、默认字体、默认列表样式，导致页面在不同浏览器中显示效果不一致，出现间距错乱问题。
全局样式重置是所有网页布局的必备前置步骤，核心是通过标签选择器，统一设置页面所有标签的默认样式，清除默认内外边距，统一字体样式，清除列表默认样式，让页面在所有浏览器中显示效果完全一致，从根源解决浏览器兼容性
最常用的全局重置代码，会统一设置*通配符选择器，清除所有标签的默认内外边距，设置统一的字体样式、行高、字体颜色，给body标签设置统一的字体，清除ul、li列表的默认样式和内边距。这个重置代码可以通用所有网页布局，每次制作页面，第一时间写入这个样式，就可以避免大部分默认样式导致的布局错乱问题。
三、通栏头部与底部模块制作实战
通栏头部模块是网页的必备模块，通常包含网站logo、标题、宣传语，宽度和浏览器窗口同宽，属于标准的单列通栏布局。制作时，首先给头部DIV设置class类名，设置高度、背景色或者背景图片，通栏布局无需设置宽度，默认宽度就是100%，自动通栏显示。
如果需要让头部内部的内容居中显示，不要直接给头部DIV设置居中，而是在头部DIV内部，添加一个子级版心DIV，给版心DIV设置固定宽度，比如1200像素，这是目前主流网页的标准版心宽度，同时设置margin:0
auto; 实现水平居中，内部的logo、文字放在版心DIV内部，即可实现通栏背景、内容居中的标准头部效果。
底部版权模块和头部模块制作逻辑完全一致，同样是通栏布局，设置背景色、高度，内部添加居中版心DIV，放置版权信息、备案号、导航链接、联系方式等内容。底部模块通常需要设置顶部边框，和主体内容区分开，同时设置文字居中对齐、行高，让文字垂直
头部和底部是所有网页的固定模块，布局逻辑完全通用，学会单列通栏布局，就可以制作所有网页的头部和底部模块，后期无论制作什么类型的网站，都可以直接复用这个布局结构。
四、通栏导航与内容区域布局实战
通栏导航栏是单列布局的核心模块，同样采用通栏结构，宽度全屏，背景色统一，内部放置居中版心DIV，导航菜单列表放在版心内部。导航栏常规高度设置为60像素左右，行高和导航高度一致，让导航文字垂直居中，背景色设置为主题色，提升页面辨识度。
导航菜单使用ul无序列表制作，li列表项设置左浮动，实现横向并排排列，每个菜单之间设置左右外边距，控制间距，给a链接设置样式，鼠标悬浮时修改背景色或者文字颜色，实现交互效果。因为li设置了左浮动，所以ul父级需要清除浮动，避免高度塌陷，这是导航栏布局的核心注意点。
主体内容区域是单列布局的核心部分，分为通栏背景和居中版心，版心内部放置文章内容、标题、图片、段落文本，无需设置浮动，直接从上到下垂直排列，通过padding内边距控制内容和版心边缘的间距，通过margin控制段落之间、标题和内容之间的间距，设置统一的字体大小、行高、文字颜色，提升文章阅读体验。
单列布局全程没有复杂的样式逻辑，只需要用到盒模型基础属性、居中样式、文字样式，零基础新手按照步骤一步步制作，就可以完成完整的单列通栏页面，掌握所有基础布局逻辑，为后续多列布局打下坚实的
