css简单练习3

最新推荐文章于 2023-02-05 20:38:03 发布

crraxx

最新推荐文章于 2023-02-05 20:38:03 发布

阅读量1.9k

点赞数 5

分类专栏：网页文章标签： html css

本文链接：https://blog.csdn.net/crraxx/article/details/109366950

版权

网页专栏收录该内容

18 篇文章 5 订阅

订阅专栏

css简单练习3

要求：淘宝首页框架布局参考图片如下
用div与浮动有关知识完成
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0rem;
				}
			#box1 {
				width: 1200px;
				}
				
			.box1_left,
			.box1_center,
			.box1_right {
				float: left;
				height: 800px;
			}

			.box1_left {
				background-color: #00FFFF;
				width: 300px;
			}

			.box1_center {
				background-color:aliceblue;
				width: 600px;
				height: 800px;
			}

			.box1_right {
				background-color: crimson;
				width: 300px;
			}

			.c11 {
				float: left;
				background-color: green;
				height: 360px;
				width: 260px;
				margin: 20px 20px;
			}

			.c12 {
				float: left;
				background-color: yellow;
				height: 360px;
				width: 260px;
				margin: 20px 20px;
			}

			.c21 {
				float: left;
				background-color: red;
				height: 360px;
				width: 180px;
				margin: 20px 10px;
			}
			.c22 {
				float: left;
				background-color: lawngreen;
				height: 360px;
				width: 180px;
				margin: 20px 10px;
			}
			.c23 {
				float: left;
				background-color: salmon;
				height:360px;
				width: 180px;
				margin: 20px 10px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div id="box1">
			<div class="box1_left">
				box1
			</div>

			<div class="box1_center">

				<div>
					<div class="c11">左</div>
					<div class="c12">右</div>
					<div style="clear: left;"></div>
				</div>
				<div>
					<div class="c21">左</div>
					<div class="c22">中</div>
					<div class="c23">右</div>
					<div style="clear: left;"></div>
				</div>
			</div>

			<div class="box1_right">
				box3
			</div>
			<div style="clear: left;"></div>
		</div>
	</body>
</html>

运行结果：

crraxx

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
12
评论
css简单练习3

css简单练习3要求：淘宝首页框架布局参考图片如下用div与浮动有关知识完成代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0rem; } #box1 { wi
复制链接

扫一扫