DIVCSS最常用的网页布局代码.doc

div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的几种布局代码：单行一列以下是引用片段：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: 以下是引用片段： 这里是第一列 这里是第二列 这里是第三列 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:以下是引用片段： This is the main content. This is the left sidebar. This is the right sidebar. 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:以下是引用片段：这里是顶行 这里是第一列 这里是第二列 这里是第三列 CSS: 以下是引用片段：#headerwidth: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:以下是引用片段：#headerwidth:100%; height:auto; #wrap width:100%; height:auto; #column float:left; width:60%; #column1 float:left; width:30%; #column2 float:right; width:30%; #column