DIV+CSS常用的網(wǎng)頁布局代碼

字號： 小 中 大

單行一列以下是引用片段：
    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.