摘自《网页开发手记》
1、效果图：
2、html代码：
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>网页布局实例</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#top, #nav, #mid, #footer{
width: 500px;
margin: 0px auto
}
#top{
height: 80;
background-color: #dddddd;
}
#nav{
height: 25px;
background-color: #fc0;
}
#mid{
height: 300px;
}
#left{
width: 98px;
height: 298px;
border: 1px solid #999;
float: left;
background-color: #dddddd;
}
#right{
height: 300px;
background-color: #ccc;
}
.content{
width: 98px;
height: 148px;
background-color: #c00;
border: 1px solid #999;
float: left;
}
#content2{
background-color: #f60;
}
#footer{
height: 80px;
background-color: #fc0;
}
</style>
</head>
<body>
<div id="top">顶部广告区</div>
<div id="nav">导航区</div>
<div id="mid">
<div id="left">纵向导航区</div>
<div id="right">
<div class="content">内容</div>
<div class="content" id="content2">内容</div>
<div class="content">内容</div>
<div class="content" id="content2">内容</div>
<div class="content" id="content2">内容</div>
<div class="content">内容</div>
<div class="content" id="content2">内容</div>
<div class="content">内容</div>
</div>
</div>
<div id="footer">底部版权区</div>
</body>
</html>
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
