混合布局

最新推荐文章于 2024-07-09 14:59:54 发布

zenkle

最新推荐文章于 2024-07-09 14:59:54 发布

阅读量216

点赞数

分类专栏： html

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏


<!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>

zenkle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合布局

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;混合布局&lt;/title&gt; &lt;style type="text/css"&gt; .top{width: 100%;height: 100px;background: #ccc;} .title{width: 800px;height: 10
复制链接

扫一扫

专栏目录