使用DIV+CSS为网站侧边栏添加图片和三个按钮链接

安装教程

1、添加CSS:

将以下 CSS 代码添加到所使用主题的 css 文件中,一般是style.css,wordpress的话可以直接在后台使用内置CSS编辑功能,可以预览,非常方便。

#update_version img{margin:5px 0 15px}
#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff}
.blog_link{background-color:#2ba9fa}
.blog_link,.cms_link{float:left;margin-right:5%}
.cms_link{background-color:#ff6969}
.grid_link{float:left;background-color:#70c041}

2、添加HTML代码:

登录站点后台 >> 外观 >> 小工具 >>文本 >>将文本小工具编辑框切换到文本格式,然后将以下DIV代码添加进去并保存即可。

注意:里面的链接地址、图片地址、和ALT说明记得换成你自己的。

<div id="update_version"><a href="/" target="_blank" rel="noopener"><img title="玖华IT知识之家" src="这里填写图片地址" alt="玖华IT知识之家" /></a> 
<a class="blog_link" href="/" target="_blank" rel="noopener">玖华IT</a> <a class="cms_link" href=“/” target="_blank" rel="noopener">玖华博客</a><a class="grid_link" href="/" target="_blank" rel="noopener">玖华知识</a>
<div><i class="be be-daohang"></i> 本站域名:<b><a style="color: red;" href="https://blog.jhacd.com" target="_blank" rel="noopener">blog.jhacd.com</a></b> </div> </div>

效果图

使用DIV+CSS为网站侧边栏添加图片和三个按钮链接插图

这样,我们的网站美化工作就完成了,网站侧边栏多了一个图片和三个按钮,而且这个数量是可以复制增加的,用来做一下广告或者网站功能的扩展都是很不错的。另外,如果你改完后台代码发现网站前台没有变化的话,可以试着删除缓存试一下。

 

版权声明 1 本网站名称:玖华IT知识分享
2 本站永久网址:https://blog.jhacd.com
3 当前文章地址:https://blog.jhacd.com/296.html
4 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ:81754131,进行删除处理。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录