DIV+CSS网页布局求解（有图）
请问，这类格局如何用div+css实现？真诚求教！还忘了一个条件，就是网页的宽度是900px，要求在屏幕内居中。...
请问，这类格局如何用div+css实现？真诚求教！
还忘了一个条件，就是网页的宽度是900px，要求在屏幕内居中。 展开
还忘了一个条件，就是网页的宽度是900px，要求在屏幕内居中。 展开
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
body {text-align:center;}
#wrapper {width:900px;margin:0 auto;text-align:left;}
.border {border:2px solid black;}
.top,.bottom {width:100%;height:100px;}
.top {margin-bottom:10px;}
.bottom {margin-top:10px;}
.main {margin-top:10px;margin-bottom:10px;}
.middle {width:100%;}
.left,.right {width:100px;height:400px;}
.left {float:left;}
.right {float:right;}
.mainTop,.mainBottom {margin:0 auto;width:400px;height:190px;}
.mainTop {margin-bottom:20px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div class="border top"></div>
<div class="main">
<div class="border left"></div>
<div class="border right"></div>
<div class="middle">
<div class="border mainTop"></div>
<div class="border mainBottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="border bottom"></div>
</div>
</body>
</html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
body {text-align:center;}
#wrapper {width:900px;margin:0 auto;text-align:left;}
.border {border:2px solid black;}
.top,.bottom {width:100%;height:100px;}
.top {margin-bottom:10px;}
.bottom {margin-top:10px;}
.main {margin-top:10px;margin-bottom:10px;}
.middle {width:100%;}
.left,.right {width:100px;height:400px;}
.left {float:left;}
.right {float:right;}
.mainTop,.mainBottom {margin:0 auto;width:400px;height:190px;}
.mainTop {margin-bottom:20px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div class="border top"></div>
<div class="main">
<div class="border left"></div>
<div class="border right"></div>
<div class="middle">
<div class="border mainTop"></div>
<div class="border mainBottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="border bottom"></div>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
当然能啦 现在主要的网站布局就是用div+css实现的
更多追问追答
追问
关键是如何让某个DIV纵向跨越多个DIV模块.
追答
用 float 浮动标签
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个很简单啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
