CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}
positi> 以下是引用片段:
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>
CSS:
以下是引用片段:
#wrap{ positi> 以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#c> 以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center;}
#c> 以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#c> 以下是引用片段:
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 420px;}
两行两列
以下是引用片段:
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 420px;}
三行两列
以下是引用片段:
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 420px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三列
单行三列
绝对定位
以下是引用片段:
#left { positi> 以下是引用片段:
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml
以下是引用片段:
<div id="center" class="column">
<h1>This is the main c> 以下是引用片段:
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
.column {
positi>两行三列
xhtml:
以下是引用片段:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段:CSS:
<div id="header">这里是顶行</div>
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好!
3.CSS布局高级技巧
margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
IE中有浮动对象的双倍距离之BUG(IE Doubled Float-Margin Bug ), 这里还需要具体问题具体解决,下面是解决办法
forest53/tutorials/tutorials_show.asp?id=31
很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的!
解决的方法是hack
以下是引用片段:
div.c> 以下是引用片段:
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
以下是引用片段:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是将一个npx宽的一张图片在外部容器纵向重复,定位到两列交错的位置纵向重复,在视觉上产生了两列高度一样的错觉
欢迎您访问www.5ucms.org
上一篇:5ucms帮助解决select菜单边框无法设置的问题 下一篇:5ucms仿站,中文排版CSS心得 |
|
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。 5ucms仿站,div+css布局技术漫谈的关键词: |