学习了常见的布局方案，将讲解开发一个整页的布局，从规划到制作的整页制作设计图。如图所示。

　　首先确定整页的结构该如何划分，这样有利于后期分段进行处理，大概可划分为头部、导航、广告、列表、信息、尾部等模块。

　　然后提取整页中公共部分的样式，这样做的好处是可以复用样式代码，节省代码量，提高性能。如网页中清除浮动的.clear样式就是公共样式，同样CSS reset部分也是属于公共部分的样式。

　　结构划分和公共样式都确定好后，可以先通过注释的方式，把区域确定出来，方便后续操作。示例代码如下。

　　网页模块的命名，如果没有统一的命名规范对其进行必要的约束（自由地命名），会使后续工作难以进行。因此，命名规范很重要，读者应予以重视。通常网页模块的命名需要遵循以下三个原则：

　　在网页开发中，常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。

　　l 驼峰式命名：除第一个单词后面的单词首字母都要大写，其余小写，如navOne。

　　头部采用固定布局方案，通过Photoshop工具可测量出容器大小为950px。头部包含logo和菜单两部分，其HTML结构实现，示例代码如下。

　　logo的位置可以通过盒子模型的margin值来控制。菜单的父容器采用右浮动，菜单子项采用左浮动，这样菜单可以采用整体靠右的形式进行排序。菜单项的文字与图标之间的空隙可以通过盒子模型的padding属性来调整。

　　导航部分采用混合布局方式，里面的内容是固定布局，父容器是自适应布局。导航分为左边的主导航、右侧的分享导航和下方的子导航。其实现HTML结构。

　　主导航整体左浮动，分享导航整体右浮动。这里要注意，主导航有个选中的状态，需要添加一个单独的样式，即active样式。具体代码如下。

　　广告主要以图片展示为主，HTML+CSS结构都比较简单，属于一列布局方式，具体代码如下。

　　列表属于三列固定布局，采用浮动+固定宽的方式来实现。根据不同的展现内容，采用合理的语义化标签展示。其实现HTML结构，代码示例如下。

　　代码中用到一个CSS3中操作子项的方法，即nth-of-type，这个可以针对一组元素进行不同样式的操作，此操作会在CSS3章节中进行详细讲解，这里暂时先使用一下。

　　消息区域采用两列固定布局来实现。一列靠左，一列靠右，这里HTML+CSS比较简单。

　　尾部部分与导航部分类似，同样采用混合布局方式，即内容区域采用固定布局，父容器采用自适应布局。

　　由于某些因素，不同的浏览器不能完全地采用统一的Web标准，或者说不同的浏览器对于同一个网页有不同的解析。因此会导致同一个网页在不同的浏览器下显示效果可能不同。为了保证页面的统一，往往需要对网页进行浏览器兼容问题的调试。本节将以谷歌、IE两个浏览器为例，对浏览器兼容性问题的调试方法进行详细讲解。

　　解决浏览器的兼容性问题，通常需要通过CSS样式来调试，最常用的是CSS Hack。CSS Hack是为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。CSS Hack主要分为CSS选择器Hack和CSS属性Hack两类，下面将详细介绍这两类CSS Hack。

　　CSS选择器Hack是通过在CSS选择器前，加上只有特定浏览器才能识别的Hack前缀，从而控制不同的CSS样式。针对不同版本的浏览器，选择器Hack分为以下两类：

　　编写CSS样式代码时，如果想要此样式只是针对IE6及IE6以下版本的浏览器生效，可以使用IE6及以下版本的选择器Hack，其语法格式如下。

　　编写CSS样式代码时，如果此样式只是针对IE7浏览器生效，可以使用只有IE7识别的选择器Hack，其语法格式如下。

　　CSS属性Hack是通过在CSS属性名前加上只有特定浏览器才能识别的Hack前缀，如“_size：300px”中的Hack前缀“_”只对IE6浏览器生效。下面介绍针对不同版本的浏览器，CSS属性Hack中的两类：

　　编写CSS样式代码时，如果想要此样式只对IE6及IE6以下版本的浏览器生效，可以使用IE6及IE6以下版本的CSS属性Hack，其语法格式如下：

　　编写CSS样式代码时，如果想要此样式只对IE7及IE7以下版本的浏览器生效，可以使用IE7及IE7以下版本的CSS属性Hack，其语法格式如下。

　　CSS Hack能够针对不同的浏览器编写不同的CSS样式代码，从而实现兼容最大化。但当多次重复定义CSS样式时，浏览器会默认执行最后定义的样式，因此，在使用CSS Hack时，一定要按照浏览器版本从高到低的顺序编写样式。

　　下面列举一些CSS Hack，如表10.2和表10.3所示。以方便读者查看。

　　在开发中，IE浏览器的兼容性问题比较多，经常需要对其兼容性进行调试，因此，微软官方专门提供了“IE条件注释语句”。“IE条件注释语句”是专门针对IE浏览器的Hack，对于不同版本的IE浏览器，编写方法也不同。其主要包括判断浏览器类型的条件注释语句和判断IE版本的条件注释语句。其具体介绍如下。

　　判断浏览器类型的条件注释语句用于判断浏览器类型是否为IE浏览器，其基本语法格式如下。

　　其中，第一行中的IE代表浏览器的类型，表示该条件注释语句只能被IE浏览器识别。

　　判断IE版本的条件注释语句用于判断IE浏览器的版本，其基本语法格式如下。

　　其中，第一行的IE7代表IE浏览器的版本号，表示该注释语句只能被当前IE版本浏览器识别。

　　l gt(greater than)：选择条件版本以上版本，不包含条件版本；

　　在实际开发工作中，出现浏览器兼容性问题比较多的浏览器是IE6浏览器，举一些常见的IE6浏览器兼容性问题及其解决方法。

　　在IE6浏览器中，当两个浮动元素之间加入HTML注释时，会产生多余字符。

　　IE6浏览器有默认的最小像素高度19px，因此它无法识别19px以下的高度值。

　　l 为元素定义“overflow:hidden”样式，通过这个样式，将超出的部分隐藏；

　　两种方法都可以解决IE6浏览器不能识别低于19px高度的问题，但第二种方法会妨碍字体大小的设置，因此建议使用第一种方法。

　　在制作网页时，经常出现IE6浏览器浮动的双倍外边距问题，即设置浮动元素的左外边距或右外边距时，在IE6浏览器中运行，元素对应的左外边距或右外边距是所设置值的两倍。

　　IE6浏览器中元素的左外边距是在Chrome浏览器中左外边距的两倍。IE6浏览器中的双倍外边距问题可以通过为元素定义“display：inline”CSS演示解决。例中在box2的CSS样式中添加代码如下。

　　可以看到，在上述代码中加了只针对IE6浏览器的CSS属性Hack前缀“_”，这是因为只有IE6浏览器有这个兼容问题。

　　当非浮动元素或者文本在一个浮动元素之后，运行在IE6浏览器中时，非浮动元素或文本与浮动元素之间会有3px的间距，这就是典型的IE6的3px间距问题。

　　在Chrome浏览器中正常显示，在IE6浏览器中，文本和浮动盒子之间会有3px间距。可以通过为浮动元素设置负外边距的方法解决IE6浏览器中的这个问题。在例10-17的CSS样式中提添加代码，具体代码如下。

　　一张图片插入到与其大小相同的元素中，当在IE6浏览器中显示时，图片底部会有3px的间隙。

　　（1）img标签与div标签放在同一行，如例中，将第11行和第12行代码合成一行，具体示例如下。博鱼体育