仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 646|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:学CSS网页结构排查毛病的办法

[复制链接]
小魔女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:04:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。
固然扫瞄器大概存在着良多Bug,可是并非与本人感到纷歧样的时分就是呈现了Bug。发生成绩的缘故原由大概有良多种,因而制造者必要必定的办法来排查询题。
选择一个先辈的扫瞄器举行测试是明智的做法,比方对CSS2.1撑持对照好的Opera9.2、Firefox2.0大概Safari3.0,而不要利用IE6作为独一的测试扫瞄器,由于IE6的成绩是最多的,这十分倒霉于制造者(出格是初学者)了解CSS2.1的标准与判别扫瞄器的体现是不是准确。
假如在先辈的扫瞄器内测试是准确的,而在IE内有成绩,那基础上能够判断是IE的成绩。
假如在先辈的扫瞄器内的显现不准确,那末能够先辈行以下开端判别:
1.拼写是不是准确
可使用W3C的校验,大概网页编纂软件的校验功效,来反省(X)HTML文档内的标签是不是配套、嵌套按次是不是准确、空标签是不是闭合,CSS拼写是不是准确。不准确的嵌套、毛病的拼写长短经常见的毛病。
提醒:如今有良多编纂软件都能够供应(X)HTML和CSS的校验功效,包含扫瞄器对CSS属性是不是撑持等。比方:Dreamweaver8以上版本,TopStyle等软件。
提醒:Firefox中的附加软件“Firebug”是一个十分好用的工具,它不但能够反省(X)HTML、CSS和JavaScript是不是准确,还能够静态显现页面内元素的框和地位,是调试网页很好的帮助插件。读者能够会见它的官方网站下载:http://www.getfirebug.com/(英文)2.是不是有符合的DTD
在本书的其他章节里,已经不止一次地夸大过DOCTYPE的主要性,分歧的DOCTYPE间接影响扫瞄器关于(X)HTML和CSS的注释。
3.CSS属性扫瞄器是不是撑持
固然古代扫瞄器撑持尽年夜部分的CSS2.1标准和部分的CSS3标准,可是在后面的章节也先容过,有一些CSS属性还没有被扫瞄器普遍撑持,因而在某个属性没有失效的时分,请断定扫瞄器是不是撑持。
4.断绝成绩
将有成绩的中央凸起出来,比方给元素加一个夺目的边框大概背景色彩。
假如增添了边框就能够办理成绩,那末就是边距堆叠的成绩。
假如增添了背景,可是背景不显现,那末有多是特别性大概浮动元素没有闭合。
实验修正一些属性,出格是会触发IE的hasLayout的属性,判别是不是是IE罕见的Bug,读者能够拜见[16.4.3扫瞄器罕见Bug]一节。
5.创建基础测试
假如还不克不及办理成绩,则能够复制成绩文件,然后删除过剩的(X)HTML,只留下有成绩的部分。
删除(X)HTML内的正文成绩,看成绩是不是会消散。
删除元素间的空格,看成绩是不是会消散。
然后分块正文失落款式表,直到成绩消散,则刚正文失落的款式即为成绩地点。
6.办理成绩而不是办理征象
找到成绩本源的地点并办理它是终极目,而不是为了姑息体现而利用庞大的Hack来让网页“看上往很美”。不从本源上办理成绩,当扫瞄器晋级今后,大概会碰到更多的成绩。同时,Hack的时分大概会形成新的成绩的呈现,出格是触发大概制止触发IE的hasLayout属性。
换一种思绪大概也能够制止成绩的呈现,比方将元素的margin属性作废,改成设置其父元素的padding属性。
只要其实没法办理的时分,再利用Hack。

层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
山那边是海 该用户已被删除
沙发
发表于 2015-1-18 05:02:36 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
因胸联盟 该用户已被删除
板凳
发表于 2015-1-25 18:26:35 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
谁可相欹 该用户已被删除
地板
发表于 2015-2-3 15:14:43 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
变相怪杰 该用户已被删除
5#
发表于 2015-2-9 04:20:03 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
深爱那片海 该用户已被删除
6#
发表于 2015-2-26 22:26:02 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
金色的骷髅 该用户已被删除
7#
发表于 2015-3-8 18:59:33 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
分手快乐 该用户已被删除
8#
发表于 2015-3-16 13:17:52 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
莫相离 该用户已被删除
9#
发表于 2015-3-22 23:37:24 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-6 03:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表