首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

详谈如何定制自己的博客园皮肤

页面定制CSS代码 博客侧边栏公告 页首Html代码 页脚Html代码 (2)页面定制CSS代码 不必添加内容,但是需要勾选 禁用模板默认CSS。 (3)博客侧边栏公告 添加以下代码: <!...定制博客CSS 的原理 为了帮助理解,说明这些输入框的作用时,我都截取了浏览器开发者工具的截图。 说明 市场上流行的浏览器基本上都支持开发者工具,一般快捷键为 F12。...页面定制CSS代码 在这里添加的 css 代码会被博客园添加到一个临时 css 文件中,并用于渲染你的博客页面。...注意 如果勾选 禁用模板默认CSS ,则你选中的博客皮肤的 css 效果将失效。 博客侧边栏公告 在这里添加代码会被嵌入到博客园页面的 sideBar 下。...另外,需要将博客管理后台的主标题、子标题清空。 文章内容样式定制 有关文章内容的样式定制,我都写入了 cnblog.js 和 cnblog.css。当然,为了提高访问速度,这两个文件被我压缩了。

69320
您找到你想要的搜索结果了吗?
是的
没有找到

详谈如何定制自己的博客园皮肤

页面定制CSS代码 博客侧边栏公告 页首Html代码 页脚Html代码 (2)页面定制CSS代码 不必添加内容,但是需要勾选 禁用模板默认CSS。 (3)博客侧边栏公告 添加以下代码: <!...定制博客CSS 的原理 为了帮助理解,说明这些输入框的作用时,我都截取了浏览器开发者工具的截图。 说明 市场上流行的浏览器基本上都支持开发者工具,一般快捷键为 F12。...页面定制CSS代码 在这里添加的 css 代码会被博客园添加到一个临时 css 文件中,并用于渲染你的博客页面。 ?...另外,需要将博客管理后台的主标题、子标题清空。 ? 文章内容样式定制 有关文章内容的样式定制,我都写入了 cnblog.js 和 cnblog.css。当然,为了提高访问速度,这两个文件被我压缩了。...如果想在我的源码基础上作一些修改,可以在这里访问源码: cnblog.js cnblog.css 带头像的评论栏 博客园的评论栏默认不显示用户头像,这样显得非常单调。所以我添加了一段定制代码。

2.2K00

博客园装修】博客css美化仿B站

本文链接:https://blog.csdn.net/shiliang97/article/details/103301032 很久不用博客园了,博客园是我最早开始写博客的平台https://www.cnblogs.com.../hx97/,忽然想继续在博客园上写一些文章,但是博客园的皮肤不是特别喜欢了,(挺喜欢的,但是不是特别喜欢,我觉得换的好看一点点会让我更想写下去。)...博客更换前 ? ? 更换成Blibili样式,参考教程https://www.cnblogs.com/gshang/p/11869120.html 最后面是我的教程,也可以直接看原教程。...展示下我的博客效果 ? ? 只需要后台找到设置,然后换成Custom皮肤 ?...然后插入一行代码即可(引用人家写好的css) @import url(https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.19.1.css

1.3K20

博客css样式代码

本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。...0 获取权限 首先,在自定一个博客样式之前,我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。...【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 。...1 美化文章标题 在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。...important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; }  2 加一个可爱的返回顶部功能 css代码

2.4K20

技巧 - 快速定制生成 Ant Design 主题 CSS 文件

温馨提示:因微信中外链都无法点击,请通过文末的 “阅读原文” 到技术博客中完整查阅版; 1、起因 因为项目的缘故,Antd 的样式 CSS 文件通过 link 标签引入,而该项目又要求自定义 Antd...我首先想到的能否直接去官网能否直接定制并下载 CSS 文件。 然而答案是 否定 的。...作为业界优秀的开源项目,Antd 提供了自定义定制主题样式的方法(在官网 定制主题 就有详细的说明)然而 Antd 却只提供了 LESS 样式定制的功能,并没有提供现成的生成 CSS 样式文件定制并下载的功能...利用关键字 antd theme css custom 搜索一番,还真找到几篇有用的文章(见文末参考文档)。随后经过本人的总结和实践,就有了本文介绍的定制生成 Antd 主题 CSS 样式文件的方法。...4、小结 从上可看到整个过程一次就能上手,后续想要生成另外一份定制CSS 文件就更简单了: 修改自定义的 my-theme.less 文件中的样式变量 执行 lessc --js my-theme.less

2.9K20

使用CSS变量实现主题定制真的很简单

主题定制 Varlet是通过css变量来组织样式的,什么是css变量呢,其实很简单,首先声明自定义的css属性,随便声明在哪个元素上都可以,不过只有该元素的后代才能使用,所以如果要声明全局所有元素都能使用的话...函数调用即可: div { background-color: var(--main-bg-color); } 只要更改了--main-bg-color属性的值,所有使用该样式变量的地方都会更新,所以主题定制靠的就是这个...组件式调用 组件式调用可以有范围性的定制组件样式,避免全局污染,使用示例: import { ref, reactive } from 'vue' const state...变量设置到该div上,这样这些css变量只会影响它的子孙元素。...变量,其实就是内置了一套暗黑模式的css变量: 总结 可以发现使用css变量来实现主题定制和暗黑模式是非常简单的,兼容性也非常好,各位如果有涉及到换肤的需求都可以优先考虑使用。

62510

CSS博客网站添加时光轴记录

我们玩独立博客的,都会有一个关于或发展历程的页面,专门用来记录我们折腾博客的一些重大事情。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。...在我们所使用的 WordPress 主题的 style.css 文件后面添加以下代码: /* 站点动态时间轴 */ #teamnewslist ol{list-style:none;margin-left...2、由于这个时光轴仅仅是通过 CSS 来实现,所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。...3、同样是因为时光轴是通过 CSS 来实现,所以任何博客网站,包括 WordPress、zblog 等程序建立的博客网站都可以按这个方法成功添加时光轴记录。 沈唁志|一个PHPer的成长之路!...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:纯CSS博客网站添加时光轴记录

60130

Typecho | 博客css和js无法加载 前台样式崩了 https相关

过程记录 今天为博客申请了一个SSL证书,安装完成以后开启了强制HTTPS,然后在博客后台设置-基本-站点地址 把原先的http地址改为了https。此时一切都还正常。...然后我又把SSL证书部署取消了,结果在http下访问出问题,博客无法加载任何css样式和js!...如图: 失去css和js就是这么丑 错误原因 如上所述,css与js无法加载,F12调出调试发现,竟然是因为所有css和js的路径都带https!...因为把服务器SSL证书取消部署以后,忘记在博客后台改站点地址了。...Error:总结:设置-基本-站点地址选项和博客前台css、js以及文章图片路径相关联,错误设置会导致无法加载样式和文章图片。

2.1K40

定制一个 Vue 3 模板 - 集成 Vite, Pinia, Vue Router 与 Tailwind CSS

技术栈 这个后台模板中,用到了如下的框架或库: Vite Pinia Vue Router Tailwind CSS Vite SVG loader 前提 开始之前,首先要安装 Node.js,这个自行百度解决...vue3-boilerplate npm install npm run dev 运行后在本地开发环境中查看 http://127.0.0.1:5173 此示例页面: 图片 添加 Tailwind CSS...按照这个指南,我们安装Tailwind CSS,然后初始化配置文件。...,其中包含以下内容(指令): @tailwind base; @tailwind components; @tailwind utilities; 然后在 /src/assets/main.css 顶部导入它.../tailwind.css"; 由于我们已经在 /src/main.js 中导入了 /src/assets/main.css 文件,所以,现在就可以在项目中使用 Tailwind 的实用类了。

2K10

网站定制的好处,如何网站定制

网站定制在现在这个网络信息十分发达的社会已经越来越流行了,网站就像是一个桥梁,可以让在网络上将大家联系在一起,网站定制也成为了许多企业的选择,下面我们将为大家介绍网站定制。...image.png 一、网站定制的好处 网站定制的好处是非常多的,和传统的网站有所不同,它是根据企业的产品特点等来量身定做的网站。...进行网站定制也可以满足客户的需求,通过网站定制,客户是可以自己在上面选择出最适合的方案,这样不仅可以节省不少的时间,也可以让客户满意。...二、如何网站定制 要进行网站定制,我们是可以上网搜索网站定制,一般就会出现很多相关的网站公司,这些网站公司是可以进行网站定制的,而且通过这样的方式,是可以让专门的人员设立网站。...能够拥有自己的网站定制,这对于品牌的宣传,企业形象的提升都是有着非常大的作用,所以现在网站定制是比较流行了,希望上面的内容能够帮助到大家。

1.5K20
领券