纯CSS打造BiliBili样式博客主题
2023-09-11 14:22:04 时间
前言
一直以来,我都在思考如何减少不必要的JS
代码,仅通过CSS
来实现博客园主题美化。CSS
有很多魔法代码,例如:before
,iconfont
,order
,等等,利用好这些技巧,也能实现很好美化效果。这一次带来的是仿制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;
}
相关文章
- 自然语言交流系统 phxnet团队 创新实训 项目博客 (六)
- 自然语言交流系统 phxnet团队 创新实训 个人博客 (四)
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- CSS - 工具类 tool.css
- 计算男孩女孩小孩各有几个 java——CSDN博客
- 将博客搬至CSDN
- 谢谢博客-园,让我不再有开源AYUI的想法
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- Ubuntu下 Hadoop 1.2.1 配置安装 - 大T的专栏 - 博客频道 - CSDN.NE
- 二叉排序树C实现(含完整源码) - 兰亭风雨的专栏 - 博客频道 - CSDN.NET
- 月光博客的地址
- clean-mark 清除格式 博客内容提取 [MD]
- VB编程:SelectCase多分支选择结构判断成绩优良-11_彭世瑜_新浪博客
- VB编程:GetSetting控制软件试用期-56_彭世瑜_新浪博客
- 零基Github Page个人博客建立教程无限的自由流动
- 工控和视觉软件方面的好博客
- 恭喜我开通了CSDN博客
- Java 开源博客——B3log Solo 0.6.7 正式版公布了!
- Py-博客学习50问
- 【CSS】css弹性布局、CSS hack_08
- 为什么创建博客网站?
- 超详细图解:如何使用 WordPress搭建一个个人博客?