网页设计作业
定义五个区块（通过DIV），分别取名为：top, left, center, right, bottom。需满足如下要求：
Top和bottom宽度充满整个窗口（无论窗口处于最大化或缩小状态）
中间部分（left+center+right）宽度占窗口的80%（无论窗口处于最大化或缩小状态）
Left和right固定宽，center自适应宽（其宽度随窗口宽度变化而变化）
中间部分（left+center+right）上端与top部分交叠、下端与bottom部分交叠，且交叠之处中间部分要浮在上层
要源代码
类似这样的
求HTML代码和CSS代码
第1个回答 2016-11-21
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top{
background:#cccccc;
height:100px;
}
.middle{
width:80%;
height:650px;
margin:-50px auto;
}
.bottom{
background:#cccccc;
height:100px;
}
.left{
background:red;
float:left;
width:10%;
height:100%;
}
.center{
background:blue;
float:left;
width:80%;
height:100%;
}
.right{
background:green;
float:left;
width:10%;
height:100%;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>本回答被提问者和网友采纳
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top{
background:#cccccc;
height:100px;
}
.middle{
width:80%;
height:650px;
margin:-50px auto;
}
.bottom{
background:#cccccc;
height:100px;
}
.left{
background:red;
float:left;
width:10%;
height:100%;
}
.center{
background:blue;
float:left;
width:80%;
height:100%;
}
.right{
background:green;
float:left;
width:10%;
height:100%;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>本回答被提问者和网友采纳
第2个回答 2016-11-21
帮你写好了，你自己看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码测试</title>
<style>
*{padding:0px;margin:0px;}
html,body{width:100%;}
.top{position:absolute;width:100%;height:100px;top:0px;left:0px;right:0px;background:#cccccc;}
.bottom{position:absolute;width:100%;height:100px;bottom:0px;left:0px;right:0px;background: #cccccc;}
.center{position:absolute;top:80px;bottom:80px;left:10%;right:10%;width:80%;}
.center_left{position:absolute;left:0px;top:0px;bottom:0px;width:80px;background:#fe0000;}
.center_right{position:absolute;right:0px;top:0px;bottom:0px;width:80px;background:#00ff01;}
.center_center{position: absolute;left:80px;right:80px;top:0px;bottom:0px;background: #0000fe;}
</style>
</head>
<body>
<div class="top">"top"</div>
<div class="bottom">"bottom"</div>
<div class="center">
<div class="center_left">"left"</div>
<div class="center_center">"center"</div>
<div class="center_right">"right"</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码测试</title>
<style>
*{padding:0px;margin:0px;}
html,body{width:100%;}
.top{position:absolute;width:100%;height:100px;top:0px;left:0px;right:0px;background:#cccccc;}
.bottom{position:absolute;width:100%;height:100px;bottom:0px;left:0px;right:0px;background: #cccccc;}
.center{position:absolute;top:80px;bottom:80px;left:10%;right:10%;width:80%;}
.center_left{position:absolute;left:0px;top:0px;bottom:0px;width:80px;background:#fe0000;}
.center_right{position:absolute;right:0px;top:0px;bottom:0px;width:80px;background:#00ff01;}
.center_center{position: absolute;left:80px;right:80px;top:0px;bottom:0px;background: #0000fe;}
</style>
</head>
<body>
<div class="top">"top"</div>
<div class="bottom">"bottom"</div>
<div class="center">
<div class="center_left">"left"</div>
<div class="center_center">"center"</div>
<div class="center_right">"right"</div>
</div>
</body>
</html>
相似回答