div+css的几种常用的布局
2009-05-07 20:29
253 查看
CSS常用布局实例
一列
单行一列
代码:
两行一列
代码:
三行一列
代码:
两列
单行两列
代码:
两行两列
代码:
三行两列
代码:
三列
单行三列
绝对定位 代码:
float定位
xhtml: 代码:
CSS: 代码:
float定位二
xhtml 代码:
CSS代码:
一列
单行一列
代码:
body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; }
两行一列
代码:
body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; } #content-end {margin-left:auto; margin-right:auto; width: 400px; }
三行一列
代码:
body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-mid { margin-left:auto; margin-right:auto; width: 400px; } #content-end { margin-left:auto; margin-right:auto; width: 400px; }
两列
单行两列
代码:
#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 { position: absolute; top: 0px; left: 0px; width: 120px; } #middle {margin: 0px 190px 0px 190px; } #right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml: 代码:
<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 content.</h1> </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> </div>
CSS代码:
body { margin: 0; padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ min-width: 200px; /* LC fullwidth + CC padding */ } .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; /* LC width */ right: 200px; /* LC fullwidth */ margin-left: -100%; } #right { width: 190px; /* RC width */ margin-right: -100%; } /*** IE Fix ***/ * html #left { left: 190px; /* RC fullwidth */ }
相关连接:http://bbs.blueidea.com/viewthread.php?tid=2506047
相关文章推荐
- css+div布局常用的方法㈠
- DIV+CSS网页布局常用的一些命名规则和书写
- Div+CSS 常用布局2
- html常用布局方式div+css与Table布局优劣性
- 常用网页布局(div+css)之一
- Web_CSS_DIV_网页页面常用布局
- DIV+CSS网页设计常用布局代码
- 利用CSS和DIV的几种布局方法(3)
- DIV+CSS网页布局常用的方法与技巧
- 一些常用的DIV+CSS的网页布局所用的代码段
- 收藏网站制作常用经典css.div.布局.设计实例打包下载
- DIV+CSS常用的Html网页布局代码
- 简洁 DIV+CSS布局入门之一 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- 收藏网站制作常用经典css.div.布局.设计实例打包下载1
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- 常用的css+div布局总结
- DIV+CSS布局的常用商品信息网页代码
- DIV+CSS常用的网页布局代码
- 收藏网站制作常用经典css.div.布局.设计实例打包下载2
- 网页设计【DIV+CSS常用的网页布局代码】