给网站添加一对春节灯笼

jipa233 技术分享 发布于 2023-01-14 最后更新于 2024-10-14 10,446 次阅读


AI 摘要

给网站添加春节灯笼的教程包括以下步骤:首先,引入CSS样式;然后,设置灯笼中的文字,默认显示为「春节」,通过特定的HTML结构实现灯笼的视觉效果。

春节就要来了,给你的站点装饰一下吧,那么加一个灯笼怎么样?

下面开始教程!

1.引入css

<link rel="stylesheet" href="https://jipa.moe/static/xcdl.css" type="text/css" />

2.设置灯笼中的文字(默认为「春节」)

<div class="deng-l">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>

<div class="deng-r">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">节</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>