博皮设计：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
如果博文里面有目录，会给人结构清晰、一种一目了然的感觉，看目录就知道这篇博文要讲解的内容，并且点击目录标题就可以跳转到具体的内容，这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容，但是遗憾的是博客园不支持博文目录的生成。
感谢 孤傲苍狼 分享了 自动生成博文目录的方法，由于源码过长，因此 另启一文存档。
