把主题升级了一下

栏目: CSS · CSS3 · 发布时间: 5年前

内容简介:利用元旦的时间讲博客的主题升级了一下。最主要的内容是扩充了配色方案。一共 8 种配色,右下彩色图标可以切换:下载地址:

起步

利用元旦的时间讲博客的主题升级了一下。最主要的内容是扩充了配色方案。一共 8 种配色,右下彩色图标可以切换:

把主题升级了一下

下载地址: https://github.com/hongweipeng/GreenGrapes

多种配色

实现配色切换的有两种方式,一种是将所有的配色都放在一个css文件里面,通过后台判断控制锚点是加载 .skin-blue 还是 .skin-green ;我使用了另一个方法,每个配色独立一个 css 文件,只要控制加载 skin-blue.css 还是 skin.green.css 就可以了。

顶部 logo 调整

把主题升级了一下

有朋友和我说顶部的原谅色不是很好,所以我做了一些调整:

把主题升级了一下

感觉很不错,黑色的渐变多了一份沉寂,与背景粒子形成星星点点的效果简直是额外的收获。我顺路把背景图也换了,更匹配我的博客名。

升级依赖库

jq从2升级到3。bootstrap 从 3 升级到 4。bootstrap4 已经不使用 px 来控制字体和盒子模型的,它大多采用 rem 的方式。于是我感觉主题的字体变大了。 rem 是根据根元素的字体大小的相对大小。对于任何浏览器来说默认字体大小都是 16px ,所以有 1rem = 16px ,依照这个比例进行调整即可。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

慕课革命

慕课革命

汤敏 / 中信出版社 / 2015-1-1 / 39.00元

《慕课革命》,国内唯一一本关于全方面了解慕课的权威著作,全面阐述慕课理念与中国实践。 林毅夫、俞敏洪、徐小平、王强作序推。 大规模在线教育的慕课革命大幕已经拉开,这是一场基于互联网及移动互联网的教育大变革。根据网易教育联合有道发起的《2013中国在线教育新趋势调查报告》揭示,中国在线教育正呈现出六大趋势,包括互联网成为人们获取知识的最常见渠道;移动端学习方式已经开始成为人们接受的学习方......一起来看看 《慕课革命》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具