DW排版第三节_第1页
DW排版第三节_第2页
DW排版第三节_第3页
DW排版第三节_第4页
DW排版第三节_第5页
已阅读5页,还剩27页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论