手动修改博客css样式,打造属于自己的博客样式

小鸡
阅读2119喜欢3·教程发表2018-11-4更新2018-11-4

这两天花了点时间修改了下自己的next主题的博客

样式表放在了GitHub上喜欢的话可以直接使用

next博客主题样式修改

使用方法

  • 直接下载样式表,然后复制到自己主题的themes extsourcecss_custom目录下的custom.styl文件

<link rel="stylesheet" type="text/css" href="https://me.idealli.com/images/blog/custom.css">

兰州小红鸡

自己动手修改的方法

小白教程,大佬见笑。需要一点点css基础,可以上菜鸟教程现学

准备

  1. chrome浏览器或者其他带检查功能的浏览器
  2. 如果你是用的hexo博客的next主题,那么自定义样式表就在themes extsourcecss_custom目录下的custom.styl文件中
  3. 如果是其他类型的博客,先百度自定义样式表在哪里

查找样式名称

现在我们开始自己动手修改样式

先用浏览器打开自己博客页面,找到自己要修改的样式的地方,比如我要修改这个文章标题样式

兰州小红鸡

然后鼠标右键,点击检查

兰州小红鸡

深色的那一行就是标题所在的html语句

鼠标移动到那一行,点击,这时右侧出现css样式表

兰州小红鸡

选择样式名称,复制

兰州小红鸡

然后回到themes extsourcecss_custom目录下的custom.styl文件中,开始自己写样式

例如

.posts-expand .post-title-link{
/*
你的自定义样式
*/
}

showtime

兰州小红鸡

兰州小红鸡

兰州小红鸡

兰州小红鸡

当然前提是你使用的是nexo主题,并且我使用的是next里的mist子主题,其他主题可能不兼容

下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助

hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式
随想
博客
机器学习
教程
邻家酒肆
前端
深度学习
算法
小程序
资源
cpp
html
javascript
python
sql
node

最近文章