<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
bg-box{
margin: auto;
width: 1000px;/父容器不写高度由自容器撑开/
overflow: hidden;/浮动隐藏/
border: 4px solid #0000ff;
}
left-box{
float: left;
height: 50px;
width: 90px;
background-color: #ff00cc;
}
right-box{
float: right;/有浮动/
width: 890px;
border:1px solid #ff00cc;
}
right-box li{
display: inline-block;/使块标签固有行标签的属性/
width:320px;
height:100px;
margin: 20px 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="bg-box">
<div class="left-box">
</div>
<div class="right-box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
这个要看你具体的网页布局结构。一般就是顶部导航栏banner、左侧菜单栏bar、中间内容区container、右侧菜单栏aside、底部页脚footer这5个区域混搭，其中中间内容区container是必须有的，而且所占区域较大。其他部分可自定义。
常见布局分区1
常见布局分区2
<div style="width:100% auto; border:1px"><div id="top" style="height:20px; background:pink">头部</div>
<div id="middle" style="height:500px; width:100%">
<div id="left" style="width:20%; background:red; height:500px; float:left;">左边</div>
<div id="zhong" style="width:499%; background:yellow; height:500px; float:left">中间</div>
<div id="right" style="width:30%; background:green; height:500px ;float:left">右边</div>
</div>
<div id="button" style="width:100%; height:30px; background:black">底部</div>
</div>
基本布局就是这样子，你可以根据自己的需求进行修改<div style="position:absolute;top:0px;left:0px;width:100%;height:100px;background-color:red">这是顶部</div>
<div style="position:absolute;top:100px;left:0px;width:20%;height:600px;background-color:blue">这是下方左部</div>
<div style="position:absolute;top:100px;left:20%;height:600px;">这是下方右部</div>
DW只是代码编辑工具，实现这个页面很简单：
分析结构：分为上中下三部分，其中中间有左右两部分
可以用div+css就解决了，上面部份给个div，width给100%，height给个300px左右
中间部分两个div，width分别给20%，80%，具体看你调整区域大小，height统一给个500px左右
底部的话width还是100%，height给个200px
记住全部都要给个border这样才看的到边框，或者给background背景色也行！
具体代码实在如果不懂可以再问我，整理来说这是个很简单的布局了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）