过年了,纯代码实现给网站挂两个红灯笼

春节将至,正想给自己的网站增加点喜庆氛围,某鸟大佬分享出来的纯代码红灯笼,效果十分完美。代码有html代码和CSS样式两部分,测试过程中发现在移动端访问网站时,也是大红灯笼高高挂,所以本次分享增加了移动端自动影藏代码。

效果演示请看本站首页:https://fsziyuan.cn/

第一步:添加HTML代码

添加HTML代码通常有两种做法,可根据实际情况参考使用。

  1. 登录服务器,将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的前面。
  2. 有的主题开发的比较人性化,以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 } ?>
12
实用教程

两行代码给你的个人网站上加上春节灯笼

2020-1-23 11:16:30

实用教程

JS代码快速提升网站关键词排名教程 #SEO教程#

2020-1-25 3:10:04

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索