前言

一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化。CSS有很多魔法代码,例如:beforeiconfontorder,等等,利用好这些技巧,也能实现很好美化效果。这一次带来的是仿制BiliBli制作的纯CSS博客园主题,希望能给你带来不一样的体验。

头部导航栏

BiliBili个人主页效果

这种头部感觉比较好看,并且根据博客园的代码布局,正好能够实现。

其实博客园在设计之初就考虑到了logo的问题,但是只给了1px的大小,所以基本上就没有被人发现。通过background-image:url()可以引入头像。

博客主题效果

首页文章

这一次又回到了左边文字,右边配图的布局。但是这一次,我们固定了摘要文字行数为5行,超出变成省略号;并且图片也做了固定尺寸:190px * 120px ,图像会自动居中,多余部分将会被裁剪。

对于没有图片的文章,自适应,但最大不超过5行字。

侧边栏

侧边栏图标进行了优化。

博客正文

博客正文对一些细节进行了调整,如文章发布信息,文章分类标签、点赞关注等。

评论

评论进行了布局优化,去掉了没用的信息。

移动端适配

适配方法

主题默认模板为Custom,使用时禁用默认模板,然后加入下面这行代码:

@import url(https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.19.1.css) screen and (min-width:0px);

最新版


最新版本可以通过F12查看我的CSS代码,不不定期更新。

这里为了实现自定义,你可以继续加一些图片的设置:

/*设置顶部头像背景*/
#blogTitle {
background-image: url(https://img2018.cnblogs.com/blog/1489774/201911/1489774-20191115181738072-2067895519.jpg);
}
/*设置头像*/
#blogLogo {
background-image: url(https://img2018.cnblogs.com/blog/1489774/201911/1489774-20191115182121018-1227398891.jpg);
}
/*** 设置全局主题颜色 ***/
html {
--ThemeColor: #00a1d6;
}

纯CSS打造BiliBili样式博客主题的更多相关文章

  1. Hexo博客主题优化

    Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...

  2. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  3. dajngo ORM查询中select_related的作用,博客主题的定制,从数据库中按照年月筛选时间

    1.dajngo ORM查询中select_related的作用 select_related()方法一次性的把数据库关联的对象都查询出来放入对象中,再次查询时就不需要再连接数据库,节省了后面查询数据 ...

  4. 从无到有开发自己的Wordpress博客主题---代码环境准备

    注意这里说的是代码环境准备哦,而不是L(M)AMP运行环境哦,运行环境会在后述文章中在写. 一.在本地初始化git环境并且链接上gitee 1.在gitee上创建一个项目托管你的代码 这个不在赘述,按 ...

  5. 20款时尚的 WordPress 博客主题【免费下载】

    在这篇文章中,我们收集了20款时尚的 WordPress 博客模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单 ...

  6. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  7. Zblog主题模板自适应手机响应式ZblogPHP简洁博客主题

    Z-blog PHP版本简洁主题模板 特点简洁舒适 手机移动端自适应,完美有利于优化 代码结构利于编辑 对于不懂代码的,也非常适合简答后台简答 PC端侧边栏下拉跟随,无论下面有多长,导航侧边栏都只在左 ...

  8. 开源免费的WordPress个人博客主题推荐

    二次元动漫类个人主题 Sakura 功能强大,美观大气,二次元动漫专属 演示地址:https://2heng.xin/theme-sakura/ 开源地址:https://github.com/mas ...

  9. 博客主题皮肤探索-添加新功能和fiddler的css/js替换

    还有前言 使用了主题之后,发现还差了一点功能.最新评论没有了,导致读者回复需要一点时间去找到底回复了哪条博客.于是就有了添加功能的想法. 如何调试CSS/JS 打开f12,可以看见加载的js资源都是混 ...

随机推荐

  1. 【Resharper】C# “Simplify conditional ternary expression”

    #事故现场: 对某个对象做空值检测的时候,结合三元运算符给某变量赋值的时候,R#提示:"Simplify conditional ternary expression" : R#建 ...

  2. Mybatis框架增删改查

    一.recourses中核心配置文件mybatis-config.xml 二. recourse中jdbc.properties 三.entity实体类 四.ISmbmsUserDao层 五.ISmb ...

  3. golang和swoole区别

    golang和swoole区别 开发效率 Go语言是本质上是静态语言,开发效率稍差,但性能更强,更适合底层软件的开发 Swoole使用PHP语言,动态脚本语言,开发效率最佳,更适合应用软件的开发 IO ...

  4. MySQL基础之自连接用法简介

    MySQL系列之自连接简介,MySQL自连接操作,没有特定的关键字,所谓自连接指的是同一个表不同实例之间的join操作 引用https://www.w3resource.com的图示: 特征: 自连接 ...

  5. appium 使用name 定位报错 Locator Strategy 'name' is not supported for this session【appium-desktop】

    RF中使用 name定位 报错提示: Locator Strategy 'name' is not supported for this session 解决: 1.打开本地文件 driver.js ...

  6. Selenium+java - 通过Robot对象上传文件

    思路: 1.将文件路径复制到剪切板 2.用robot对象模拟键盘操作即可 复制文件代码: public void setClipboardData(String data) { StringSelec ...

  7. wp.editor.initialize 配置案例

    wp.editor.initialize ( 'EditorTextArea' , { tinymce: { wpautop: to true , theme: 'modern' , skin: 'l ...

  8. 【LOJ#6682】梦中的数论(min_25筛)

    [LOJ#6682]梦中的数论(min_25筛) 题面 LOJ 题解 注意题意是\(j|i\)并且\((j+k)|i\), 不难发现\(j\)和\((j+k)\)可以任意取\(i\)的任意因数,且\( ...

  9. 二级目录下的运行main.py,找不到上级目录的解决方法

    import os, sys sys.path.append(os.path.dirname(os.path.dirname(os.path.realpath(__file__))))

  10. Web前端基础(1):HTML(一)

    1. HTML概述 1.1 什么是HTML HTML称为超文本标记语言,是一种标识性的语言.它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体.H ...