zoukankan      html  css  js  c++  java
  • 纯CSS打造BiliBili样式博客主题

    前言

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

    头部导航栏

    BiliBili个人主页效果

    image

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

    image

    image

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

    博客主题效果

    1573816266605

    首页文章

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

    image

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

    image

    侧边栏

    侧边栏图标进行了优化。

    image

    博客正文

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

    image

    评论

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

    1573816749072

    移动端适配

    1573816802463

    1573816827170

    image

    适配方法

    1573816909506

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

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

    最新版

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

    image

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

    /*设置顶部头像背景*/
    #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;
    }
    
  • 相关阅读:
    Centos7安装nodejs(npm)
    Centos7安装docker
    在目标服务器Centos7上安装 GitLab Runner
    PC端,知乎在不想登录的情况下一打开就弹出登录框的无痛解决办法
    mac下webstrom卡顿快速解决办法
    解决项目中使用momentJS文件 体积过大的问题
    发布订阅模式及多种实现方式:
    「react进阶」react开发者的不得不知道的八条优化建议
    Gulp、Webpack 有什么区别
    react 源码解析(上)
  • 原文地址:https://www.cnblogs.com/gshang/p/11869120.html
Copyright © 2011-2022 走看看