【CSS小练习】DIV+CSS布局画图

复杂的布局算是css中的一个难点，我做了一个画图小练习，分享代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.hei {width: 1315px;height: 548px;background-color: #000;}.yue {height: 72px;}.da {width: 70px;height: 70px;border-radius: 50%;background-color: #fff;margin-left: 1245px;}.xiao {width: 56px;height: 56px;border-radius: 50%;background-color: #000;margin-top: -70px;margin-left: 1259px;}.wu {width: 0;height: 0;border-left: 205px solid transparent;border-right: 205px solid transparent;border-top: 136px solid transparent;border-bottom: 136px solid #0001fe;position: relative;top: -73px;/* 和月亮的距离-bordertop=63-136=-73 */left: 342px;}.yan {width: 57px;height: 130px;background-color: #0001fe;position: relative;top: -223px;/* 底和屋顶底齐平=屋顶的移动距离-烟囱的高度=-73-130=-203底和屋顶底齐平+往上抬20px=-203-20=-223 */left:600px; }.qiang {width: 378px;height: 275px;border: 1px solid #fe7521;background-color: #fe7521;position: relative;top: -203px;/* 原烟囱的高度+屋顶移动距离=-130-73=-203 */left: 358px;}.chuang {width: 136px;height: 136px;border: 4px solid white;margin-top: 14px;margin-left: 14px;}.li1 {width: 48px;height: 48px;list-style: none;border: 2px solid #250000;margin: 8px;float: left;}.men {width: 134px;height: 215px;border: 10px solid #fff;margin-left: 205px;margin-top: -118px;/* 原在调后窗下，窗底到门顶的距离-门边框=-128+10=-118 */}.li2 {width: 64px;height: 52px;list-style: none;border-top: 2px solid #040000;border-right: 1px solid #040000;border-bottom: 1px solid #040000;border-left:  2px solid #040000;float: left;}.li3 {width: 64px;height: 52px;list-style: none;border-top: 2px solid #040000;border-right: 2px solid #040000;border-bottom: 1px solid #040000;border-left:  1px solid #040000;float: left;}.li4 {width: 64px;height: 52px;list-style: none;border-top: 1px solid #040000;border-right: 1px solid #040000;border-bottom: 1px solid #040000;border-left:  2px solid #040000;float: left;}.li5 {width: 64px;height: 52px;list-style: none;border-top: 1px solid #040000;border-right: 2px solid #040000;border-bottom: 1px solid #040000;border-left:  1px solid #040000;float: left;}.li6 {width: 64px;height: 52px;list-style: none;border-top: 1px solid #040000;border-right: 1px solid #040000;border-bottom: 2px solid #040000;border-left:  2px solid #040000;float: left;}.li7 {width: 64px;height: 52px;list-style: none;border-top: 1px solid #040000;border-right: 2px solid #040000;border-bottom: 2px solid #040000;border-left:  1px solid #040000;float: left;}.la {position: relative;top: -38px;}/* 为什么会比门框低-38px？？ */.tree {position: relative;left: 766px;top: -681px;}/* 位置在门的下面，tree的顶与后门的底齐平=门的高-边=-215+10=-205月亮到黑底=476齐平+与月亮的距离=-205-476=-681 */.shu1 {width: 0;height: 0;border-width: 34px;border-color: #008100;border-style: solid;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;position: absolute;top: 63px;left: 70px;}.shu2 {width: 0;height: 0;border-width: 69px;border-color: #008100;border-style: solid;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;position: absolute;top: 65px;left: 34px;}.shu3 {width: 0;height: 0;border-width: 103px;border-color: #008100;border-style: solid;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;position: absolute;top: 99px;}.gan {height: 172px;width: 20px;background-color: #008100;position: absolute;left: 93px;top: 305px;}.cao {width: 1316px;height: 62px;background-color: #008100;}</style>
</head>
<body><!-- 所有 --><div><!-- 黑底 --><div class="hei"><!-- 月亮 --><div class="yue"><!-- 大圆 --><div class="da"></div><!-- 小圆 --><div class="xiao"></div></div><!-- 房子 --><div><!-- 屋顶三角形 --><div class="wu"></div><!-- 烟囱 --><div class="yan"></div><!-- 墙 --><div class="qiang"><!-- 窗 --><div class="chuang"><ul><li class="li1"></li><li class="li1"></li><li class="li1"></li><li class="li1"></li></ul></div><!-- 门 --><div class="men"><div class="la"><ul><li class="li2"></li><li class="li3"></li><li class="li4"></li><li class="li5"></li><li class="li4"></li><li class="li5"></li><li class="li6"></li><li class="li7"></li></ul></div></div></div></div><!-- 树 --><div class="tree"><div class="shu1"></div><div class="shu2"></div><div class="shu3"></div><div class="gan"></div></div></div><!-- 草地 --><div class="cao"></div></div>
</body>
</html>

总结：做的不算好，可能是自己练习太少和对知识点的掌握不够熟悉和透彻，本人还在学习中，如有不足之处欢迎大佬指点(๑´ڡ`๑)

【CSS小练习】DIV+CSS布局画图相关推荐

使用div和css重构网站,DIV+CSS网页重构概念详解
本文和大家重点讨论一下DIV+CSS网页重构的概念,常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方 ...
div css教程属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素内联元 ...
html中写css代码,开发DIV CSS时先写CSS代码还是先写HTML代码
相信良多LOVE用DIV+CSS技术启示重构网页的爱好者友好,在起源学习DIV+CSS的时分都邑想一个标题,想晓得DIV+CSS妙手或有教育者在开发制作html页面的时刻,下场是先写html照样先写c ...
HTML5div css入门案例,div+css教学教案(学习入门到精通~)详细讲解.doc
| div+cssHYPERLINK "/"教程(入门到精通) 目录: 一.div+css教程(入门到精通)详细讲解二.DIV+CSS网页布局常用基础知识三.div+css常用 ...
psd转div+css,PSD转DIV+CSS的方法.doc
PSD转DIVCSS的方法把psd页面利用div+css切割成html页面首先看看效果下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹开始时,在您的计算机中创建一个文 ...
html5 div css 页签,div css 实现tabs标签的思路及示例代码
1.创建页签,以及页签内容的div. 2.编写被选中的页签和页签内容div显示.隐藏的样式. 3.编写js方法,根据被选中的页签,显示相应的页签内容. 例如: 复制代码代码如下: function d ...
css html5360百科,div+css
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*( ...
css 浮动解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
html/css题库,DIV+CSS题库
C D 2.在CSS语言中下列哪一项是"左边框"的语法?(C ) A.border-left-width: B.border-top-width: C.border-left: D ...

【CSS小练习】DIV+CSS布局画图

【CSS小练习】DIV+CSS布局画图相关推荐

最新文章

热门文章