正文

纯css打造bilibili样式博客主题

GShang  2022-02-12  527

关键词：

前言

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

头部导航栏

BiliBili个人主页效果

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

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

博客主题效果

1573816266605

首页文章

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

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

侧边栏

侧边栏图标进行了优化。

博客正文

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

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

1573816749072

移动端适配

1573816802463

1573816827170

适配方法

1573816909506

主题默认模板为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打造macbook

HTML:<divclass="board"> <divclass="blackbar"> </div> <divclass="keyboard"> <ul> <li></li> <li></li> <li></li> < 查看详情

纯css3打造瀑布流布局

纯css3打造瀑布流布局原理：　　　1、column-count 把div中的文本分为多少列　　2、column-width规定列宽　　3、column-gap规定列间隙　　4、break-inside:avoid;避免元素内部断行并产生新列　　注意:InternetExplorer9及更早IE版本浏览器不支... 查看详情

修改博客园css样式

看到一款博客园主题，感觉很好看，只是有些css样式不怎么满意，所以自己修改了下，修改的方法在这里记录了下。皮肤连接：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.1.9F12查看元素,就可以看到css样式的标签，在这里调试... 查看详情

冰淇淋主题博客皮肤(代码片段)

...**************************2第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。3如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是4你不能删除这些样式。5*********************... 查看详情

博客园主题修改中用到的css属性

样式覆盖id选择器大于class选择器。对于原主题中想要覆盖的id选择器，使用!import覆盖。对于原主题中想要取消的css属性，使用inherit.浮动元素将position设置为fixed,为了让组件可以浮动在其他组件之上，设置z-index.fuckmeongithubelement.s... 查看详情

纯css修改checkbox复选框样式

借鉴网友博客,改用后整理收录效果图: 移入: <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">.box_inner1{width:25px;margin:20px100px;/ 查看详情

博客园自定义主题样式(代码片段)

记录我在定制个人blog页面效果时遇到的技巧及方法等。基本流程设定博客皮肤为BluSky定制首页代码：引入外部CSS页顶博主名字及副标题在首页html内输入以下代码可添加博主名到页面顶端，也可添加副标题：<headerclass="main-h... 查看详情

cnblog基于simplememory主题个性化更改样式(代码片段)

准备工作自己的CNBlogBlog的JS权限（有教程）申请JS权限首先要打开博客后台->设置里面，滑到博客侧边栏公告那里，单击"申请js权限"然后填写一个为什么开通的js的理由，申请完以后就进行下一步部署主题打开博客后台，设置... 查看详情

自定义博客园主题样式

自定义博客园主题样式基础实现之前有记录自己自定义目录以及相关样式功能，感兴趣的可以看下博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色在此基础上再加点捣鼓内容，实现主题样式透明化、... 查看详情

打造material字体样式主题|实现篇(代码片段)

使用Material主题(Theming)自定义Material组件，目的是让组件观感与品牌保持一致。Material主题包括颜色、字体和形状参数，您可以对这些参数进行调整来获得近乎无限的组件变体，同时保持其核心结构和易用性。自版本1.1... 查看详情

博客样式代码(代码片段)

博客效果代码记得申请js博客主题：simplememory页面定制CSS代码/*simplememory*/#google_ad_c1,#google_ad_c2display:none;.syntaxhighlightera,.syntaxhighlighterdiv,.syntaxhighlightercode,.syntaxhighlightertable,.syntaxhighligh 查看详情

分享自用博客园主题样式(代码片段)

1.博客皮肤选择SimpleMemory因为简单，所以爱~2.在”页面定制CSS代码“中填入以下内容/************************整体布局***********************//*整体布局*/bodybackground:#F6F6F6;font-family:-apple-system,BlinkMacSystemFont,SegoeUI,Roboto,HelveticaNeue,PingFangSC,Hirag... 查看详情

一个标签的72变，打造一个纯css图标库

每次要用到图标的时候都会到icono去copypaste，但每次用到的时候尺寸都各不一样，总是要调整参数，巨烦。当然你可以会想到用zoom、scale来做缩放，但是这样的缩放会使得线宽也变粗了，不甚满意。终于下定心思来改造一个可缩... 查看详情

纯css和html打造树结构(代码片段)

阅读目录源码HTML源码请到资源下载源码。HTML我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ulli组成，代码应该像这样：<!DOCTYPEhtml><html><head><meta... 查看详情

纯css和html打造树结构(代码片段)

github搭建hexo纯静态化个人博客平台(代码片段)

...网上的教程，搭建了属于自己的博客。自己的博客网站，样式自由，不需要受限于各大平台。本篇为从零开始的基础篇，本篇所包含的内容如下：安装Git安装NodeJs安装hexo生成SSH并添加到github部署项目上传到github绑定个人域名修... 查看详情

修改博客园markdown编辑器代码高亮风格的方法

...员的世界总是共通的，已经有前辈开发了一些代码高亮的样式可供我们开箱即用。Highlightjs就是这样一款产品。???????下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的。第一步，找到你所喜欢的高亮主题???????打开... 查看详情

纯html+css打造一款特殊的生日贺卡(代码片段)

效果显示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"> 查看详情