利用CSS画一颗圣诞树（两个叶子，三叶标记未完成）

最新推荐文章于 2023-11-10 17:55:12 发布
最新推荐文章于 2023-11-10 17:55:12 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： HTML 文章标签： html css 布局
前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ
本文链接：https://blog.csdn.net/XZZ2222/article/details/52489861
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用CSS画一颗圣诞树</title>
<style>
<span style="background-color: rgb(102, 204, 204);">#leaf1
{
width:0px;height:0px;top:10px;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid green;
border-left:100px solid transparent;
float:left;
margin-left:100px;
}

#leaf2
{
width:0px;height:0px;
border-top:200px solid transparent;
border-right:200px solid transparent;
border-bottom:200px solid green;
border-left:200px solid transparent;
margin-top:-30px;
}

#trunk</span>
<span style="background-color: rgb(102, 204, 204);">{
width:30px;height:80px;
background:#663300;float:left;margin-left:180px;margin-top:0px;
}</span>

</style>

</head>

<body>
<span style="background-color: rgb(51, 204, 255);"><div id="leaf1"></div>
<div id="leaf2"></div>
<div id="trunk"></div>
</span>
</body>
</html>

 

效果：
 


 

 

 


 
 

 

 


                

        

        

    




    

      

        

            

              
                
                  PromiseXuu
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
如何用java画一颗圣诞树

				
			

			

				

					秋雨绵绵
				

				

					07-26
					
					1万+
					
				

			

		

		

			
				
如何用java画一颗圣诞树
    哈喽 ，今天教各位一个有趣的代码，利用for循环简单地画一个圣诞树。
代码如下：

