之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定:

【详细图解】一步一步教你自定义博客园(cnblog)界面

我是基于模板BlueSky做了些改动,先看修改前后的效果:

修改前:

修改后:

1先动手!什么都别管!

在我的博客-管理-设置-页面定制CSS代码,只添加有改动的CSS代码段即可,CSS代码从当前模板获取,方法如下.

使用chrome浏览器,在博客界面按F12查看当前模板(BlueSky)的代码如图

不懂CSS的我一脸懵B,不过上图左上角有个神器

将箭头选中,即可从博客界面的模块定位到对应的模块代码,而且可以查看选中模块的类名(截图显示不出来)

不过这个方法容易定位不准,如果要改成理想的效果还是需要分析下博客界面的CSS代码结构

2代码结构

下面一层层展开代码来分析

博客界面按F12显示代码如下,鼠标移到代码上会自动选中对应的博客界面模块,很方便查看代码和界面的对应关系

这结构很明显:头(header)和身体(body)

展开body中的home

又分为头(header),主体(main)和脚(footer)

再分别展开如下

找到了导航栏,主体内容,侧边栏,基本就改这么几项

2.1更改总体宽度

原始博客的显示太窄,更改右侧navigator函数(?)的width为1550,看函数名应该是全局的宽度,全局宽度大概=博客内容栏宽度+侧边栏宽度

效果如下

2.2更改内容栏宽度

然后把内容栏加宽,修改maincontent函数宽度为1300

效果如下

2.3更改侧边栏宽度及位置

更改sidebar宽度为180,修改侧边栏位置实际是修改内容栏位置,在maincontent修改位置为right

效果如下

这样已经达到了预想效果,下面改上方导航栏字体

2.4更改导航栏宽度及字体

选中前文说的神器,选中整个导航栏,修改header的height为50.

选中导航栏的字体,修改#navList li a的font-size为22.

效果如下

2.5更改图片显示宽度

以本文的显示效果为例,为改动图片如下显示

F12运用箭头神器选中图片,更改cnblogs_post_body img中的max-width为1200(<内容宽度1300)

效果如下

2.6更改博客标题正文字体

方法同上,用神器选中标题,正文,代码,修改字体.我的设置是标题24px,正文16px,代码14px

2.7更改博客目录紧凑度

如下图,修改padding为20px

3最终代码

注意:用F12修改只能查看效果,要形成模板建议将有改动的函数copy到记事本中,最后一起放到页面定制里

最终代码如下

/*总体宽度1550px*/
#navigator, #blogTitle, #main, #footer {
width: 1550px;
position: relative;
margin: 0 auto;
} /*最上方导航栏字体22*/
#navList li a {
font-size: 22px;
text-decoration: none;
color: #FFF;
padding: 10px;
background-color: #2175bc;
} /*最上方导航栏高度50px*/
#header {
height: 50px;
width: 100%;
background-color: #2175bc;
} /*侧边栏宽度180px*/
#sideBar {
width: 180px;
padding: 16px;
display: inline-block;
overflow: hidden;
color: #2D2D2D;
} /*主内容栏宽度1300*/
#mainContent {
width: 1300px;
background: white;
box-shadow: 0px 0px 8px #999;
-moz-box-shadow: 0px 0px 8px #999;
-web-kit-shadow: 0px 0px 8px #999;
border-radius: 6px;
-moz-border-radius: 6px;
-web-kit-shadow: 6px;
float: right;
display: inline-block;
} /*博客标题字体24px*/
.postTitle, .postTitl2, .entrylistPosttitle {
font-size: 24px;
padding-right: 64px;
padding-left: 10px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #2175bc;
} /*文章正文字体16px*/
element.style {
font-size: 16px;
} /*文章代码字体14px*/
.cnblogs_code span {
font-family: Courier New!important;
font-size: 14px!important;
line-height: 1.5!important;
} /*图片宽度1200px*/
#cnblogs_post_body img {
max-width: 1200px;
} /*修改博客列表高度*/
.day {
background: white;
padding: 20px;
}

