CSS画远视表

最新推荐文章于 2021-01-31 18:32:07 发布

chenlunju

最新推荐文章于 2021-01-31 18:32:07 发布

阅读量1k

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/chenlunju/article/details/84893896

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

效果图如上。

知识点：；理解盒模型，margin,border,padding,content

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style1208.css">
</head>
<body>
	<div class="wrapper">
		<div class="box">
			<div class="content">
				<div class="content1">
					<div class="content2">
						<div class="content3">
							<div class="content4">
								<div class="content5">
									<div class="content6">
										<div class="content7">
											<div class="content8">
												<div class="content9"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

body{
	margin: 0;
}

.content9{
	width: 10px;
	height: 10px;
	background-color: rgb(53, 160, 56);
}

.content8{
	width: 10px;
	height: 10px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.content7{
	width: 30px;
	height: 30px;
	padding: 10px;
	background-color: rgb(53, 160, 56);
}

.content6{
	width: 50px;
	height: 50px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.content5{
	width: 70px;
	height: 70px;
	padding: 10px;
	background-color: rgb(53, 160, 56);
}

.content4{
	width: 90px;
	height: 90px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.content3{
	width: 110px;
	height: 110px;
	padding: 10px;
	background-color: rgb(53, 160, 56);
}

.content2{
	width: 130px;
	height: 130px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.content1{
	width: 150px;
	height: 150px;
	padding: 10px;
	background-color: rgb(53, 160, 56);
}

.content{
	width: 170px;
	height: 170px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.box{
	width: 190px;
	height: 190px;
	padding: 10px;
	background-color: rgb(53, 160, 56);
}

.wrapper{
	width: 210px;
	height: 210px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

chenlunju

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS画远视表

效果图如上。知识点：；理解盒模型，margin,border,padding,content&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style12
复制链接

扫一扫