```java
public class Dan {
	public static void main(String[] args) {
		for(int i = 1;i<=5;i++) {//设置树叶部分，共五行；
			for(int j = 1;j<=5-i;j++) {
				System.out.print(" ");//设

			
		

	



                

              
                



	

		

			

				
					
7-3 特殊的圣诞树 (10 分)

				
			

			

				

					rylrmr的博客
				

				

					11-28
					
					1682
					
				

			

		

		

			
				
7-3 特殊的圣诞树 (10 分)（Python）
圣诞节快到了，每个人都在建造圣诞树，你也不例外。然而，你是特别的，你想建立一棵特别的。你决定建立一个二叉树的圣诞树，并把它的根悬挂在天花板上。对于一颗二叉树，最上面的节点称为根节点，树中的每个节点都可能有0、1或2个子节点，没有子节点的节点称为叶子。除了根节点没有父节点之外，每个节点都有且只有一个父节点。你买了一个装饰包，里面装了一些装饰品，你想用它们来装饰树上所有的叶子，由于被你房间的高度限制，所以树不能比你的房屋高。树的高度是从根到最远叶子的路径上的边

			
		

	



                


  
              

                


	

		

			

				
					
如何用python画一个圣诞树？附源码

					
最新发布

				
			

			

				

					xiaoganbuaiuk的博客
				

				

					11-10
					
					1009
					
				

			

		

		

			
				
我们可以使用递归方式来绘制圣诞树。在每一层递归中，我们先绘制树干，然后根据递归深度绘制左右两个分支，最后返回上一级。在绘制过程中，我们使用了一些简单的数学运算和turtle库的函数来控制海龟的行动。感兴趣的小伙伴，完整代码和全套Python学习资料免费赠送，包含面试题、简历资料等具体看下方。一、Python所有方向的学习路线Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。二、Python必备开发工具。

			
		

	





	

		

			

				
					
如何用Java画一棵简单的圣诞树

				
			

			

				

					WJ13282897835的博客
				

				

					12-20
					
					2269
					
				

			

		

		

			
				
"-"部分     "*"部分
--------------*                 14           1        第一部分
-------------* *                13           2
------------* * *               12           3
-----------* * * *              11           4
------...

			
		

	



		

			
		



	

		

			

				
					
用CSS画三角形，圣诞树

				
			

			

				

					哈哈__哈哈的专栏
				

				

					12-25
					
					316
					
				

			

		

		

			
				

 
&lt;html&gt;
	&lt;head&gt;
		&lt;style type="text/css"&gt;
			#main1{
				width: 1000px;
				height: 500px;
				background-color: gray;
			}

			#triangle{
				width: 200px;
				height:...

			
		

	





	

		

			

				
					
圣诞树源码-纯CSS制作螺旋圣诞树动画源码下载

				
			

			

				

					12-16
				

			

		

		

			
				
本文将详细讲解如何使用纯CSS技术来创建一个螺旋圣诞树动画。这个动画源码是一个精美的节日装饰，完全由CSS代码构建，无需额外的HTML5或者其他编程语言支持。通过理解和学习这个源码，你可以深入了解CSS的动画效果...

			
		

	





	

		

			

				
					
CSS3动画实现圣诞树源码

				
			

			

				

					12-05
				

			

		

		

			
				
使用H5+CSS3动画实现圣诞树源码

			
		

	





	

		

			

				
					
运用html+css+js三件套实现动态圣诞树

				
			

			

				

					12-21
				

			

		

		

			
				
运用html+css+js三件套实现动态圣诞树

			
		

	





	

		

			

				
					
CSS3圣诞树雪人下雪动画效果特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
【CSS3圣诞树雪人下雪动画效果特效代码】是一个运用了CSS3技术来实现的网页动态效果，它为用户营造出一个充满节日氛围的视觉体验。在这个特效中，主要包含以下几个关键知识点：  1. CSS3选择器：CSS3引入了许多新的...

			
		

	





	

		

			

				
					
圣诞树源码html+css圣诞树.zip

				
			

			

				

					12-02
				

			

		

		

			
				
圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞...

			
		

	





	

		

			

				
					
用java实现菱形和圣诞树图案的输出

				
			

			

				

					09-25
				

			

		

		

			
				
用循环语句控制输出5种图案：菱形，圣诞树，三角形，长方形，平行四边形

			
		

	





	

		

			

				
					
Java学习笔记4-圣诞树

				
			

			

				

					08-03
				

			

		

		

			
				
NULL
博文链接：https://ji2jsj.iteye.com/blog/1993256

			
		

	





	

		

			

				
					
css3绘制的卡通彩色圣诞树旋转动画特效

				
			

			

				

					06-11
				

			

		

		

			
				
一款基于css3 keyframes属性绘制的卡通彩色圣诞树旋转动画特效，一开场五角星从底部围绕圣诞树旋转上升到圣诞树顶部定住。

			
		

	





	

		

			

				
					
Html5+CSS3+JS代码实现动态圣诞树

				
			

			

				

					王春燕的博客
				

				

					06-24
					
					6792
					
				

			

		

		

			
				
整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片
树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容
树的动态旋转通过js实现、主干是html5、样式CSS......

			
		

	





	

		

			

				
					
【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果

				
			

			

				

					小5聊的博客
				

				

					12-14
					
					439
					
				

			

		

		

			
				
虽然jQuery时代已经逐渐退出历史舞台，在拥抱vue的同时，也还是可以用jQuery锻炼下编程思维，毕竟比较灵活。

			
		

	





	

		

			

				
					
如何用html+css做一颗圣诞树

					
热门推荐

				
			

			

				

					IT_zxl001的博客
				

				

					04-09
					
					1万+
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;demo&lt;/title&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;style type="text/css"&gt;
		
		.div1{
			
			border-style: solid

			
		

	





	

		

			

				
					
用Java画一个圣诞树_java – 用“X”画一棵圣诞树

				
			

			

				

					weixin_29800175的博客
				

				

					02-25
					
					1899
					
				

			

		

		

			
				
编写制作三角形的方法然后在创建圣诞树时在方法中调用它是很好的：public static void main(String[] args) {drawChristmasTree(4);}private static void drawChristmasTree(int n) {for (int i = 0; i < n; i++) {triangle(i+1,n);}}private sta...

			
		

	





	

		

			

				
					
【搜索】【RQNOJ】圣诞树

				
			

			

				

					liveas的专栏
				

				

					07-10
					
					1493
					
				

			

		

		

			
				
<br />题目描述<br />圣诞特别礼物挂在一棵圣诞树上，这棵树有n层，每层有一件礼物，每件礼物都有一个价值，有的礼物还有一些连结线，与下层的礼物相连，领取礼物的规则如下：任选一件礼物，它的下面如果有连结线，则可以继续取它连结的礼物，以此类推，直至取到没有连结线的礼物才结束，你如果是第一个去取，怎样取才能获得最大的价值呢？请你编一程序解决这一问题。输入格式<br />输入文件tree.in的第一行只有一个数据n(n<=100),表示有n层礼物，以下有n行数据，分别表示第1-n层礼物的状态，每行至少由一个

			
		

	





	

		

			

				
					
html如何制作圣诞树,怎么用css画圣诞树？

				
			

			

				

					weixin_39562340的博客
				

				

					06-15
					
					9844
					
				

			

		

		

			
				
html与css学习过程中会遇到各种各样的问题，当然也有很多有趣的实战应用，今天与大家分享如何用css来控制div画三角形，进一步画出圣诞树。画圣诞树，我们首先需要会用css画三角形，(相关推荐：如何用css3画三角形)。学会了画三角形，我们就可以开始画圣诞树了。用css画圣诞树的步骤：(1)画两个三角形，先画出两个大小不同三角形。#tri1{width: 0px;height: 0px;bord...

			
		

	





	

		

			

				
					
使用css画一颗苹果树，叶子是蓝色的，苹果是黄色的

				
			

			

				

					03-23
				

			

		

		

			
				
好的，以下是使用 CSS 画一颗苹果树，叶子是蓝色的，苹果是黄色的代码：  HTML 代码：  ```   <div class="trunk"></div>  <div class="leaves"></div>  <div class="apple"></div>  ```  CSS 代码：  ``` .tree {  ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值