一些常用的DIV+CSS的网页布局所用的代码段

单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

三行一列
以下是引用片段：
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; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列
以下是引用片段：
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px; }
#bodycenter #dv2 { float: right; width: 410px; }

两行两列
以下是引用片段：
#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: 410px; }

三行两列
以下是引用片段：
#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: 410px; }
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列
绝对定位
以下是引用片段：
#left { posITion: absolute; top: 0px; left: 0px; width: 120px; }
#middle { margin: 20px 190px 20px 190px; }
#right { position: absolute; top: 0px; right: 0px; width: 120px; }

float定位一
xhtML:
以下是引用片段：
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:
以下是引用片段：
#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; padding-right: 190px; min-width: 240px; }
.column { position: relative; float: left; }
#center { width: 100%; }
#left { width: 180px; right: 240px; margin-left: -100%; }
#right { width: 130px; margin-right: -100%; }

两行三列
xhtml:以下是引用片段：div id='header'> 这里是顶行/div> div id='warp'> div id='column'> div id='column1'> 这里是第一列/div> div id='column2'> 这里是第二列/div> div class='clear'> /div> /P> P> /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:
以下是引用片段：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> div id='footer'> 这里是底部一行/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; }
#footer{ width:100%; height:auto; }

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！