布局与兼容性ppt课件.ppt

《布局与兼容性ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第九章布局与兼容性CSS布局CSSHackIE条件注释语句IE6浏览器兼容性让IT教学更简单，让IT学习更有效9.1CSS布局9.2浏览器兼容性9.3常见IE6浏览器的兼容问题9.1CSS布局阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。9.1.1版心和布局流程为什么要应用布局？版心“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px等。1、确定页面的版心。2、分析页面中的行

2、模块，以及每个行模块中的列模块。3、运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。9.1.1版心和布局流程布局流程9.1CSS布局为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：9.1CSS布局以传智播客页面为例，分析页面中的各个模块。9.1.1版心和布局流程9.1.2单列布局“单列布局”是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如下图所示，即为一个“单列布局”页面的结构示意图。9.1CSS布局9.1.3两列布局“两列布局”和“一列布局”类似，只是网页内容被分为了左右两部分，通过这样的分割，打破了

3、统一布局的呆板，让页面看起来更加活跃。如下图所示，即为一个“两列布局”页面的结构示意图。9.1CSS布局9.1.4三列布局对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式。如下图所示，即为一个“三列布局”页面的结构示意图。9.1CSS布局9.1.5通栏布局为了网站的美观，网页中的一些模块，例如，头部、导航、焦点图或页面底部等经常需要通栏显示。如下图所示，即为一个应用“通栏布局”页面的结构示意图。9.1CSS布局注意:通栏布局的关键在于在相应模块的外面添加一层div，并且将外层div的宽度设置为100%。

4、9.1.6网页模块命名规范网页模块的命名需要遵循以下几个原则：9.1CSS布局避免使用中文字符命名（例如id=“导航栏”）。不能以数字开头命名（例如id=“1nav”）。不能占用关键字（例如id=“h3”）。用最少的字母达到最容易理解的意义。驼峰式命名：除了第一个单词外后面的单词首写字母都要大写（例如partOne）。帕斯卡命名：每一个单词之间用“_”连接（例如content_one）。网页模块常用的命名方式：9.1.6网页模块命名规范网页模块常用的命名：9.1CSS布局相关模块命名头header内容content/container尾footer导

5、航nav侧栏sidebar栏目column左右中leftrightcenter登录条loginbar标志logo广告banner页面主体main9.2.1CSSHack—选择器Hack为什么要调试浏览器的兼容性问题？9.2浏览器兼容性由于各浏览器对页面的解析不同，会导致页面在不同浏览器中显示的样式不一致，为了保持页面的统一，经常需要对浏览器进行兼容性问题的调试。CSS选择器HackCSS选择器Hack是指通过在CSS选择器的前面，加上一些只有特定浏览器才能识别的Hack前缀，来控制不同的CSS样式。9.2浏览器兼容性9.2.1CSSHack—选择器H

6、ack选择器Hack分为以下几类:（1）IE6及IE6以下版本识别的选择器Hack其基本语法如下：（2）IE7识别的选择器Hack其基本语法如下：*html选择器{样式代码}*+html选择器{样式代码}9.2浏览器兼容性9.2.1CSSHack—属性HackCSS属性HackCSS属性Hack是指在CSS属性名的前面，加上一些只有特定浏览器才能识别的Hack前缀。属性Hack分为以下几类:（1）IE6（含）以下版本识别的属性Hack，其基本语法如下：（2）IE7（含）以下版本识别的属性Hack，其基本语法如下：_属性:样式代码;+或*属性:样式代码

7、;9.2浏览器兼容性9.2.1CSSHack常用的选择器Hack选择器Hack写法针对于的浏览器@mediascreen9{body{background:red;}}只对IE6/7生效@mediascreen{body{background:red;}}只对IE8生效@mediascreen,screen9{body{background:blue;}}只对IE6/7/8有效@mediascreen{body{background:green;}}只对IE8/9/10有效@mediascreenand(-ms-high-contr

8、ast:active),(-ms-high-contrast:none){body{background:o