前言
如果浏览了星语小木屋,就发现网站的有侧多了个显示日期+古诗一言。
效果图
教程
1.进入后台,找到 外观—自定义
2.点击小工具
3.点击 {论坛}首页-侧边栏
4.点击添加小工具 下滑找到 自定义html
5.点击展开刚添加的小工具,将代码填入
6.或者根据自己的需求放到需要的位置也可以。
代码
<style>
.wiiuii-suiji-main span{color:#fff}.wiiuii-suiji-main{background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer;height:320px;border-radius:var(--main-radius);position:relative}.wiiuii-suiji-header{display:flex;justify-content:space-between}.xingyu-dt-ty{padding:20px;display:flex;flex-direction:column}.xingyu-dt-day{font-size:60px;font-weight:700;color:#fff}.xingyu-sj-date{font-size:16px;font-weight:700;color:#fff}.xingyu-sjzt-ty{line-height:25px;height:200px;writing-mode:vertical-rl;padding:15px;color:#fff;font-size:15px}.xingyu-sj-qhbtn{position:absolute;bottom:30px;padding:10px}.xingyu-sj-qhbtn>span>i{font-size:16px}.xingyu-sj-qhbtn span:hover{color:#f44336}.xingyu-sjtitle-ty{position:absolute;bottom:0;text-align:center;left:0;right:0;bottom:0;padding:5px}
</style>
<div class="wiiuii-suiji-main">
<div class="wiiuii-suiji-header">
<div class="xingyu-dt-ty">
<span class="xingyu-dt-day wiiuiiDay"></span>
<p class="xingyu-sj-date">
<span class="wiiuiiYear"></span>
<span class="wiiuiiMonth"></span>
</p>
</div>
<div class="xingyu-sjzt-ty">
<span class="xingyu-yiyin"></span>
</div>
</div>
<div class="xingyu-sj-qhbtn">
<span id="xingyu-qh-btn"><i class="fa fa-paper-plane" aria-hidden="true"></i> 换一句</span>
</div>
<div class="xingyu-sjtitle-ty">
<span>——更多教程,关注轻论坛——</span>
</div>
</div>
<script type="text/javascript" src="https://www.atbkw.cn/aotian/js/yiyin-img.js"></script>
关于JS文件
如果大家不觉得麻烦的话,可以自己修改背景图和一言,代码放到下面,自己创建一个JS文件然后复制进去,自己修改后调用。如果觉得麻烦可以自己用本站的就好。
[重要]:一言修改或者添加在“wiiuiiYiYan”这里面,背景图修改或者添加在“wiiuiiYiYanBg”里面。
没有回复内容