您需要AI互联网
顾问提供专业咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画 · 游戏 · 年度运营
大模型定制 · WEB3 · 元宇宙 · 区块链 · 高端网站建设 · 小程序 · APP · 微信 · H5 · 电商
网站设计之CSS的布局规则和调试方法
2017.05.11
  现在的网站设计基础上离不开CSS的使用,而这项技术也成为了网站设计师必备技能之一。CSS在网站设计中的功能是:能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  那么在网站设计中CSS设计的布局规则是怎么样的,在进行调试时可以采取哪些方法比较合理呢?这些问题都是网站设计中想要利用好了CSS设计必须要解决的问题。下面分形科技小编就为大家一一解答。

  网页布局中CSS设计的常用规则

  规则一,CSS文件的链接方式

  1、附加链接:外部CSS文件

  2、导入CSS常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:

  ①类比如.RedText .BlueText和.BigText等等;


  ②标签针对原有 HTML 标签做的重新CSS定义;


  ③高级伪类、定义了ID元素,以及综合性定义。


  规则二,CSS 规则的应用

  1、只有“类”样式才需要应用,class= xxxx任何元素都可以应用类。

  2、class与id区别

  3、标签应用一般对于“bodi”标签一次性使用,对于诸如“li td”等在页面中重复性比较大的标签不推荐定义。

  4、高级多运用,定义“#id li”比定义“li”要好得多。

  规则三,CSS规则的执行顺序

  1、依照CSS代码的执行先后顺序

  2、如果有重复的规则,依照后执行的定义

  3、最终规则是多个定义规则的综合

  规则四,高级规则定义

  1、对于不同表格的文字样式定义,不同表格使用不同ID使用类样式定义;


  2、一页中的多种超级链接样式定义;


  3、多个相同规则不同对象的 CSS 共同定义;


  4、对于同一对象定义的多种CSS方式考虑哪种更科学(扩展性和代码精简性)。

  网页布局中CSS设计的调试方法

  方法一,检查CSS是否书写正确

  检查一下有无拼写错误、是否忘记结尾的等。

  方法二,检查HTML元素是否有拼写错误、是否忘记结束标记


  可以用dreamweaver的验证功能检查一下有无错误。即使是老手也经常会弄错div的嵌套关系。


  方法三,利用border属性确定出错元素的布局特性


  为元素添加border属性确定元素边界,错误原因即水落石出。


  方法四,float元素相关的调试

  1、float元素的父元素不能指定clear属性

  2、IE的著名的bug,倘若不知道就会走弯路。IE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。

  3、float元素的宽度之和要小于100%

  请保证宽度之和小于99%,如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。

  4、是否重设了默认的样式?

  最好首先将全体的margin、padding设置为0、列表样式设置为none等,如margin、padding属性等。

  5、float元素必须指定width属性

  不管float元素的内容如何,一定要为其指定width属性,因为很多浏览器在显示未指定width的float元素时会有bug,另外指定元素时尽量使用em而不是px做单位。

  方法五,用删除法确定错误发生的位置

  如果错误影响了整体布局,逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。 
400-6446-365 / 010-64928252 我想要个更针对我需求的方案
让决策变的简单
好的开始是成功的一半
请输入关键字