那 些 回 忆 丶 挥 之 不 去 Cnblogs Pandaman Dashboard

博皮设计:HTML/CSS/Javascript 源码共享

首先感谢 sevennight 对我的大力帮助,由此他也成为了我的第一位园友;其次,由于本人并不了解 HTML/CSS,因此几乎都在 李宝亨 设计的 博皮源码 的基础上进行的修改;最后,为了获得 更加自由的导航,不懂 Javascript 的我只好照搬别人 现成的源码

一、博皮设计方法

本博客皮肤设计步骤如下:

  • 选择博客皮肤 LessIsMore
  • 页面定制 CSS 代码 框中输入自定义的 CSS 代码;
  • 勾选 禁用模板默认 CSS
  • 如需使用 Javascript,请联系 contact@cnblogs.com 申请 js 权限;

推荐一些有用的网站:

二、HTML/CSS/Javascript 源码

源码修改技巧:

  • 选择目标样式的页面;
  • 使用浏览器选项 查看源 可以获取目标页面的 HTML 源码;
  • 使用浏览器选项 检查元素 可以获取目标页面的 HTML/CSS/Javascript 源码,并能选取特定元素,直接修改相关代码进行调试。

1、总体框架

展开(隐藏)

2、博客标题

展开(隐藏)

3、导航栏

展开(隐藏)

Top Bar

以下代码填写在 页首 Html 代码 框中。

展开(隐藏)

JavaScript

以下代码填写在 页脚 Html 代码 框中。如果填写在 页首 Html 代码 框中,可能有脚本被执行时的动画一闪而过,极为影响美观。

展开(隐藏)

4、侧边栏

展开(隐藏)

公告

展开(隐藏)

以下代码填写在 博客侧边栏公告(支持 HTML 代码) 框中。

展开(隐藏)

搜索

展开(隐藏)

5、Main Page

展开(隐藏)

6、博文样式

展开(隐藏)

标题

展开(隐藏)

列表

展开(隐藏)

引用区块

展开(隐藏)

博客签名

展开(隐藏)

以下代码在 设置 - 博客签名 中填写。

展开(隐藏)

评论

展开(隐藏)

其它杂项

隐藏页面底部一些元素:顶、踩、绿色通道、作者信息、广告等。

展开(隐藏)

7、分类与标签

展开(隐藏)

三、Back2Top

展开(隐藏)

以下代码填写在 页脚 Html 代码 框中。

展开(隐藏)

动态显示/隐藏的 Javascript 命令如下:

展开(隐藏)

四、图片与表格的居中

由于在 HTML 区块标签间的 Markdown 格式语法不被支持(详见于此),因此采用 Markdown 语法撰写的图表无法水平居中显示,而 HTML 语法又显得繁琐。经过我不懈搜寻,终于在 w3school 找到了比较完美的解决方案:

添加 Javascript 命令:$("img").wrap("<div style='text-align:center;'></div>"); $("table").wrap("<center></center>");

五、Table of Contents

如果博文里面有目录,会给人结构清晰、一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成。

感谢 孤傲苍狼 分享了 自动生成博文目录的方法,由于源码过长,因此 另启一文存档

点击右上角即可分享
微信分享提示

目录