CSS布局常用的方法5
[color=#000][font=Verdana][size=9.5pt]三行三列[/size][/font][/color][color=#000][font=Verdana][size=9.5pt]xhtml:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="header">[font=宋体]这里是顶行[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="warp">[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column">[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column1">[font=宋体]这里是第一列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column2">[font=宋体]这里是第二列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div class="clear"></div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]</div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="column3">[font=宋体]这里是第三列[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div class="clear"></div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]</div>[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]<div id="footer">[font=宋体]这里是底部一行[/font][font=Verdana]</div>[/font][/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]CSS:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]QUOTE:[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#header{width:100%; height:auto;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#wrap{ width:100%; height:auto;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column{ float:left; width:60%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column1{ float:left; width:30%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column2{ float:right; width:30%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#column3{ float:right; width:40%;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt].clear{ clear:both;} [/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]#footer{width:100%; height:auto;}[/size][/font][/color]
[color=#000][font=Verdana][size=9.5pt]PS:[font=宋体]这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置[/font][font=Verdana]margin,padding,boeder[/font][font=宋体]等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列[/font][font=Verdana]CSS[/font][font=宋体]代码，我觉得这样的效率和效果都不好！[/font][/size][/font][/color]
页:
[1]