春节将至,正想给自己的网站增加点喜庆氛围,某鸟大佬分享出来的纯代码红灯笼,效果十分完美。代码有html代码和CSS样式两部分,测试过程中发现在移动端访问网站时,也是大红灯笼高高挂,所以本次分享增加了移动端自动影藏代码。
效果演示请看本站首页:https://fsziyuan.cn/
第一步:添加HTML代码
添加HTML代码通常有两种做法,可根据实际情况参考使用。
- 登录服务器,将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的前面。
- 有的主题开发的比较人性化,以7b2主题为例,可以在主题设置里面插入代码。
<!-- 灯笼1 --> <div class="deng-box"> <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> <!-- 灯笼2 --> <div class="deng-box1"> <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>
注意:
- 上面的代码可以只选择【<!– 灯笼1 –>】部分,也就是只显示一个灯笼。
- 如果只想在首页显示灯笼,可以用下面的判断把HTML代码包裹起来:
<?php if (is_home()) { ?> <!-- 把这行用上面的灯笼代码替换 --> <?php } ?>