<!DOCTYPE html>
<html>
<head>
<title>混合布局</title>
<style type="text/css">
.top{width: 100%;height: 100px;background: #ccc;}
.title{width: 800px;height: 100px;background: #666;margin: 0 auto;}
.foot{width: 800px;height: 100px;background: #900;margin: 0 auto;}
.main{width: 800px;height: 800px;background: purple; margin: 0 auto;}
.left{width:600px;height: 800px;background: yellow ;float: left;}
.left_1{width:400px;height: 800px;background: green;float: left;}
.left_2{width: 200px;height: 800px;background: #999;float: right;}
.right{width: 200px;height: 800PX;background: #369;float: right;}
</style>
</head>
<body>
<div class="top">
<div class="title"></div>
</div>
<div class="main">
<div class="left">
<div class="left_1"></div>
<div class="left_2"></div>
</div>
<div class="right"></div>
</div>
<div class="foot"></div>
</body>
</html>混合布局
猜你喜欢
转载自blog.csdn.net/qq_35142645/article/details/83310722
今日推荐
周排行