2007-10-18

css tips

id 和 class

id 用 “.“ 来表示，例如

 .bar {}

 

class 用 “#”来表示，例如

  #bar {} 
布局需要注意的问题
float:none|left|right
取值：
none:　默认值。对象不飘浮
left:　文本流向对象的右边
right:　文本流向对象的左边 
它是怎样工作的，看个一行两列的例子
xhtml:

xml 代码
  1. <div id="wrap">  
  2. <div id="column1">这里是第一列div>  
  3. <div id="column2">这里是第二列div>  
  4. <div class="clear">div> /*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/   
  5. div>  
  6. 本文转自建站学  http://www.jzxue.com ,转载请注明出处。   
  7.   

CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}
position:static|absolute|fixed|relative
取值：
static:　默认值。无特殊定位，对象遵循HTML定位规则
absolute:　将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml:
xml 代码
  1. <div id="wrap">  
  2. <div id="column1">这里是第一列div>  
  3. <div id="column2">这里是第二列div>  
  4. div>  
  5. 本文转自建站学  http://www.jzxue.com ,转载请注明出处。   
  6.   


CSS:
#wrap{position:relative;/*相对定位*/width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他们的区别在哪?
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
本文转自建站学  http://www.jzxue.com ,转载请注明出处。
clear属性
表示后面的元素需要清除浮动。只有IE需要这个属性。
 
完整的CSS工具列表
http://www.inpeck.com/blog/2006/11/01/css-tools-list/
CSS模板
http://www.oswd.org/designs/favorites/
评论
发表评论

您还没有登录，请登录后发表评论

yananay
搜索本博客
我的相册
D35bafa8-5bf0-475f-aa06-16f3080557a1-thumb
tdd
共 3 张
存档
最新评论