HTML中用 div 绘制一个简单的房子

最新推荐文章于 2021-06-21 20:27:12 发布

柯西没科气

最新推荐文章于 2021-06-21 20:27:12 发布

阅读量6.4k

点赞数 5

分类专栏： HTML 文章标签： html div

本文链接：https://blog.csdn.net/diligent_lee/article/details/82013929

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

昨天上午老师给我们简单讲了 CSS 中的 div，下午让我们画一个房子练手。我们可以将 div 理解成为一个盒子，而盒子中又可以放别的盒子，每个盒子中的内容互不影响，相对独立。因此，只要将图形中的内容进行细分，然后利用 div 进行嵌套封装。可以类比 Office 中的图形组合，将部分图形组合之后，它们的相对位置就不在发生变化，然后再跟其他的图形组合，直至组合到所有的图形位置，这样整个图形中元素都相对固定了。不得不吐槽的是，用 div 画图真的十分鸡肋，由于需要 div 的层层嵌套，代码量十分冗杂，因此，这个代码权当是加深对 div 的理解了。代码写的比较随心所欲，不过我是不想再优化了。

效果图：
小房子
源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#all{
				margin: 0 auto;
				width: 1300px;
				height: 640px;
				background-color: black;
				position: relative;
				top: 20px;
			} 
			
			#circle1{
				width: 70px;
				height: 70px;
				background-color: white;
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				float: right;
			}
			
			#circle2{
				width: 50px;
				height: 50px;
				background-color: black;
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				float: right;
			}
			
			#house{
				width: 420px;
				height: 415px;
				position: relative;
				left: 200px;
				top: 100px;
				float: left;
			}
			
			#tri{
				position: relative;
				top: 20px;
              	border-style: solid;
            	border-width: 0px 210px 135px 210px;
          	  	border-color: transparent transparent blue transparent;
            	width: 0px;
          	  	height: 0px;
          	  	float: left;

			}
			
			#rec{
				position: relative;
				left: 40px;
				top: -20px;
				width: 60px;
				height: 155px;
				background-color: blue;
				float: left;
			}

			#rectangle{
				height: 260px;
				width: 320px;
				background-color: orange;
				position: relative;
				top: 20px;
				left:50px;
				float: left;
			}
			
			#rec1{
				width: 104px;
				height: 104px;
				border: solid 5px white;
				position: relative;
				top: 20px;
				left: 20px;
				float: left;
				
			}
			
			#rec1_1{
				width: 40px;
				height: 40px;
				border: solid 2px black;
				position: relative;
				top: 5px;
				left: 5px;
				float: left;
			}
			
			#rec1_2{
				width: 40px;
				height: 40px;
				border: solid 2px black;
				position: relative;
				top: 5px;
				right: 5px;
				float: right;
			}
			
			#rec1_3{
				width: 40px;
				height: 40px;
				border: solid 2px black;
				position: relative;
				top: 12px;
				left: 5px;
				float: left;
			}
			
			#rec1_4{
				width: 40px;
				height: 40px;
				border: solid 2px black;
				position: relative;
				bottom: -12px;
				right: 5px;
				float: right;
			}
			
			#rec2{
				width: 100px;
				height: 178px;
				border: solid 10px white;
				position: relative;
				bottom: -62px;
				right: 20px;
				float: right;
			}
			
			#rec2_0{
				width: 98px;
				height: 176px;
				border: solid 2px black;
				float: left;
			}
			
			.my_rec2_x{
				width: 45px;
				height: 40px;
				border: solid 2px black;
				float: left;
			}
			
			#ground{
				width: 1300px;
				height: 58px;
				background-color: green;
				float: left;
				
				position: relative;
				top: 100px;	
			}
				
			#t{
				width: 200px;
				height: 351px;
				position: relative;
				right: 430px;
				top: 163px;
				float: right;
				text-align: center;
			}
			
			#t1{
				position: relative;
				left: 70px;
              	border-style: solid;
            	border-width: 0px 30px 30px 30px;
          	  	border-color: transparent transparent green transparent;
          	  	width: 0px;
          	  	height: 0px;
          	  	float: left;
			}
			
			#t2{
				position: relative;
				left: 40px;
              	border-style: solid;
            	border-width: 0px 60px 60px 60px;
          	  	border-color: transparent transparent green transparent;
          	  	width: 0px;
          	  	height: 0px;
          	  	float: left;
			}
			
			#t3{
				position: relative;
              	border-style: solid;
            	border-width: 0px 100px 100px 100px;
          	  	border-color: transparent transparent green transparent;
          	  	width: 0px;
          	  	height: 0px;
          	  	float: left;
			}
			
			#r{
				width: 20px;
				height: 162px;
				background-color: green;
				position: relative;
				left: 90px;
			}
			
			*{
				margin: 0;
				padding: 0;
			}	
			</style>
	</head>
	<body>
		<!-- 总布局 -->
		<div id="all">
			<!-- 画月亮 -->
			<div id="circle1"><div id="circle2"></div></div>		
			<div style="clear: both;"></div>
			<!-- 画房子 -->
			<div id="house">
				<!-- 画屋顶 -->
				<div id="tri"><div id="rec"></div></div>
				<!-- 房子主体 -->
				<div id="rectangle">
					<!-- 窗户 -->
					<div id="rec1">
						<div id="rec1_1"></div><div id="rec1_2"></div><div id="rec1_3"></div><div id="rec1_4"></div>				
					</div>
					<!-- 门 -->
					<div id="rec2"><!-- 外边框  -->
						<div id="rec2_0"> <!-- 内边框 -->
							<div class="my_rec2_x"></div><div class="my_rec2_x"></div><div style="clear: both;"></div>
							<div class="my_rec2_x"></div><div class="my_rec2_x"></div><div style="clear: both;"></div>
							<div class="my_rec2_x"></div><div class="my_rec2_x"></div><div style="clear: both;"></div>					
							<div class="my_rec2_x"></div><div class="my_rec2_x"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 画树 -->
			<div id="t">
				<div id="t1"></div>
				<div style="clear: both;"></div>
				<div id="t2"></div>
				<div id="t3"></div>
				<div style="clear: both;"></div>
				<div id="r"></div>
			</div>
			<!-- 画绿地 -->
			<div id="ground"></div>
		</div>
	</body>
</html>

柯西没科气

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
HTML中用 div 绘制一个简单的房子

HTML中用div绘制一个简单的房子昨天上午老师给我们简单讲了CSS中的div，下午让我们画一个房子练手。我们可以将div理解成为一个盒子，而盒子中又可以放别的盒子，每个盒子中的内容互不影响，相对独立。因此，只要将图形中的内容进行细分，然后利用div进行嵌套封装。可以类比Office中的图形组合，将部分图形组合之后，它们的相对位置就不在发生变化，然后再跟其他的图形组合，直至组合到所有的图形位置...
复制链接

扫一扫

专栏目录