DW排版第三节

1、1.样式表(css)定义和命名规范2。盒子模型2。CSS权重(优先级)3。IE6 4中div css的常见问题。如何解决CSS浏览器的兼容性问题。优化6中div css的要求。有一个触发IE浏览器7布局事件。简单的css3 8。学习记录9。Js规范整理。技能培训-部门css，1。Css命名标准，bottomnavigation: bottom nav或foot nav left middle right navigation:left nav，centernav，right nav summary:jaiyao guide，introduction: guide，CSS命名。左侧(浮动： le

2、ft；display:inline)。右侧(浮动：右侧；display:inline)标题栏样式，由“function”命名。例如，news 。新闻列表。在这里，CSS文件的名称是Global.css(公共样式)all.css(所有其他页面都放在这里)。如果将来需要修改样式，您应该：注释掉未修改的样式。注释修改后的样式(注释格式：修改-修改时间)。网页元素的命名标准。图片名称：(父分区名称、图片属性、用途(编号)。当样式表定义样式时，您可以定义id或类。1.当写入CSS文件时，前缀ID为“# ”;CLASS使用“.”2、身份证一页只能使用一次；类可以被多次引用。3.ID是一个标签，用来区分不同

3、的结构和内容，就像名字一样。如果一个房间里有两个同名的人，就会产生混乱；阶级是一种风格，可以放在任何结构和内容，就像一件衣服；4.从概念上讲，它是不同的：id首先找到结构/内容，然后定义它的样式；类首先定义一个样式，然后将其应用于多个结构/内容。目前，浏览器还允许多个相同的标识，可以正常显示。但是，当您需要用JavaScript通过标识来控制div时，就会出现错误。2，盒子模型，2，css权重(优先级)，(1)如何使IE6支持png图片透明* html #图像风格背景-图像：无；filter : progid : ximagettransform。微软. AlphaImageLoader(sr

4、c= fil ename . png ，SizigMethod= scale )；，2。IE6中常见问题的总结。为浮动元素设置边距时，边距将翻倍。解决方法是将display:inline属性添加到浮动元素中。示例：示例源代码正文 margin:0 div float:leftmargin-left :10 px；宽度width:200px高度：200px。border:1px纯红；浮动后，外部边距最初为10像素，但IE将其解释为20像素。解决方案是添加display:inline，以及(2)将IE6的边距增加一倍。当您将标签的高度设置为0-19之间的数字时，IE6将显示为19px高。解决方法：

