CSS网页布局编码小技巧整理

时间:2009-12-30 16:50:00 

1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 
  2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。
  3、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
  临时解决方法:选择符{属性名:B !important;属性名:A}
  4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属 * ,而不要去定义位于外面的标签的padding
  5、li标签前面的图标推荐使用background-image,而不是list-style-image。
  6、IE分不清继承关系和父子关系的差别,全部都是继承关系。
  7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
  8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
  9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
  10、与内容无关的图片请使用background
  11、定义颜色可以缩写#8899FF=#89F
  12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
  13、<script>没有language这个属性,应该写成这样:

<script type=”text/javascript”>

 14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字

<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 

15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) 

table{border-collapse:collapse;} 
td{border:#000 solid 1px;}

16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。 
  17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
  18、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效

<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>

 

<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>

 19、在IE中可能由于注释带来的文字重复问题时可以把注释改为:

<!–[if !IE]>Put your commentary in here…<![endif]–> 

标签:布局,技巧,css
0
投稿

猜你喜欢

  • python正则表达式中匹配次数与贪心问题详解(+ ?*)

    2021-04-24 20:52:04
  • QQ影音正式版官网Banner设计

    2009-03-27 18:46:00
  • HTML5 Canvas 起步(1) - 基本概念

    2009-04-21 13:14:00
  • 微信小程序自定义底部弹出框动画

    2024-05-02 16:14:30
  • python递归计算N!的方法

    2021-11-11 21:11:31
  • MySQL的存储函数与存储过程相关概念与具体实例详解

    2024-01-19 05:50:32
  • PHP的PDO错误与错误处理

    2023-06-05 20:21:40
  • Python中使用copy模块实现列表(list)拷贝

    2022-05-13 02:46:48
  • Python使用matplotlib实现交换式图形显示功能示例

    2023-04-25 06:10:49
  • python用opencv 图像傅里叶变换

    2021-03-02 02:04:35
  • PHP实现sha-256哈希算法实例代码

    2023-05-25 01:05:23
  • Oracle中获取执行计划的几种方法分析

    2023-07-17 15:18:31
  • Mysql Explain命令的使用与分析

    2024-01-29 08:39:04
  • python list使用示例 list中找连续的数字

    2022-10-16 19:49:46
  • pythotn条件分支与循环详解(3)

    2023-11-14 01:35:06
  • 一些你可能不熟悉的JS知识点总结

    2024-04-17 09:46:24
  • python基于tkinter制作下班倒计时工具

    2022-09-17 00:43:36
  • python爬虫之Appium爬取手机App数据及模拟用户手势

    2023-12-28 00:10:46
  • python实现发送带附件的邮件代码分享

    2021-11-24 12:28:30
  • JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析

    2023-09-04 22:44:33
  • asp之家 网络编程 m.aspxhome.com