自己第一个正儿八经的div+css页面
虽然很简单，但毕竟是自己第一次按照web标准画的页面，呵呵。
这是一个简单的两行三列的大表格布局。以后设计简单页面就可以“照方吃炒肉”了。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>收藏本站</title>
<style type="text/css">
#main{
width:100%;
height:100%;
height:800px;
}
#left{
width:150px;
height:100%;
background:gray;
float:left;
}
#function{
width:100%;
height:79%;
background:orange;
}
#status{
width:100%;
height:165px;
background:silver;
margin-top:2px;
}
#middle{
width:700px;
height:100%;
margin-left:5px;
margin-top:0px;
background-color:fuchsia;
float:left;
}
#map{
width:100%;
height:79%;
background:aqua;
}
#search{
width:100%;
height:165px;
background:blue;
margin-top:2px;
}
#right{
width:200px;
height:100%;
margin-top:0px;
background:lime;
float:left;
margin:0px 0px 0px 5px;
}
#list{
width:100%;
height:79%;
background:orange;
}
#detail{
width:100%;
height:165px;
background:silver;
margin-top:2px;
}
}
</style>
</head>
<body>
<div id="main" >
<div id="left" >
<div id="function"></div>
<div id="status"></div>
</div>
<div id="middle" >
<div id="map"></div>
<div id="search"></div>
</div>
<div id="right" >
<div id="list"></div>
<div id="detail"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>收藏本站</title>
<style type="text/css">
#main{
width:100%;
height:100%;
height:800px;
}
#left{
width:150px;
height:100%;
background:gray;
float:left;
}
#function{
width:100%;
height:79%;
background:orange;
}
#status{
width:100%;
height:165px;
background:silver;
margin-top:2px;
}
#middle{
width:700px;
height:100%;
margin-left:5px;
margin-top:0px;
background-color:fuchsia;
float:left;
}
#map{
width:100%;
height:79%;
background:aqua;
}
#search{
width:100%;
height:165px;
background:blue;
margin-top:2px;
}
#right{
width:200px;
height:100%;
margin-top:0px;
background:lime;
float:left;
margin:0px 0px 0px 5px;
}
#list{
width:100%;
height:79%;
background:orange;
}
#detail{
width:100%;
height:165px;
background:silver;
margin-top:2px;
}
}
</style>
</head>
<body>
<div id="main" >
<div id="left" >
<div id="function"></div>
<div id="status"></div>
</div>
<div id="middle" >
<div id="map"></div>
<div id="search"></div>
</div>
<div id="right" >
<div id="list"></div>
<div id="detail"></div>
</div>
</div>
</body>
</html>
