第9章布局与兼容性分析.ppt

让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效 ? 目录 让IT教学更简单，让IT学习更有效 ? 本章小结 第九章 布局与兼容性 CSS布局 CSS Hack IE条件注释语句 IE6浏览器兼容性 让IT教学更简单，让IT学习更有效 9.1 CSS布局 9.2 浏览器兼容性 9.3 常见IE6浏览器的兼容问题 9.1 CSS布局 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 9.1.1 版心和布局流程 为什么要应用布局？ 版心 “版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px等。 1、确定页面的版心。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。 9.1.1 版心和布局流程 布局流程 9.1 CSS布局 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 9.1 CSS布局 以传智播客页面为例，分析页面中的各个模块。 9.1.1 版心和布局流程 9.1.2 单列布局 “单列布局”是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如下图所示，即为一个“单列布局”页面的结构示意图。 9.1 CSS布局 9.1.3 两列布局 “两列布局”和“一列布局”类似，只是网页内容被分为了左右两部分，通过这样的分割，打破了统一布局的呆板，让页面看起来更加活跃。如下图所示，即为一个“两列布局”页面的结构示意图。 9.1 CSS布局 9.1.4 三列布局 对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式。如下图所示，即为一个“三列布局”页面的结构示意图。 9.1 CSS布局 9.1.5 通栏布局 为了网站的美观，网页中的一些模块，例如，头部、导航、焦点图或页面底部等经常需要通栏显示。如下图所示，即为一个应用“通栏布局”页面的结构示意图。 9.1 CSS布局 注意:通栏布局的关键在于在相应模块的外面添加一层div，并且将外层div的宽度设置为100%。 9.1.6 网页模块命名规范 网页模块的命名需要遵循以下几个原则： 9.1 CSS布局 避免使用中文字符命名（例如id=“导航栏”）。 不能以数字开头命名（例如id=“1nav”）。 不能占用关键字（例如id=“h3”）。 用最少的字母达到最容易理解的意义。 驼峰式命名：除了第一个单词外后面的单词首写字母都要大写（例如partOne）。 帕斯卡命名：每一个单词之间用“_”连接（例如content_one）。 网页模块常用的命名方式： 9.1.6 网页模块命名规范 网页模块常用的命名： 9.1 CSS布局 相关模块 命名 头 header 　　内容 content/container 　　尾 footer 　　导航 nav 　　侧栏 sidebar 　　栏目 column 　　左右中 left right center 　　登录条 loginbar 　　标志 logo 　　广告 banner 　　页面主体 main 9.2.1 CSS Hack—选择器Hack 为什么要调试浏览器的兼容性问题？ 9.2 浏览器兼容性 由于各浏览器对页面的解析不同，会导致页面在不同浏览器中显示的样式不一致，为了保持页面的统一，经常需要对浏览器进行兼容性问题的调试。 CSS 选择器Hack CSS选择器Hack是指通过在CSS选择器的前面，加上一些只有特定浏览器才能识别的Hack前缀，来控制不同的CSS样式。 9.2 浏览器兼容性 9.2.1 CSS Hack—选择器Hack 选择器Hack分为以下几类: （1）IE6及IE6以下版本识别的选择器Hack 其基本语法如下： （2）IE7识别的选择器Hack 其基本语法如下： * html 选择器{样式代码} *+html 选择器{样式代码} 9.2 浏览器兼容性 9.2.1 CSS Hack—属性Hack CSS属性Hack CSS属性Hack是指在CSS属性名的前面，加上一些只有特定浏览器才能识别的Hack前缀。 属性Hack分为以下几类: （1）IE6（含）以下版本识别的属性Hack，其基本语法如下： （2）IE7（含）以下版本识别的属性Hack，其基本语法如下： _属性:样式代码; +或*属性: 样式代码; 9.2 浏览器兼容性 9.2.1 CSS Hack 常用的选择器Ha