提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
前言
一年一度的圣诞节马上就要到了,看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享2种不同风格的圣诞树,附上完整代码,拿来即用可以按照自己的喜好来去运行使用哦。
一、可以改名字的圣诞树
大家可以在圣诞快乐这里改成自己需要的字,比如名字或者其他的祝福语。
怎么改中间的名字呢?
找到代码182行的 圣诞快乐 去改成你需要的文字内容即可
1、下面是完整的代码展示,是HTML哈,运行起来也很方便。
body, html {
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Press Start 2P", cursive;
}
.center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
display: flex;
align-items: center;
}
.center .text-center {
text-align: center;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #161616;
color: #c5a880;
font-family: sans-serif;
}
label {
display: inline-block;
background-color: #161616;
padding: 16px;
border-radius: 0.3rem;
cursor: pointer;
margin-top: 1rem;
width: 300px;
border-radius: 10px;
border: 1px solid #c5a880;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.btn {
background-color: #161616;
border-radius: 10px;
color: #c5a880;
border: 1px solid #c5a880;
padding: 16px;
width: 300px;
margin-bottom: 16px;
line-height: 1.5;
cursor: pointer;
}
.separator {
font-weight: bold;
text-align: center;
width: 300px;
margin: 16px 0px;
color: #a07676;
}
.title {
color: #a07676;
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 16px;
}
.text-loading {
font-size: 2rem;
}
本文由 用户 于 2024-01-02 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/15797389.html
发表评论