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

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

ZBlog | 2021年01月03日22:46:06 | 阅读:271 | 评论:0

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

前言

《三栏自适应博客主题》主题功能介绍:bufanz.com/post/109.html

《三栏自适应博客主题》主题配置使用教程:bufanz.com/post/111.html

CSS是什么?

  CSS是定义网页样式结构,比如修改网页背景颜色、背景图,模块背景颜色、不透明度(如果有背景图,能看到背景图),文字大小、颜色等等,被用于描述网页上的信息格式化和显示的方式,可以把网页样式美化成你想要样式或者配色,下图是美化前后对比。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

  此主题增加了自定义CSS接口,主题更新后不会改变设置的自定义CSS代码,所以这是方便之处。

如何查看页面样式结构的名称和代码

鼠标右键点击网页需要修改样式的地方,点击“检查”,或者在页面按F12键。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

注意下图样式文件名称,有style.css:xx(xx是此代码的行数)的是样式原文件,需要修改代码先在这里测试。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

修改操作。(选好颜色按回车键保存颜色值)

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

如何保存修改后的CSS代码

在上图中,我演示的是修改导航栏背景色,修改好了后,复制该样式结构名称和已修改的代码。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

要复制的代码:

.navbar {
    background-color: #61c577;
}

该样式结构的其它代码未修改就不用复制。

在主题配置的自定义CSS加入以上的代码,再保存配置。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

CSS代码可以改成单行:

.navbar {background-color:#61c577}

结构名称和左大括号之间必须有空格。

样式修改了2个以上的代码,用分号间隔,最后一个代码可以不加分号:

.navbar {background-color:#61c577;border-bottom:1px solid #61c577}

多个样式结构有一样的代码,样式结构名称用逗号分隔:

.panel,.navbar {background-color:#61c577;border-bottom:1px solid #61c577}

在原样式添加其它代码

比如在网页每个模块添加阴影效果

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

通过浏览器的“检查”找到样式结构代码,添加以下代码:

box-shadow: 0 1px 3px rgba(26,26,26,.5)

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

在自定义CSS中添加以下代码:

.panel {
    box-shadow: 0 1px 3px rgba(26,26,26,.5)
}

上面代码box-shadow的值,是推荐值,可以随意修改阴影方式、颜色、距离、不透明度等等。

《三栏自适应博客主题》的自定义CSS用法 美化页面样式

未完待续……

淘宝购物先领券,更省钱

本文标题:《三栏自适应博客主题》的自定义CSS用法 美化页面样式

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

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

网友点评 展开评论

本文暂无评论 - 欢迎您

  • 文章

    163篇

  • 评论

    100条

  • 用户

    178位