不懂CSS也能定制博客界面!的更多相关文章

  1. [笔记][Web]利用JS生成博文目录及CSS定制博客

    0. 简介 进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录.不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成. 由于本人在JS以及CS ...

  2. 定制博客CSS样式

    首先你需要添加页面CSS代码

  3. 使用CSS/JS代码修改博客模板plus

    之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...

  4. Orchard运用 - 定制博客分页显示

    一般,对于条目过多的系统或博客,分页显示是最简单的方式.目前分页方式基本有三种格式: 1.显示所有信息,包括标明当前页面,提供上一页和下一页链接和使用首页和末页链接. 2.只标注上一页和下一页链接. ...

  5. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  6. 前端小练习-Michael的博客界面(粗糙版)

    michael-blog.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. emacs配置&博客界面源代码

    emacs配置 如果想要考场简单配置也可以去下面看,需要别的考场配置可以自己在下面比较全的里面找 考试备忘录(有新的就会更的...) By Junlier (global-set-key [f9] ' ...

  8. 自定义CSS博客(转)

    摘自:http://www.cnblogs.com/libaoheng/archive/2012/03/19/2406836.html 前  言 一个好的阅读体验,对技术博客来说,也许算是锦上添花.入 ...

  9. 【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)

    一.开发环境的搭建 (1)apache+php+mysql环境搭建 因为要用apache来做服务器,mysql作为数据库来存储数据,php来写代码以此实现网页与数据库的交互数据,所以需要下载上述软件, ...

随机推荐

  1. ASP.NET Core: You must add a reference to assembly mscorlib, version=4.0.0.0

    ASP.NET Core 引用外部程序包的时候,有时会出现下面的错误: The type 'Object' is defined in an assembly that is not referenc ...

  2. Entity Framework 教程——DBContext

    DBContext: 在之前的章节<创建实体数据模型>中,EDM为我们创建了SchoolDBEntities 类,它派生子System.Data.Entity.DbContext这个类,这 ...

  3. StringUtils的isBlank与isEmply

    1.public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 StringUtil ...

  4. AFN解析器里的坑

    AFN框架是用来用来发送网络请求的,它的好处是可以自动给你解析JSON数据,还可以发送带参数的请求AFN框架还可以监测当前的网络状态,还支持HTTPS请求,分别对用的类为AFNetworkReacha ...

  5. 敏捷转型历程 - Sprint4 回顾会

    我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...

  6. Android Bitmap 和 ByteArray的互相转换

    Android Bitmap 和 ByteArray的互相转换 移动平台图像处理,需要将图像传给native处理,如何传递?将bitmap转换成一个 byte[] 方便传递也方便cpp代码直接处理图像 ...

  7. nuget常用命令

    nuget命令的用法: 一.安装 1.安装指定版本类库install-package <程序包名> -version <版本号> 2.安装到指定的项目install-packa ...

  8. 绿色版的Linux.NET——“Jws.Mono”(续)

    在前一篇文章中,我们简略的介绍了jws.mono的安装使用,以及我们如何自己动手做一个jws.mono出来. 在文章发表之后的几天里,我一直觉得有点不妥之处,直到后来猛然的意识到:我们自己动手做的jw ...

  9. CacheManager:–个通用缓存接口抽象类库

    CacheManager是–个缓存通用接口抽象类库,它支持各种高速缓存提供者,例如Memcache,Redis,并且有许多先进的功能特性.具体可以访问官方网站  http://cachemanager ...

  10. C#中实现并发的几种方法的性能测试

    C#中实现并发的几种方法的性能测试 0x00 起因 去年写的一个程序因为需要在局域网发送消息支持一些命令和简单数据的传输,所以写了一个C/S的通信模块.当时的做法很简单,服务端等待链接,有用户接入后开 ...