摘自:http://www.cnblogs.com/libaoheng/archive/2012/03/19/2406836.html 前  言 一个好的阅读体验,对技术博客来说,也许算是锦上添花.入园一年来,虽然没写几篇文章,但隔一段时间,总会感觉博客界面审美疲劳,就会下些功夫去重新设计一下博客的页面.只为了让界面清爽,方便园友阅读.很多园友问我,用的是什么模板,其实归功于园子的自定义CSS(其实可以自己设计皮肤,但比较麻烦,自定义CSS灵活快捷),趁机分享下我当前的博客界面设计.当然,不是做…

我使用的Ghost博客一直使用者默认的Casper主题.我向来没怎么打理过自己博客,一方面认为自己不够专业,很难写出质量比较高的文字:另一方面认为博客太耗时间,很容易影响正常的工作内容.最近公司即将搬迁,我的开发工作也告一段落,因此抽点时间自定义一个自己的博客主页. 备注:上图来自GhostChina官网,与本文内容无关. Ghost与Ghost主题 Ghost自称是专业的内容发布平台,实际上跟WordPress相比它只能算一个相对比较年轻的博客系统,在功能上完全无法与成熟的WordPress相…

CSS 巧用 :before和:after:http://web.jobbole.com/85083/ css清除元素间距:http://ouvens.github.io/frontend-css/2015/08/06/css-get-rid-of-gap.html css居中与自适应布局:http://ouvens.github.io/frontend-css/2014/11/08/css-center-layout.html css清除浮动:http://ouvens.github.io/f…

重绘与回流 BFC 水平垂直居中 定位 基线各种线 inline-block,img标签空字符…

参考:博客园页面设置 参考:共享一下我的自定义CSS博客皮肤(2012.3) 一.文字周围带框框   插入一个代码,要折叠式,如下图所示: 史蒂夫 示例 选中“示例”,将其拷贝,然后黏贴,就有如下的效果:  示  例 接下来就可以进行自由编辑了! 直接通过添加代码然后选中“行内代码”即可 示例 二.文字.方框.颜色.阴影   1. 浅绿色背景框 博客园 在“页面定制CSS代码”中加入如下描述代码 /* 黑框绿景→黑框橙景 */ div.fangkuang { background-color:…

前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果.这一次带来的是仿制BiliBli制作的纯CSS博客园主题,希望能给你带来不一样的体验. 头部导航栏 BiliBili个人主页效果 这种头部感觉比较好看,并且根据博客园的代码布局,正好能够实现. 其实博客园在设计之初就考虑到了logo的问题,但是只给了1px的大小,所以基本上就没有被人发现.通过ba…

不知不觉有一年多没有更新博客了,还是几位园友因为喜欢这套博客样式发了消息,否则我都快忘记自己还有一个博客了,哈哈. 言归正传,这套博客样式是当时闲来无事copy的iOS界喵神的博客Vno,确实很漂亮,喜欢的赶紧进入后台设置页面开始吧. 设置为自定义主题 博客皮肤设置为LessIsMore,继续往下看真的是Less is more!! 页面定制CSS代码 #divRefreshComments { text-align: right; margin-right: 10px; margin-bott…

阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航栏,右侧栏,页尾都是可以复用博客列表页(index.html)的元素以及样式表的,需要补充的只有博客主体内容了,所有工作量大大减少了. 2.简介 博客主页应该有一个对博客主体内容的简介,还有直观的就是技术标签,比如Java,Python或者Bootstrap这些技术相关,可以用一个醒目的lable元…

上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中.但其实更多程序员是不知道如何去搭建一个博客,其实如今搭建一个个人技术博客非常简单,其中最简单搭建方式莫属使用 GitHub Pages + Jekyll 了,我的博客就是使用这种技术. GitHub Pages Github Pages 是面向用户.组织和项目开放的公共静态页面搭建托管服务,站点可…

灵感来自米米饭 功能一览 为什么你应该试试用Sublog写博客 项目主页: sublog 使用方法: 本项目是一个插件,首先要安装Sublime Text 2 重命名sublog.sublime-settings.example为sublog.sublime-settings,配置你的登录信息,除了用户名,密码外,url也要修改为在管理->设置页面底部的metaweblog访问地址 拷贝整个文件夹到Sublime Text 2插件库下(Preferences->Browse Packages)…