PHP工具DW网页设计调试技巧

  • A+
所属分类:php工具
网页中元素错位、叠加等情况出现后,我们第一步需要要搞清楚元素的层次关系,即元素与元素之间的包含关系、各元素的位置关系,以及元素的宽度、高度、内填充、外边框等情况,以方便我们观察元素的布局。

但是,要直观的看到元素布局,单凭在Dreamweaver“设计”模式下,可能往往实现不了。那么,如何才能直观的看到这些样式效果呢?

为了能直观的看到元素的位置、大小等样式属性的效果,在调试网页时,可以给网页添加下面的几个属性。

Display:block(inline-block)

该属性可以强制不论元素是否为块状元素,都可以以块状元素方式显示,从而保证元素的高度、宽度等属性生效。

Background:#00f,即为元素设置背景颜色

该属性样式在第一个属性样式的基础上,将盒子的背景设置成蓝色,方便我们在“设计”视图中看到元素的大小、位置以及与其它元素的关系。所以,设置这个属性非常重要。

overflow:hidden

该属性可以让元素保持样式属性中设置的高度和宽度,避免内容溢出而出现错位的问题。某些情况下,这个属性就可以解决网页错位的问题。

border:1px solid #333

此属性为元素设置边框,其目的也是为了更好的看到元素。它算是一个可选项吧。注意!某些情况下,比如某个区域整体宽度一定,并排的各个小块的宽度以及各种左右内容填充、外边界加起来正好与该区域相等时,就不要用这个属性,否则可能会使页面更乱。

总之,这几个属性可以保证元素以块状元素特征显示,并保持有颜色和设置的宽度和高度,方便我们快速找到问题原因,从而解决问题。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: