不凡博客(Bufanz.com)

业务范围

网站搭建、优化、故障排查。
电脑故障排查、删除弹窗广告、重装系统、优化系统
32624142(请注明来意)
首页 > ZBlog > 正文

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

ZBlog | 2021年01月03日22:46:06

云闪付,新人注册领券5元话费券10元生活、购物券

前言

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

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

CSS是什么?

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

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

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

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

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

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

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

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

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

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

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

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

如何保存修改后的CSS代码

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

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

要复制的代码如下:

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

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

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

《三栏新拟态自适应SEO博客主题》的自定义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}

在原样式添加其它代码

比如在每个模块添加阴影效果,如下图:

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

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

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

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

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

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

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

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

淘宝购物先领券,更省钱

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

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

版权声明:本文章是 不凡博客(Bufanz.com) 的原创文章,未经允许请勿转载本文章!