不凡博客(Bufanz.com)
ZBlog/WordPress网站搭建
ZBlog/WordPress速度优化
ZBlog/WordPress插件定制
ZBlog主题模板定制、仿站
32624142(注明来意)

ZBlog主题的自定义CSS用法

ZBlog | 2020年09月17日11:11:39 | 阅读:924 | 评论:0

爱奇艺独家折扣,黄金VIP仅需99元

ZBlog主题的自定义CSS用法

自定义CSS是什么?

  自定义CSS可以改变网页样式,它的优势是,只需在主题配置内加入代码就可以改变网页样式,再是,主题更新后,不会影响到自定义CSS代码,不用每次主题更新后在主题的CSS文件内修改代码,所以,自定义CSS是个好东西。

ZBlog主题的自定义CSS用法

自定义CSS代码获取方法

需要基于Chrome内核的网页浏览器,如QQ浏览器、UC浏览器、搜狗浏览器等等。

一、在要修改样式的地方点击右键,选择“检查”。

ZBlog主题的自定义CSS用法

二、比如修改侧栏的背景颜色,

ZBlog主题的自定义CSS用法

三、复制以下红框内的代码,代码是:.widget {background: #15ecc5;},粘贴到主题配置的自定义CSS内,打开自定义CSS开关,保存配置,再次刷新首页,侧栏的背景色变成青色。

ZBlog主题的自定义CSS用法

ZBlog主题的自定义CSS用法

四、侧栏的标题还有背景色,可以将标题的背景色改成侧栏背景色,或者加透明度。在“用户中心”点击右键,再点“检查”。

ZBlog主题的自定义CSS用法

ZBlog主题的自定义CSS用法

五、代码是:.widget-title span {background: #15ecc5;},我认为加上透明度更好点,以后要是换其它颜色,这里的代码不用再次修改了,代码是:.widget-title span{background: rgba(0, 0, 0, 0);}

ZBlog主题的自定义CSS用法

六、修改背景颜色,在网页代码中找到<body,在右边找到背景色的代码并修改颜色,代码是:body {background-color: #a72a2a;}

ZBlog主题的自定义CSS用法

七、如果要添加背景图片,代码是:body {background-image: url(图片地址);}

ZBlog主题的自定义CSS用法

视频教程

如何查看别人的自定义CSS代码

在网页点右键,选择“查看网页源代码”,<style>和</style>之间的代码。

ZBlog主题的自定义CSS用法

淘宝购物先领券,更省钱

本文标题:ZBlog主题的自定义CSS用法

本文链接:https://bufanz.com/post/74.html

温馨提示:本文是作者 不凡 的原创文章,转载请注明出处和附带本文链接!

网友点评 展开评论

本文暂无评论 - 欢迎您

  • 文章

    158篇

  • 评论

    106条

  • 用户

    168位