纯CSS打造BiliBili样式博客主题

标签：优化   带来   样式   导航栏   根据   去掉   jsp   适配   超过   

前言

一直以来，我都在思考如何减少不必要的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.15.2.css) screen and (min-width:0px);

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

/*设置顶部头像背景*/
#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样式博客主题

标签：优化   带来   样式   导航栏   根据   去掉   jsp   适配   超过   

原文地址：https://www.cnblogs.com/gshang/p/11869120.html