请DIV+CSS高手，帮我弄出下图这样一个样式的网页出来
3个回答
展开全部
这种的话你得定义好最外层框架的宽度咯，还有你里面的层的高度也要用比例来定义的话那么你也要给最外层的那个div一个高度，这样的话他才会根据最外层的高度来分配里面的比例的，直接所有div都是只用百分比定义宽高的话是不好做布局的，这个是我写的div框架，全是用百分比定义宽高的 ，至于效果就是跟上面我所说的那种样哦，亲研究下 <style>
.mainWap { width:100%; text-align:center; margin:0 auto; }
.clear { clear:both; }
.leftWap { width:29%; float:left; border:1px solid #f00;padding:5px;}
.leftWap .top { height:20%;border:1px solid #f00; }
.leftWap .middle { height:20%; border:1px solid #f00; }
.leftWap .bootom { height:59%; border:1px solid #f00; }
.rightWap { width:69%; float:right; border:1px solid #f00;padding:5px; }
.rightWap .top { height:70%; border:1px solid #f00; }
.rightWap .footer { height:30%; border:1px solid #f00; }
</style>
<div class="mainWap clear">
<div class="leftWap">
<div class="top">1</div>
<div class="middle">2</div>
<div class="bootom">3</div>
</div>
<div class="rightWap">
<div class="top">1</div>
<div class="footer">2</div>
</div>
</div>
.mainWap { width:100%; text-align:center; margin:0 auto; }
.clear { clear:both; }
.leftWap { width:29%; float:left; border:1px solid #f00;padding:5px;}
.leftWap .top { height:20%;border:1px solid #f00; }
.leftWap .middle { height:20%; border:1px solid #f00; }
.leftWap .bootom { height:59%; border:1px solid #f00; }
.rightWap { width:69%; float:right; border:1px solid #f00;padding:5px; }
.rightWap .top { height:70%; border:1px solid #f00; }
.rightWap .footer { height:30%; border:1px solid #f00; }
</style>
<div class="mainWap clear">
<div class="leftWap">
<div class="top">1</div>
<div class="middle">2</div>
<div class="bootom">3</div>
</div>
<div class="rightWap">
<div class="top">1</div>
<div class="footer">2</div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
html,body,.ys01,.ys02{ height:100%;width:100%}.layout01{ height:15%; border:solid #000 1px}.layout02{ height:70%; border:solid #000 1px}.layout03{ height:80%; border:solid #000 1px}.layout04{ height:20%; border:solid #000 1px}.ys01{ width:40%; height:100%; float:left}.ys02{ width:50%; height:100%; float:left}
</style></head>
<body>
<div class="ys01"><div class="layout01"></div>
<div class="layout01"></div><div class="layout02"></div></div><div class="ys02"><div class="layout03"></div><div class="layout04">
</div>
</div></body></html>
border有重边的 先给你了 自己 border-top 之类的改一下
html,body,.ys01,.ys02{ height:100%;width:100%}.layout01{ height:15%; border:solid #000 1px}.layout02{ height:70%; border:solid #000 1px}.layout03{ height:80%; border:solid #000 1px}.layout04{ height:20%; border:solid #000 1px}.ys01{ width:40%; height:100%; float:left}.ys02{ width:50%; height:100%; float:left}
</style></head>
<body>
<div class="ys01"><div class="layout01"></div>
<div class="layout01"></div><div class="layout02"></div></div><div class="ys02"><div class="layout03"></div><div class="layout04">
</div>
</div></body></html>
border有重边的 先给你了 自己 border-top 之类的改一下
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div的宽度是可以用百分比的，但是高度是不可以直接用百分百的，1楼的那个方法是扯蛋，一般情况下这种是用js来解决的，js监测浏览器的高度
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