5、将溢出：隐藏添加到标签。(3)IE6下空标签的高度，(4)IE6图片下有一个间隙，css代码：div border:1px纯红；background:orange橙色； img width:276pxheight:110px HTML代码：解决方案是：img display:block；或imgfloat:left。原因：行和块之间的差异(常见显示是行(常见显示块的div)显示：内嵌显示：块；显示：内嵌块，显示：内嵌1。设置宽度宽度无效。2.设置高度无效，可以通过行高来设置。3.设置边距仅对左右边距有效，但对上下边距无效。4.设置填充仅对左右填充有效，但对上下填充无效。请注意，元素的范围扩大了

6、，但对元素周围的内容没有影响。display:inline-block只是将对象呈现为inline对象，但是对象的内容呈现为block对象。相邻的内联对象将呈现在同一行上，允许有空格。3.如何解决CSS浏览器的兼容性问题，网页设计中遇到的最大问题之一是网页与不同浏览器的兼容性问题，因为主流浏览器如IE 6.0/IE 7.0/firefox 2/Opera 9对CSS的解析几乎不一样，导致设计的网页效果不同，那么有什么方法可以有效解决不同浏览器的不同页面效果问题呢？1.广泛使用的方法是CSS Hack，即使用特殊的CSS定义在不同的浏览器中显示网页的设计风格，并为不同的浏览器编写不同的CSS以最

7、大限度地与浏览器兼容。在正常情况下，浏览器的IE 6.0/IE 7.0/火狐2.0将被考虑在内。以下是常用的CSS黑客技巧：最广泛使用的是！* html，它可以针对IE(IE 7.0可以正确理解)，例如： 2。只有IE7可以识别* html选择当需要为IE7制作样式时，可以使用。3.IE6可以识别* html选择这个地方应该特别注意这样一个事实，许多博客都是用IE6的HACK写的，但是IE5.x也可以识别这个HACK。其他浏览器无法识别它。IE6识别* IE6识别_和*，- IE7识别*和！重要的FF识别！重要，4。从优化的角度来看，对设计文档的要求是：(1)应该注意，在css文件中命名样式时

8、，应该避免使用英文“_”作为分隔符，而应该使用英文“-”。(2)原因：搜索引擎(谷歌和百度)对英语“_”(下划线)几乎一视同仁，谷歌将其视为一个空格字符，在程序中类似于空。英语-(减号)在区分单词和短句中起作用。例如，关键词：中国制造和中国制造，谷歌认为第一个中国制造是一个完整的单词，而第二个中国制造是由三个单词组成的。(3)命名原则：用最恰当的含义命名英语单词，并定义缩写，例如，title缩写为tlt。同时，在设计css样式表时，需要建立一个描述文档，并在描述文档中存储每次修改时添加的新的命名方法或缩写，以保证其他程序员对源代码的理解，便于以后的协同工作。(4)标题类别的列最好不要使用图片，

9、以及(4)输出带有结构化元素的内容。尽量在代码中使用容器结构的代码规范，并避免将其用作新的行字符。它可以被解包，也就是说，代码.可以没有结尾，从而简化了代码。同时，对样式表中的定义进行了优化，避免了id有长定义名的情况(参照CSS定义命名标准，搜索引擎可以根据英文的字面意思来包含它)。例如，开发设计程序实际上显示了三行代码。开发和设计编程也能显示出同样的效果。(5)插入到html页面中的图片和链接必须添加标题，如 (6)。在代码中，与图片中以较粗字体显示的标题相似的标题(大多数是列标题或主题标题，或者标题文章的标题)应该包括在代码中，例如开发或开发。不建议在首页使用、和以外的标签，例如。其他重

10、要性较低的标题采用包含。请注意，请不要使用、这些代码。注意：该页面只能使用一次，只能在顶部标识上使用。徽标必须链接到主页。例如：5。ie浏览器的haslayout兼容IE6、IE7和IE8浏览器，经常遇到一些问题，可以通过zoom:1解决。它具有以下功能：触发IE浏览器的哈希布局，解决IE下的浮动和边距重叠等问题。加红色可以在IE6、IE7、IE8正常显示效果。放大css 1的功能。检查页面标签是否关闭。不要低估这篇文章。它可能已经抛出了你两天没有解决的CSS BUG问题，但它只来自这里。毕节页面的模板一般都是开发嵌套的，很容易产生这样的问题。快速提示：您可以使用Dreamweaver打开文件

11、进行检查。一般来说，没有封闭的标签，但黄色背景会突出显示。2.样式排除方法一些复杂的页面可能会加载N个外部CSS文件，所以要一个一个删除CSS文件，找到由错误触发的特定CSS文件，并缩小锁定范围。对于刚刚锁定的CSS样式文件，逐行删除特定的样式定义，并定位特定的触发器样式定义甚至特定的触发器样式属性。3.模块确认方法有时我们可以从页面的HTML元素开始。删除页面中不同的超文本标记语言模块，找到引发问题的超文本标记语言模块。4.检查浮动是否被清除事实上，许多CSS BUG问题都是由不清除浮动引起的。有必要养成清除漂浮物的好习惯。建议使用清除浮动的方法，不要使用额外的HTML标记(尽量避免使用溢出

12、：隐藏；类似的方法清除浮动，会有太多的限制)。5.检查是否在IE下触发了haslayout。工业工程下的许多复杂的CSS错误都与工业工程独特的散列布局密切相关。熟悉和理解haslayout可以事半功倍地处理复杂的CSS BUG。建议阅读由old9翻译的On having layout(如果你不能爬上伟大的GFW，你可以阅读蓝色的回复)。快速提示：如果haslayout被触发，在IE的调试工具IE开发者工具栏的属性中，haslayout的值将是-1。6.框架背景的调试方法被命名为设置明显的框架或背景(通常为黑色或红色)进行调试。这种方法是调试CSS bug最常用的方法之一，它仍然适用于复杂的BU

13、G。经济环保。最后，我想强调的是，培养良好的写作习惯，减少额外的标签，尝试语义化和符合标准，实际上可以为我们减少很多额外的复杂的CSS BUG，而且更多时候，我们实际上给自己制造了麻烦。我希望你远离虫子，过上更好的生活。6。简单的css3，CSS3，IE不再打酱油了。标题有点夸张。事实上，据说IE6、7和8也支持一些常见的CSS3属性，如边界半径、盒阴影和线性渐变。虽然IE678不支持CSS3属性，但微软已经在VML矢量绘图技术上走了自己的路。维基百科可以看到矢量标记语言(VML)是一种用于绘制矢量图形的XML语言。1998年，VML的提案被提交给W3C，由微软和Macromedia审查。由于

14、奥多比、孙等人提出了计划而遭到拒绝。这两套标准后来被合并到具有更大潜力的SVG中。尽管VML规范曾经被W3C拒绝，并被大多数用户抛弃。微软仍然在因特网浏览器5.0中实现VML的标准规范，并且微软办公室2000和更高版本也支持它。外国代码神从不孤独。他们写下了使用VML技术的htc文件，使旧的IE支持CSS3。有许多类似的插件，包括ie-css3和pie。在这里，我们介绍如何使用馅饼(我以前使用ie-css3，但发现效果不理想，有时背景不能透明，所以我放弃了)。IE6、7和8的圆角效果：CSS3.test width:400px也可以在IE6、7和8中播放；高度：200px。background: # EFF7FFpadding:10pxborder: 2px固体# C0C0C0border-radius : 10p