<div+css页面布局课堂笔记>10---页面布局网站首页设计实例__2

来源：互联网发布：simulink数据库编辑：程序博客网时间：2024/06/10 15:05

增加了content部分的布局代码！！！

1.html文件：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>
标准的页面布局首页
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="bar">
</div>
<div id="tool">
</div>
<div id="nav">
</div>
</div>
<div class="space">
</div>
<div id="content">
<div class="main">
<div class="main_left">
</div>
<div class="main_right">
</div>

<div class="space">
</div>

<div class="main_left">
</div>
<div class="main_right">
</div>
</div>
<div class="sidebar sidebar_1">
</div>
<div class="space">
</div>
<div class="ad"></div>

<div class="space"></div>

<div class="main">
<div class="main_left">
</div>
<div class="main_right">
</div>

<div class="space">
</div>

<div class="main_left">
</div>
<div class="main_right">
</div>

<div class="space">
</div>

<div class="main_left">
</div>
<div class="main_right">
</div>
</div>
<div class="sidebar sidebar_2">
</div>
<div class="space">
</div>
<div class="ad"></div>
</div>
<div class="space">
</div>
<div id="bottomer">
</div>

</div>
</body>
</html>

2.css源码:

body {
margin:0;
padding:0;
text-align:center;
}

.space {
width:650px;
height:10px;
overflow:hidden;
}

#container {
width:900px;
margin:0 auto;
}

#header {
width:900px;
height:150px;
}

#content {
width:900px;
}

.ad {
width:100%;
height:20px;
background:blue;
float:left;
}

.main {
width:650px;
float:left;
}

.main_left {
width:300px;
height:200px;
background:gray;
float:right;
}

.main_right {
width:340px;
height:200px;
background:gray;
float:left;
}

.sidebar {
width:240px;
background:yellow;
float:right;
}

.sidebar_1 {
height:410px;
float:right;
}

.sidebar_2 {
height:620px;
float:right;
}

#bottomer {
width:900px;
height:150px;
background:green;
}

#logo {
width:150px;
height:100px;
background:#aaa;
float:left;
}

#bar {
width:600px;
height:100px;
background:#b0b;
float:left;
margin-left:10px;
}

#tool {
width:130px;
height:100px;
background:#0bb;
float:left;
margin-left:10px;
}

#nav {
width:900px;
height:50px;
background:black;
float:left;
margin-top:10px
}

0 0