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

最新推荐文章于 2024-06-05 09:55:04 发布

Superstatus

最新推荐文章于 2024-06-05 09:55:04 发布

阅读量159

点赞数

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

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

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果：

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>人民网框架实现</title>
	<style type="text/css">
		body{ margin:0; }
		.w1000{ width: 1000px; margin:0 auto; margin-top:10px;}
		.cl{ clear: both; }
		.fl{ float: left; }
		.redBg{ background: red; }
		.blueBg{ background: blue; }
		.top{ height: 100px; }
		.nav1{ height: 50px;  }
		.nav_main{ height: 150px;  width: 100% !important;}
		.ad .ad_left{ width: 750px; height: 200px;}
		.ad .ad_right{ width: 240px; margin-left:10px; height: 200px;}
		.smallTop .smallTop_left{width: 750px; height: 80px;  }
		.smallTop .smallTop_right{width: 240px;margin-left:10px;  height: 80px;  }
		.bigTop .bigTop_left{width: 200px;height: 60px; }
		.bigTop .bigTop_right{width: 790px;margin-left:10px;  height: 60px; }
		.bigPic .bigPic_left{width: 750px; height: 400px; }
		.bigPic .bigPic_right{width: 240px;margin-left:10px;  height: 400px; }
	</style>
</head>
<body>
	<div class="top w1000 blueBg"></div>
	<div class="nav1 w1000 blueBg"></div>
	<div class="nav_main w1000 redBg"></div>
	<div class="nav1 w1000 blueBg"></div>
	<div class="nav1 w1000 blueBg"></div>
	<div class="ad w1000">
		<div class="ad_left fl blueBg"></div>
		<div class="ad_right fl blueBg"></div>
		<div class="cl"></div>
	</div>
	<div class="smallTop w1000">
		<div class="smallTop_left fl blueBg"></div>
		<div class="smallTop_right fl blueBg"></div>
		<div class="cl"></div>
	</div>
	<div class="bigTop w1000">
		<div class="bigTop_left fl blueBg"></div>
		<div class="bigTop_right fl redBg"></div>
		<div class="cl"></div>
	</div>
	<div class="bigPic w1000">
		<div class="bigPic_left fl redBg"></div>
		<div class="bigPic_right fl blueBg"></div>
		<div class="cl"></div>
	</div>
</body>
</html>

Superstatus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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{ ma
复制链接

扫一扫

专栏目录