7小时玩转网页布局开发【新】——3.混合布局

最新推荐文章于 2022-01-25 00:20:39 发布

Superstatus

最新推荐文章于 2022-01-25 00:20:39 发布

阅读量207

点赞数

分类专栏： Html 文章标签： Html

本文链接：https://blog.csdn.net/Superstatus/article/details/80621857

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>框架实现</title>
	<style type="text/css">
		body{ margin:0; }
		.cl{ clear: both; display: block;}
		.blueBg,.list1 div,.list2 div,.zyxx .zyxx_right div{ background: blue; }
		.redBg{ background: red; }
		.w1000{ width: 1000px; margin:0 auto; margin-top: 10px; }
		.header{ height: 80px; }
		.bigPic .bigPic_left{ height: 200px; width: 750px; float: left;}
		.bigPic .bigPic_right{ height: 200px; width: 240px; margin-left: 10px;float: left; }
		.list1 div{ float: left; width: 240px; margin:0 5px; height: 100px; }
		.list2 div{ float: left; width: 240px; margin:0 5px; height: 150px; }
		.zyxx .zyxx_left{ width: 500px; height: 300px;  float: left; }
		.zyxx .zyxx_right{float: left; width: 490px;margin-left: 10px;}
		.zyxx .zyxx_right div{ float: left; width: 235px; margin:5px 5px; height: 140px;  }

		.btnTop{ width: 40px; height: 80px; position: fixed; bottom: 300px; right: 5px; }
	</style>
</head>
<body>
	<div class="header w1000 blueBg"></div>
	<div class="bigPic w1000">
		<div class="bigPic_left redBg"></div>
		<div class="bigPic_right blueBg"></div>
		<span class="cl"></span>
	</div>
	<div class="list1 w1000">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<span class="cl"></span>
	</div>
	<div class="list2 w1000 ">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<span class="cl"></span>
	</div>
	<div class="zyxx w1000 ">
		<div class="zyxx_left blueBg"></div>
		<div class="zyxx_right">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<span class="cl"></span>
		</div>
		<span class="cl"></span>
	</div>
	<div class="btnTop blueBg"></div>
</body>
</html>

Superstatus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
7小时玩转网页布局开发【新】——3.混合布局

效果：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;框架实现&lt;/title&gt; &lt;style type="text/css"&gt; body{ marg
复制链接

扫一扫

专栏目录