看到群里有兄弟发CSS过年灯笼的教程,我就把我在7B2群里有分享的老哥给的文件和教程发一下吧
第一步、添加HTML代码
将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的上面。
<!-- 灯笼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>
2、复制下面的css代码添加到你网站上面。
放在下载文件里了
因为代码中有中文,编辑后需要将模板文件保存为 UTF-8 无 BOM(无签名)的格式,后台主题编辑中修改可以忽略,上面的代码可以只加一个,个人感觉挂两个灯笼更灵动些。
第三步、添加样式
将样式代码添加到 WP 后台 → 外观 → 自定义 → 额外 CSS 中,点击“发布”即可
也可以将样式代码直接加到主题样式文件 style.css 的最后。可能灯笼上的文字字号在有些主题上有点大,可以适当修改第 133 行的字号:
font-size: 3.2rem;
如果只想在首页显示灯笼,可以用下面的判断语句把上面的代码包裹起来:
代码在手机上显示效果不是很好,如果不想在手机上显示可以在自定义代码添加:
@media screen and (max-width: 550px) { .deng { display: none; } deng-box { display: none; } .deng-box1 { display: none; } }
添加梅花背景 将下面的 HTML 代码添加到主题页脚模板 footer.php,灯笼代码的
上面添加 CSS 将样式代码添加到 WP 后台 → 外观 → 自定义 → 额外 CSS 中,
点击“发布”即可 /** 梅花树 **/ .meiha { position: fixed; top: 0; right: 0; z-index: 999; width: 350px;/** PNG 图宽度 **/ height: 231px;/** PNG
图高度 **/ pointer-events: none; background: url('https://s2.ax1x.com/2020/01/21/1kBpid.png'); } 如果只想显示在
首页,可以用下面的判断语句把上面的代码包裹起来: