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

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

一、博皮设计方法

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

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

推荐一些有用的网站：

• 图标：http://www.easyicon.net
• 背景图：http://subtlepatterns.com/
• 图片制作：http://www.makepic.net/
• 横幅：http://freewebpageheaders.com/

二、HTML/CSS/Javascript 源码

源码修改技巧：

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

1、总体框架

body {
    padding: 0; margin: 0; font-size: 14px; color: #444444; min-width: 1200px;
    font-family: "Microsoft YaHei UI",Verdana,Arial,Helvetica,sans-serif;
    background: #205424 url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_wrapBg.jpg') no-repeat top center fixed;
}
#home {
    opacity: 0.95; filter: alpha(opacity=95); box-shadow: 0 0 10px #000; margin: 40px auto;
    width: 1200px; background: #fff; overflow: auto; border: solid 1px #fff;
}
.postBody p, .postCon p {text-indent: 2em; margin: 7px 0; line-height: 24px;}
a { outline: none; text-decoration: none;}
a:link, a:visited {color: #69c;}
a:hover, a:active {color: #f36;/* text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted;*/}
ul,ol { list-style: none; margin: 0; padding: 0; line-height: 1.8;}
image { border:solid 1px #fff; box-shadow:0 0 10px #aaa;}

2、博客标题

#blogTitle, #blogTitle a { font-weight: bold; color: #666; font-family:Jokerman;}
#blogTitle .title {
    margin-top: 10px; height: 100px; line-height: 100px; font-size: 36px; padding-left: 120px;
    background: #fff url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012507540191_easyicon_net_96.png') no-repeat;
}
#blogTitle, #blogTitle a:hover { text-decoration:none;}
.subtitle { display: none;}

3、导航栏

#header { padding: 20px 20px 10px 20px;}
#navigator { font-size: 16px; height: 48px; background: #55895B; text-align: center; margin-top: 20px; margin-bottom: 20px;}
#navList li { margin: 0; line-height: 48px; display: inline-block; float: left;}
#navList li:hover { background: #6DA47D;}
#navList li a { padding: 0 30px; text-decoration: none; line-height: 48px; border: 0; color: #fff;
 display: -moz-inline-box; display: inline-block;}
#main { padding: 20px;}
.blogStats { display: none;}

Top Bar

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

<div class="top_blogtitle">
    <div style="width:1150px;margin-left:auto;margin-right:auto;"><span style="float: left;">
        <a target="_blank" href="http://home.cnblogs.com/u/Pandaman/ing">那 些 回 忆 丶 挥 之 不 去</a></span>
    <span style="float: right;">
        <a target="_blank" href="http://home.cnblogs.com/u/712172/">巛熊猫人灬</a>
        <a href="http://i.cnblogs.com/">管理</a>
        <a href="http://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a>
    </span></div></div>

JavaScript

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

<script type="text/javascript"> $(function(){
        $("#navList").append('<li><a class="menu" href="http://www.cnblogs.com/Pandaman/p/">随笔</a></li><li><a class="menu" href="http://www.cnblogs.com/Pandaman/tag/">标签</a></li><li><a class="menu" href="http://www.cnblogs.com/Pandaman/gallery.html">相册</a></li><li><a class="menu" target="_blank" href="http://msg.cnblogs.com/msg/send/%e5%b7%9b%e7%86%8a%e7%8c%ab%e4%ba%ba%e7%81%ac">联系</a></li><li><a class="menu" target="_blank" href="http://feed.cnblogs.com/blog/u/211366/rss">RSS</a></li>'); 
        $("#navList li").eq(7).remove();    $("#navList li").eq(4).remove();
        $("#navList li").eq(3).remove();    $("#navList li").eq(2).remove();
});</script>

4、侧边栏

#sideBarMain { padding: 0 10px 0 0; background: #fff; margin: 0 0 20px 0; width: 190px; font-size: 12px; line-height: 22px;}
#leftcontentcontainer { color: darkseagreen;} /* #sideBar{ position: relative;}#sideBarMain a { color: #666;} */

公告

#profile_block { margin-top: 0px; line-height: 24px; text-align: left;}
#profile_block { display: none;}
.newsItem { color: #666;}
.newsItem h3{ display: none;}

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

<MARQUEE scrollAmount=1 scrollDelay=60 direction=up width=200 height=50>
Welcome to my blog!</MARQUEE>
<a onclick"this.innerHTML='已关注';cnblogs.UserManager.FollowBlogger('c4179971-5097-e411-b908-9dcfd8948a71')" href="javascript:void(0);">关注我</a>

搜索

#q { height:22px; width:120px; border:solid 1px #ccc; box-shadow:inset 0 0 3px #ddd; border-radius:4px;}
.btn_my_zzk {
    border:none; height:26px; width:60px; padding:1px; font-size:14px; cursor:pointer; position:relative;
    vertical-align:middle; display:inline-block; background:#e6e6e6; border-radius:4px; color:#7c7c7c;
}
.btn_my_zzk:hover { background: #C6EFD2;} 
.mySearch h3{ display: none;} /* .mySearch{ top: -50px; position: absolute;}*/

5、Main Page

#mainContent {
    margin-top: 0px; padding-top: 0px; padding-right: 0px; background: #fff; padding-bottom: 0px;
    float: right; width: 960px; padding-left: 0px;
}
#topics .post { background: #fff;}
.postCon { padding: 15px 30px 0 20px;}
.postDesc { margin: 0 30px; margin-bottom: 2px; padding: 8px 0px; font-size: 12px; color: #aaa; background: #fff; text-align: right;}
.postDesc a { color: #aaa;}
.postBody { padding: 0;}
.day { background: #fff; padding: 0; margin: 0 0 20px 0;}
.dayTitle { display: none;}
.postTitle {
    padding-bottom: 10px; font-size: 20px; font-weight: bold; color: #464646; padding-left: 30px;
    background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012508164381_easyicon_net_24.png') no-repeat 0 3px;
}
.postTitle a, .entrylistPosttitle  a { color: rgba(155, 186, 111, 1);}
.entrylist { padding: 10px 20px; background: #fff;}
.entrylistItem { margin: 10px 0; padding: 10px;}
.entrylistPosttitle {
    font-size: 18px; font-weight: bold; padding-left: 30px;
    background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012508164381_easyicon_net_24.png') no-repeat 0 3px;
}
.entrylistDescription{ display:none;}
.entrylistPostSummary { padding: 20px 10px 0 20px;}
.entrylistItemPostDesc { font-size: 12px; color: #999; margin: 0 10px; padding: 8px 0;}
.entrylistItemPostDesc a { color: #aaa;}
.c_b_p_desc { padding: 0px; line-height: 24px; color: #888;}
.desc_img { float: right; margin: 0  0 0 20px ;} /* 摘要图片 */
.c_b_p_desc_readmore{ display:none;}
#footer { font-size:12px; margin:20px; padding:12px; text-align:center; background:#55895B; color:#DDD; font-size:14px;}
#Pager { margin-top: 20px; color: #686868; font-size: 12px; text-align: center;}
.Pager a, .topicListFooter a {
    text-decoration: none; display: inline-block; color: #777; background-color: #f5f5f5; border: 1px solid #eaeaea;
    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 8px 2px;
}
.Pager a:hover, .topicListFooter a:hover {
    border: 1px solid #e64a19; color: #fff !important; 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff7043),to(#f4511e));
    background-image: -webkit-linear-gradient(top,#ff7043,#f4511e);
    background-color: #ff7043; background-image: linear-gradient(top,#ff7043,#f4511e);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

6、博文样式

#cnblogs_post_body p img { margin: 10px;}
p span{ line-height: 1.8;}

标题

#cnblogs_post_body h1 {
    padding: 6px 20px; background: #93C8A2; color: #fff;
    font-size: 18px; border-radius: 4px; clear: both;
}  
#cnblogs_post_body h2 {
    text-align: left; padding: 6px 20px; overflow: auto; border-radius: 4px;
    background: lightgray; color: #fff; font-size: 18px; clear: both;
}
#cnblogs_post_body h3 { font-size: 14px; font-weight: bold;}
#cnblogs_post_body h4 { text-align:center; font-size: 14px; font-weight: normal; margin-top: 0px;} /* 用于图表标题*/
#cnblogs_post_body h5 { 
    font-size: 16px; font-weight: normal; padding-left: 30px; color: orange;
    background: url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_resize_png_new.png) left center no-repeat;
}/* Point*/

列表

#cnblogs_post_body ul, #cnblogs_post_body ol {
    margin: 10px 10px; padding: 15px 20px 15px 70px; font-size: 15px;color: gray; box-shadow: 0 0 8px #aaa; clear: both;
    background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_yellow-pin.png') no-repeat 10px 2px;
}  

引用区块

blockquote{ color:#555555;}
.postBody blockquote{
    border-left: 5px solid #ddd; padding:0 0 0 20px; margin-left: 20px
    min-height: 35px; _height: 35px; line-height: 1.6em;
}

博客签名

#MySignature {
    margin: 10px 0; color: #999; font-size:12px; padding:0 0 0 90px;
    background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_i.png') no-repeat 20px 12px;
    border: dotted 2px #999; line-height: 200%; border-radius: 4px; height:74px;
}

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

作者：<a href="http://www.cnblogs.com/Pandaman/">Pandaman</a> <br />
如果您喜欢这篇文章，不妨点个 <a onclick="this.innerHTML='谢谢';votePost(cb_entryId,'Digg')" href="javascript:void(0);">赞</a>！<br />
欢迎转载、演绎或用于商业目的，但请务必保留本文署名（包含链接）。

评论

#btn_comment_submit { border: none; height: 48px; width: 120px;}
.comment_btn {
    border: none; height: 48px; width: 120px; font-size: 18px; cursor: pointer; position: relative;
    vertical-align: middle; display: inline-block; background: #55895B; color: #fff;
}
#btn_comment_submit:hover { background: #6DA47D;}
.feedback_area_title { padding: 10px; font-size: 24px; font-weight: bold; color: #55895B; border-bottom: solid 6px #55895B;}
.feedbackListSubtitle { font-size: 12px; color: #888;}
.feedbackListSubtitle a { color: #888;}
.comment_quote { background: #FCFAAC; padding: 15px; border: 1px solid #CCC;}
#commentform_title {
    color: #55895B; background-image: none; background-repeat: no-repeat; margin-bottom: 10px;
    padding: 10px 20px 10px 10px; font-size: 24px; font-weight: bold; border-bottom: solid 6px #55895B;
}
.commentbox_title { width: 940px;}
#commentbox_opt { position: absolute; text-align: right; width: 940px;}
#comment_form { margin: 10px 0; padding: 0;}
.commentform { margin: 10px 0; padding: 10px 20px; background: #fff;}
#tbCommentBody {
    margin-top: 10px; width: 940px; max-width: 940px; min-width: 940px; background: white;
    color: #333; border: 2px solid #fff; box-shadow: inset 0 0 8px #aaa;
    padding: 10px; height: 120px; font-size: 14px; min-height: 120px;
}
.feedbackItem { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 20px; background: #F2F2F2; box-shadow: 0 0 5px #aaa;}
}
.feedbackListSubtitle { font-weight: normal;}
#myposts .PostList { font-size:14px; line-height:24px; margin:10px 0; padding:20px; background:#F2F2F2; box-shadow:0 0 5px #aaa;}
#myposts .postTitl2 a { color:#6DA47D;}

其它杂项

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

#div_digg .diggnum {display:none;}
.diggnum, .diggit  {display:none;}
.buryit, .diggword {display:none;}
#green_channel {display:none;}
#author_profile {display: none;}
#site_nav_under {display: none;}
#comment_nav{display: none;}
#ad_under_google {display: none;}
.c_ad_block, .ad_text_commentbox {display: none;}

7、分类与标签

#BlogPostCategory a, #EntryTag a, #MyTag1_dtTagList a, .catListTag a {
    margin-right: 6px; text-shadow: 0 1px 0 #fff; padding: 2px 5px; border: 1px solid #ECECEC;
    background-color: rgba(0,0,0,0.04); text-decoration: none; border-radius: 3px;
    color: #777; font-size: 12px;
}
#BlogPostCategory{
    margin-right:5px; padding: 1px 30px; color:white; font-size:0px; /*不会用 js 隐藏文字“分类：”而想到的笨方法*/
    background: url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_20150127110428792_easyicon_net_16.png) no-repeat;
}
#EntryTag{
    margin-right:5px; padding: 1px 30px; color:white; font-size:0px; 
    background: url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_biaoqianfenlei.png) no-repeat;
} /*#taglist_title_wrap { margin-left: auto; margin-right: auto; width:70%; text-align: left;}*/
#taglist_title {display:none;margin-bottom: 30px}
#Gallery h2, .thumbTitle, .galleryTitle {display:none;}
.entrylist h1 {display:none;}

三、Back2Top

#elevator_item {
    position: fixed; right: 0px; bottom: 15px; z-index: 100020; display: none; width: 60px;
    height: 100px; opacity: 1; -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out
}
#elevator_item.off { visibility: hidden; opacity: 0;}
#elevator {
    display: block; width: 41px; height: 41px;
    background: url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_icon_top.png) center center no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; background-color: #ccc;
    -moz-transition: background-color .3s; -o-transition: background-color .3s;
    -webkit-transition: background-color .3s; transition: background-color .3s;
}
#elevator:hover { background-color: rgba(83, 134, 88, 1);}
#elevator:active { background-color: #0;}
.top_blogtitle{ border-bottom: 1px solid #dddddd; background: #f1f1f1; height: 30px;}
.top_blogtitle a{ margin-left: 20px; color: #757575; text-decoration: none;}
.top_blogtitle a:hover{ text-decoration: underline;}
.top_blogtitle span{ font-size: 12px; height: 30px; line-height: 30px;}

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

<div id="elevator_item"><a title="回到顶部" id="elevator" href="#top"></a></div>

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

$("#elevator_item").hide();
$(window).scroll(function(){
    if($(this).scrollTop() > 500){$("#elevator_item").fadeIn();}
    else{$("#elevator_item").fadeOut();}

四、图片与表格的居中

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

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

五、Table of Contents

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

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

转载于:https://www.cnblogs.com/Pandaman/p/skin.html