DIV+CSS實現網頁布局實例代碼(1)

2020-03-24 16:59:36

字體：大中小

來源：轉載

供稿：網友

本文我們只是簡單的實現了頁面的布局。在下一文中我們將完成整個頁面。本文代碼如下： html
head
title div+css實現網頁布局實例代碼 /title style
!--
body{
margin:0px;
text-align:center;
background:#ffffcc;
} #container {
width:800px;
height:1000px;
margin:auto 0px;
} #header {
float:left;
width:800px;
height: 100px;
margin:auto 0px;
background:red;
clear:both;

} #logo {
float:left;
width:250px;
height:90px;
background:green;
clear:right;
margin:opx;
} #banner{
float:right;
width:540px;
height:90px;
margin:0px;
clear:left;
background:blue;
}

#menu {
width:800px;
height:35px;
margin:auto 0px;
clear: both;

}

.nav {
margin:auto 0px;
width:800px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
} .nav_a {
float:left;
margin:0px;
width:610px;
height:10px;
clear:both;
background:#ffffff;
line-height:10px;
}

.left_main {
margin:0px;
float:left;
width:610px;
height:420px;
background:red; } .right_main{
margin:0px;
float:right;
width:180px;
height:420px;
background:green;
clear:left;
} .left_a {
margin:0px;
float:left;
width:300px;
height:205px;
background:blue; }
.left_b {
margin:0px;
float:right;
width:300px;
height:205px;
background:blue;
clear:left;
}

.con {
margin:auto 0px;
width:800px;
height:200px;
background:green;
clear:both;

}

.one {
float:left;
width:200px;
height:200px;
background:#ff99f0;
clear:right;
} .two{
float:left;
width:200px;
height:200px;
background:#ffcc00;
} .three {
float:left;
width:200px;
height:200px;
background:#0ffff0;
} .four {
float:right;
width:190px;
height:200px;
background:#f0fff0;
} #footer {
width:800px;
height:100px;
background:red;
margin:auto 0px;
padding-top: 30px;
color: #ffffff;
}
//--
/style
/head
body
div id="container"
div id="header"
div id="logo" /div div id="banner" /div
/div div id="menu" /div
div nav /div

div
div /div
div /div div nav_left /div div /div
div /div
/div
div /div
div nav /div
div
div /div div /div div /div

div /div /div div
div /div
div /div
div nav_left /div
/div
div /div
div nav /div div id="footer" /div
/div /body /htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：網頁布局的時候先寫HTML還是先寫CSS

下一篇：提高CSS的網頁渲染11點注意項