第10章 布局方案与整页制作-【好程序员成长】HTML5从入门到精通

CSS布局 整页制作 浏览器兼容性 本章小结 第10章 布局方案与整页制作 CSS布局 整页制作 浏览器兼容性 目 录 CATALOUGUE 01 02 03 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握常见的布局方案 了解整页开发的流程 理解浏览器兼容性 熟悉CSS布局 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 10.1 CSS布局 10.1.1 固定布局 10.1.2 自适应布局 10.1.3 混合布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 阅读刊物时可以发现，虽然刊物中的内容很多，但经过合理的排版，版面依然清晰、易读。同理在制作网页时，如果想要网页结构清晰、有条理，也需要通过CSS布局对网页进行整理。本节将对常用的几种CSS布局进行详细讲解。 固定布局是利用容器宽为固定值的方式来实现。固定布局是最简单的布局方案，可以分为一列布局、二列布局，三列或多列布局等。 10.1 CSS布局 10.1.1 固定布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1. 固定一列布局 固定一列布局，即一行只显示一列的布局方式，容器宽度值为固定值。 10.1 CSS布局 10.1.1 固定布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 2. 固定二列布局 固定二列布局，即一行显示两列的布局方式，两列容器宽度值都为固定值，左右排列需要设置浮动属性。 10.1 CSS布局 10.1.1 固定布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3. 固定三列布局 固定三列布局，即一行显示三列的布局方式，三列宽度值都为固定值，左中右排列需要设置浮动属性。 10.1 CSS布局 10.1.1 固定布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 自适应布局是利用容器宽为百分比或auto的方式来实现，是网页中比较常见的布局方式。也可以分为一列布局、二列布局，三列或多列布局等。 1. 自适应一列布局 自适应一列布局通过给容器元素设置宽度值为百分比或auto的方式来实现。 10.1 CSS布局 10.1.2 自适应布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 2. 自适应二列布局 自适应二列布局可以通过两列都自适应和一列自适应一列固定两种布局方式实现，接下来分别介绍这两种实现自适应两列布局的方式。 （1）首先介绍二列都自适应的布局方式。 10.1 CSS布局 10.1.2 自适应布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn （2）下面介绍一列自适应一列固定的布局方式。 10.1 CSS布局 10.1.2 自适应布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 3. 自适应三列布局 自适应三列布局方案跟两个布局方案类似，但要注意让固定的列一定要抒写在HTML结构的最后，这样才能利用脱离文档流的形式来实现。 10.1 CSS布局 10.1.2 自适应布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 混合布局指的是把不同的布局方案结合到一起，来适应复杂的布局需求。具体分为如下两类。 1. 固定与自适应混合 固定与自适应混合布局是很常见的组合方式，如千锋官网的头部效果，如图所示。 图中可以看到内容区域是固定展示的，而周围的背景色是自适应展示，这种方式就是固定与自适应混合的布局方式。 10.1 CSS布局 10.1.3 混合布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 例中通过嵌套标签的方式来实现固定与自适应布局混合，父容器采用自适应布局，子容器采用固定布局，即可达到混合的目的。 10.1 CSS布局 10.1.3 混合布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 不同列混合指的是在多行展示中，可能每一行所展现的列数是不相同的，如优酷官网的主体效果，如图所示。 图中，每一行的列数都不相同，且排列也没太多规则，这里需要对每一行进行单独的布局设置。 10.1 CSS布局 10.1.3 混合布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 10.1 CSS布局 10.1.3 混合布局 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 10.2 整页制作 10.2.1 结构划分与公共样式 10.2.2 网页模块命名规范 10.2.3 头部制作 10.2.4 导航制作 10.2