画圣诞树,我们首先需要会用css画三角形,(相关推荐:如何用css3画三角形)。
学会了画三角形,我们就可以开始画圣诞树了。
用css画圣诞树的步骤:
(1)画两个三角形,先画出两个大小不同三角形。
#tri1{ width: 0px; height: 0px; border-top: 100px solid white; border-right: 100px solid white; border-bottom: 100px solid green; border-left: 100px solid white; } #tri2{ width: 0px; height: 0px; border-top: 200px solid white; border-right: 200px solid white; border-bottom: 200px solid green; border-left: 200px solid white; }
(2)利用浮动以及margin调到合适位置
将第一个小三角形浮动起来,这样就覆盖到第2个上面,然后利用margin值调动位置,最终显示出圣诞树的上面内容,代码如下
#tri1{ width: 0px; height: 0px; border-top: 100px solid white; border-right: 100px solid white; border-bottom: 100px solid green; border-left: 100px solid white; float: left; margin-left: 100px; } #tri2{ width: 0px; height: 0px; border-top: 200px solid white; border-right: 200px solid white; border-bottom: 200px solid green; border-left: 200px solid white; }
(3)、画树干
再加入一个div名字为footer,控制其大小形状与颜色,并用margin调整期位置。
#footer{ width: 100px; height: 200px; background: gray; margin-left: 150px; }
最终,经过调整得到一课圣诞树。如下图所示(推荐学习:CSS视频教程)
所有代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>圣诞树练习</title> <style> #header{ width: 0px; height: 0px; border-top: 100px solid white; border-right: 100px solid white; border-bottom: 100px solid green; border-left: 100px solid white; float: left; margin-left: 100px; } #main{ width: 0px; height: 0px; border-top: 200px solid white; border-right: 200px solid white; border-bottom: 200px solid green; border-left: 200px solid white; } #footer{ width: 100px; height: 200px; background: gray; margin-left: 150px; } </style> </head> <body> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </body> </html>
© 著作权归作者所有
举报
发表评论
0/200