《dw排版(第三节)》由会员分享，可在线阅读，更多相关《dw排版(第三节)（32页珍藏版）》请在金锄头文库上搜索。
1、1、样式表(CSS)定义和命名规范 2、盒子模型 2、css权重（优先级） 3、div+css在IE6常见到的问题 4、如何解决CSS浏览器兼容性的问题 5、优化方面对于div+css的要求 6、触发IE浏览器的haslayout事件 7、简单的css3 8、学习记录 9、Js规范整理,技能培训-div+css,1、Css命名规范,底部导航：bottomnav或者footnav 左中右导航：leftnav、centernav、rightnav摘要：zhaiyao 指南、引言：guide,CSS的命名,.left(float:left; display:inline;) .right(float
2、:right; display:inline;) 标题栏样式，使用“功能”的方式命名。 如: .news .news-list .liaofa,Css文件的名称 Global.css(公共样式) all.css(其他页面的都放这里边) 如果以后需要修改样式，需：将未修改样式的注释掉，将修改好的样式加上注释（注释格式：修改人-修改时间） 网页元素命名规范 图片命名：（父层div名称+图片性质+用途（数字）,在样式表定义一个样式的时候，可以定义id也可以定义class。 1、在CSS文件里书写时，ID加前缀“#“；CLASS用“.“ 2、id一个页面只可以使用一次；class可以多次引用。 3、I
3、D是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服； 4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。,2、盒子模型,2、css权重（优先级）,（一）如何让IE6支持png图片透明 *html #image-style background-image: none; filter:progid:
4、DXImageTransform.Microsoft.AlphaImageLoader (src=“fil ename.png“, sizingMethod=”scale“); ,2、IE6常见问题总结,当浮动元素设置margin边距时，边距会加倍。解决方法是给浮动元素加上display：inline属性。 例如： Example Source Code body margin:0; div float:left; margin-left:10px; width:200px; height:200px; border:1px solid red; 浮动后本来外边距10px,但IE解释为20px
5、,解决办法是加上display:inline,（二） IE6的margin双倍边距,当你把标签的高度设置为0-19内的数字时，IE6会一致的显示为19px高。解决方法：给标签加上overflow：hidden。,（三） IE6下空标签高度问题,（四）IE6图片下方有空隙产生,css代码： .div border:1px solid red; background:orange; img width:276px; height:110px; HTML代码： 解决办法是：imgdisplay：block； 或者 imgfloat:left; 原因：行和块的区别（常见的显示为行：spanimga)(
6、常见显示块的divuldlol) Display:inline Display:block; 以及display:inline-block(行内块元素),display:inline 1. 设置宽度width 无效。 2. 设置高度height 无效，可以通过line-height来设置。 3. 设置margin 只有左右margin有效，上下无效。 4. 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的 display:inline-block 简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈
7、递在同一行内，允许空格。,3、如何解决CSS浏览器兼容性的问题,网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方 法可以有效解决不同浏览器不同页面效果的问题呢？,1、广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。一般情况下，会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器，下面是用的较频繁的CSS Hack技巧：
8、用的最广莫过于! *+html 了， 它可以针对IE（IE 7.0能正确理解）例如：*+html .top margin:25px 25px 0 0; 2、仅IE7可以识别*+html select 当面临需要只针对IE7做样式的时候就可以采用这个 3、IE6识别* html select 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 IE均识别 * IE6识别 _ 和 *,- IE7识别 * 和 !important FF识别 !important,4、优化方面对于div+css的要求,（1）、需要注意的是，在css文件里进行
9、样式命名的时候，应尽量避免使用英文“_“作为分隔符，用英文“-“代替。 （2）、原因：搜索引擎(谷歌和百度)对英文“_“(下划线)的处理几乎相同，谷歌把它处理成空格符，类似程序中的NULL。而英文“-“(减号)则起着划分词语和短句的作用。例如关键词：madeinchina和made-in-china，谷歌认为第一个madeinchina是一个完整的词，而第二个made-in-china是由三个词组成。 （3）、命名的原则：按照意义最贴切的英文单词起名，并定义缩写的写法，如title缩写为tlt，同时在设计css样式表的时候，需要建立一个说明文档，把每次修改中加入的新的命名方式或缩写方式存入说明
10、文档中，以保证其他程序人员对源码的理解，方便后期协同工作。 (4)、标题类的栏目最好不要用图片,（4）、用结构化的元素输出内容。代码中尽量使用 这种容器结构的代码规范，避免使用当作换行符。可以不封装，即的代码可以不用结尾，从而简化代码。同时优化样式表中的定义，避免出现类似这种id长定义名的情况（参照CSS定义命名规范，搜索引擎可以根据英文的字面意思进行收录）。 例如：开发设计编程，效果上显示三行。同样的效果可以用 开发 设计 编程 来显示。,（5）、在html页面中插入的图片和链接，一定要加上标题，如” “ （6）、在代码中，类似图中用粗重大一些的字体显示的标题（大多数为栏目或专题标题，或是头
11、条文章的标题），用代码包含，例如开 发或开 发都可以。首页不建议用、之外的其他标签，如。其他重要程度低一级的标题采用包含。需要注意的是，请不要使用、这些代码。 注：页面只能用一次，只用在顶部logo。Logo必须加链接到首页。如：,5、IE浏览器的haslayout,兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用： 触发IE浏览器的haslayout 解决ie下的浮动，margin重叠等一些问题。,加红色的那里就可以在IE6、IE7、IE8正常显示效果了。 css中的zoom的作用 1、检查页面的标签是否闭合 不要小看这条，也许折腾了你两天都没有解
12、决的 CSS BUG 问题，却仅仅源于这里。毕 竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。 快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。 2、样式排除法 有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。 3、模块确认法 有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模
13、块。,4、检查是否清除浮动 其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。 5、检查 IE 下是否触发 haslayout 很 多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 On having layout（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的
14、转帖 ） 快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。 6、边框背景调试法 故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保 最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ，生活越来越美好。,6、简单的css3,CSS3，IE不再打酱油
15、 标题有点夸张，实际上这里讲的是让 IE6、7、8 也支持一些常用 CSS3 属性，比如圆角（border-radius）、阴影（box-shadow）、背景渐变（linear-gradient）。虽然 IE678 不支持 CSS3 属性，但微软还是给自己留了后路VML向量绘图技术。维基百科可以看到： Vector Markup Language（VML）是一种XML语言用于绘制向量图形（vector graphics）。1998年VML建议书由微软、Macromedia等向W3C提出审核。VML 遭到拒绝，因为Adobe、Sun等提出了 PGML 计划书。这两套标准后来合并成更具潜力的SVG
16、。 尽管VML规格一度遭到W3C的拒绝，并为大多数使用者所遗弃。微软依然将 VML 的标准规格实作到Internet Explorer 5.0+，Microsoft Office 2000以上的版本亦有支援。 国外代码大神从来不甘寂寞，写下了用 VML 技术让旧版IE支持 CSS3 的 htc 文件，类似的插件不少，有 ie-css3、pie，这里介绍 pie 的使用方法（之前用过 ie-css3 ，发现效果不理想，有时候背景不能透明，放弃了）。 IE6、7、8圆角效果：,IE6、7、8也能玩CSS3.test width:400px; height:200px; background: #EFF7FF; padding:10px; border: 2px solid #C0C0C0; border-radius: 10px; position: relative; left: 200px; top: 100px; behavior: url(PIE.htc); IE
