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

昨天上午老师给我们简单讲了 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>

HTML中用 div 绘制一个简单的房子相关推荐

python绘制一个简单的函数图像使用到了matplotlib库和numpy库
文章目录效果展示: 视频链接实现的思想使用到的函数包图片一对应的代码展示图片二对应的代码展示注意事项效果展示: 视频链接 python绘制一个简单的函数图像(B站视频) 实现的思想其 ...
使用inkscape绘制一个简单的logo
使用inkscape绘制一个简单的logo Inkscape是开源的矢量图像编辑软件,与Illustrator.Freehand.CorelDraw.Xara X 等软件很相似,它使用 W3C 标准的 ...
Quartz2D之绘制一个简单的机器猫
学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...
计算机桌子用英语怎么画,如何用AI绘制一个简单的办公桌？
小编:hello!好久不见,@菜菜给大家带来的是一篇如何利用简单的几何图形去绘制我们的办公桌,教程写的比较详细,很容易上手,赶快动起来吧,大家不要忘记交作业! 原图: 提示:文章中所有的描边都是内描边 ...
java 线图_在Java中绘制一个简单的线图
您的代码和建议的问题: >再次,您需要更改组件的preferredSize(这里是Graph JPanel),而不是大小 >不要设置JFrame的边界. >在添加组件之后并在调用se ...
Android中用URL模拟一个简单的图片加载器
首先,需要添加权限. <uses-permission android:name="android.permission.INTERNET"/> 整体代码如下: pac ...
Linux中用maven创建一个简单的项目
maven简介 maven是Apache旗下的管理java项目jar包的项目管理工具,有了它可以很方便的构建管理java项目. 安装maven maven下载地址 http://maven.apach ...
用python绘制一个简单正三角形
代码如下: #利用turtle绘制正三角形 from turtle import* #导入turtle库 pencolor('red')#设置画笔颜色 pensize(8) #画笔大小 fillcol ...
使用html div 画一个简易的房子
直接上源码: <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...

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

HTML中用 div 绘制一个简单的房子相关推荐

最新文章

热门文章