192

一套简约漂亮的响应式博客园主题皮肤分享给你们 - Hafiz.Zhang

 6 years ago
source link: http://www.cnblogs.com/hafiz/p/7573464.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一套简约漂亮的响应式博客园主题皮肤分享给你们

  最近在自己博客园逛的时候,总会有一个感觉,真是太丑了,然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统,上网一搜才发现,原来我们可以自定义博客的布局以及样式的,那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件,然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望,否则很恶心,连自己都这么觉得。下面我们就来分享这个替换步骤教程。

二、实现步骤以及实现原理

1.先copy经过我改良过的博客CSS样式(手机和PC响应式布局,注意:本皮肤必须使用MoonlightInk作为基础皮肤才能保证一定不会出现奇怪的样式问题。

View Code

最近有博友反应,评论回复以后出现了评论框和按钮被遮盖的问题,这里给出解决办法:只需要把上面CSS样式中:#comment_form的height: 343px;及overflow: hidden;删除即可。

2.到自己博客的设置页面

3.把copy的CSS样式粘贴到如下的位置并勾选禁用模板默认CSS

 4.点击保存,自定义样式成功,而且博客详情里评论位置烦人的广告也没有了。

5.原理说明

  我首先拿到哥们的基础CSS以后,然后在我的博客首页进行按F12,调出页面Debug工具,然后根据自己的需求修改对应元素的样式,修改后所见即所得。很方便,满意以后,再把这些CSS在基础CSS里面替换掉,保存就好了,再按照上面的方法替换博客默认CSS。也很简单,不过需要你有一定的CSS功底!

三、效果展示

既有元素阴影,还有爽翻人的圆角,是不是感觉瞬间逼格就高大上了呢,还有一点,你发现那些很恶心的日历控件也被干掉了,变得越来越干净和纯粹了,烦人的广告通通走开吧!赞一个!

  下篇我们在分享如何给自己的博客添加好看的火箭效果的返回顶部以及打赏控件还有美化点赞按钮~

    为了方便大家在移动端也能看到我分享的博文,现已注册个人微信公众号,扫描下方二维码即可,欢迎大家关注,有时间会及时分享相关技术博文。
    感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧,让博主能喝上一杯咖啡,在此谢过了!
    如果您觉得阅读本文对您有帮助,请点一下左下角“推荐”按钮,您的“推荐”将是我最大的写作动力!另外您也可以选择关注我,可以很方便找到我!
    本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/hafiz 欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利!

此外:应广大博友邀请,博主建了一个技术交流群(在这里我们聊技术、互相帮忙、大厂内推机会等),添加下方右侧的微信号,备注:【博友交流】,博主拉你进群一起交流分享。
个人微信公众号博主微信号
posted @ 2017-09-22 10:14  阿豪聊干货  阅读(18388)  评论(199)  编辑  收藏

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK