导航:首页 > 源码编译 > 圣诞树源码html

圣诞树源码html

发布时间:2024-08-03 17:45:04

Ⅰ 如何用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" "http://www.w3.org/TR/html4/loose.dtd">
<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" "http://www.w3.org/TR/html4/loose.dtd">
<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>

Ⅱ 在HTML中,如何用CSS画一棵圣诞树请高手指教

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

<!DOCTYPEhtml>
<html>
<head>
<title></title>
<styletype="text/css">
.ss{
height:0;
width:0;
position:absolute;
border:20pxsolidtan;
border-color:transparenttransparent#1fd224transparent;
}
.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>
<divclass="s1ss"></div>
<divclass="s2ss"></div>
<divclass="s3ss"></div>
<divclass="s4ss"></div>
<divclass="dd">

</div>
</body>
</html>

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

Ⅲ VB 编写程序 打印圣诞树图案

tab表示需要先空几格再开始print
Private Sub Command1_Click()
'第一个三角形树叶3行
For i = 1 To 3
Print Tab(20 - j);
For j = 1 To 2 * i - 1
Print "▲";
Next j
Next i

'第二个三角形树叶5行
For m = 1 To 5
Print Tab(20 - n);
For n = 1 To 2 * m - 1
Print "▲";
Next n
Next m

'第三个三角形树叶7行
For f = 1 To 7
Print Tab(20 - g);
For g = 1 To 2 * f - 1
Print "▲";
Next g
Next f

'树根,4行,每行打印2个三角形
For k = 1 To 4
Print Tab(19); "▲▲"
Next k
End Sub

阅读全文

与圣诞树源码html相关的资料

热点内容
安卓怎么下载植物大战僵尸1无尽版 浏览:260
程序员上班下班难吗 浏览:297
梦的pdf微盘 浏览:186
材料结构分析pdf 浏览:795
程序员预研的项目 浏览:346
新华保险服务器登录不上怎么回事 浏览:397
气温高时汽车空调压缩机振动 浏览:563
分配器python 浏览:228
outlook服务器怎么查询 浏览:400
python预测疫情代码 浏览:982
普通化学原理pdf 浏览:908
java的圣经 浏览:41
python遍历两个数组 浏览:396
手游搭建云服务器 浏览:401
视易锋云服务器启动黑屏 浏览:139
python怎么获取网页a标签内容 浏览:982
app更新后老的安装包去哪里了 浏览:199
集合运算法则差集 浏览:310
x2pdf 浏览:271
python源码cs 浏览:101