html圣诞树代码教程(html圣诞节代码大全)

http://www.itjxue.com  2023-03-03 20:30  来源:未知  点击次数: 

怎样用html中的javascript编写一个圣诞树

圣诞树啊,应该是考虑怎样画三角形吧,用border就可以了哈。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

!DOCTYPE html

html

head

title/title

style type="text/css"

.ss{

height: 0;

width: 0;

position: absolute;

border: 20px solid tan;

border-color: transparent transparent #1fd224 transparent;

}

.s1{

border-width:80px ;

top: 100px;

left: 400px;

}

.s2{

border-width:100px ;

top: 115px;

left: 382px;

}

.s3{

border-width:120px ;

top: 126px;

left: 362px;

}

.s4{

border-width:140px ;

top: 140px;

left: 342px;

}

.dd{

height: 130px;

width: 40px;

position: absolute;

top: 420px;

left: 460px;

background-color: #1fd224;

}

/style

/head

body

div class="s1 ss"/div

div class="s2 ss"/div

div class="s3 ss"/div

div class="s4 ss"/div

div class="dd"

/div

/body

/html

看着有点丑,楼主可以改变宽度高度以及颜色哈。最后希望采纳哈

圣诞树的编程代码

第一步是点击鼠标右键,选择新建选项,然后点击mircosoftofficeExcel2007选项,创建一个新的Excel文件。第二步是打开新创建的Excel文件。选择界面顶部的开发工具选项,然后单击宏选项。第三步,编写VBA代码名称,然后点击创建按钮,编写指定的VBA代码,点击插入按钮控件,命名为绘制圣诞树。第四步是选择绘制圣诞树的控件,然后点击鼠标右键,选择指定的宏。第五步,将写好的代码赋给按钮控件,然后点击确定按钮,点击按钮控件一次,圣诞树就自动完成了。

手机圣诞树代码怎么输入

手机圣诞树代码输入方法:

工具:WIN7家庭版、mircosoftofficeExcel2007。

第一步点击鼠标右键,选择新建选项,然后点击mircosoftofficeExcel2007选项新建一个Excel文件。

第二步打开新建的Excel文件。选择界面上方的开发工具选项,然后点击宏选项。

第三步写明VBA代码名称,然后点击创建按钮,写入指定的VBA代码,点击插入一个按钮控件,并命名为画圣诞树。

第四步选中画圣诞树控件,然后点击鼠标右键,选择指定宏。

第五步将编写的代码指定至按钮控件上,然后点击确定按钮,点击一次按钮控件,圣诞树就自动画完了。

如何用CSS控制div画三角形,圣诞树

新建文本文档】

在桌面新建一个文本文档,并命名为“三角形”,打开新建的文本文档,把html里的doctype、head、body等框架搭好。

【注意】可以在写完之后再重新重命名为.html文件。

2

【创建div并用border属性控制】

布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制,

#tri{

width: 0px;

height: 0px;

border-top: 400px solid red;

border-right: 400px solid blue;

border-bottom: 400px solid green;

border-left: 400px solid yellow;

}

【注意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。

3

【修改并选择自己想要的三角形】

上述代码画的还不是三角形,但是是四个三角,只要将border周边的颜色变成白色就可以了,例如除了border-bottom: 100px solid green;其余全变为white,就会看到如下效果,当然你也可以根据自己需要来调整。

此外可以将border-top的像素设为0;其余两边也调小一点并且颜色设为白色,就会只看到底下的一个三角形了。

【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同,就是border设定不同的原因。

4

代码如下仅做参考:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

title三角练习/title

style

#tri{

width: 0px;

height: 0px;

border-top: 0px solid white;

border-right: 100px solid white;

border-bottom: 400px solid green;

border-left: 100px solid white;

}

/style

/head

body

div id="tri"/div

/body

/html

END

画圣诞树

【画两个三角】

用上面三角形的基础,先画出两个大小不同三角形。

#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;

}

【利用浮动以及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;

}

【画树干】

再加入一个div名字为footer,控制其大小形状与颜色,并用margin调整期位置。

#footer{

width: 100px;

height: 200px;

background: gray;

margin-left: 150px;

}

最终,经过调整得到一课圣诞树。如下图所示

完整代码如下,仅做参考

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html lang="en"

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

2022圣诞树代码

2022圣诞树代码python。简单的绘制圣诞树新建tree1.py或者直接输入下面代码运行#声明树的高度,height=5,树的雪花数,初始为1,stars=1,以数的高度作为循环次数,foriinrange(height):print((’’*(height-i))+(’*’*stars)),stars+=2,代码就是程序员用开发工具所支持的语言写出来的源文件,是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支,某种意义上来说,源代码相当于代码。现代程序语言中,源代码可以书籍或磁带形式出现,但最为常用格式是文本文件,这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令,这种过程叫编译,它由通过编译器完成。

(责任编辑:IT教学网)

更多

推荐计算机等级考试文章