## **css**
```css
#EntryTag {
 margin-top:20px;
 font-size:9pt;
 color:#808080
}
.topicListFooter {
 text-align:right;
 margin-right:10px;
 margin-top:10px
}
#divRefreshComments {
 text-align:right;
 margin-right:10px;
 margin-bottom:5px;
 font-size:9pt
}
* {
 margin:0;
 padding:0
}
html {
 height:100%
}
body {
 color:#000;
 background:#d2d8de;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size:14px;
 min-height:101%
}
table {
 border-collapse:collapse;
 border-spacing:0
}
fieldset,
img {
 border:0
}
ul {
 word-break:none
}
li {
 list-style:none
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size:100%;
 font-weight:normal
}
a:link {
 color:#000;
 text-decoration:none
}
a:visited {
 color:#000;
 text-decoration:none
}
a:hover {
 color:#f60;
 text-decoration:underline
}
a:active {
 color:#000;
 text-decoration:none
}
.clear {
 clear:both
}
#home {
 margin:0 auto
}
#blogTitle {
 height:70px;
 background:#fff;
 clear:both
}
#blogTitle h1 {
 font-size:150%;
 font-weight:bold;
 line-height:1.5;
 margin-left:1em;
 margin-top:10px;
 width:50%;
 float:left
}
#blogTitle h2 {
 margin-left:4em;
 line-height:1.5;
 width:50%;
 float:left
}
#blogLogo {
 float:right
}
#navigator {
 background-color:#000;
 height:60px;
 line-height:60px;
 overflow:hidden;
 clear:both
}
#navList {
 min-height:30px;
 float:left
}
#navList li {
 float:left
}
#navList a {
 display:block;
 padding:0 1.5em;
 height:60px;
 font-family:'微软雅黑';
 float:left;
 font-size:1.2em;
 text-align:center;
 transition-duration:.3s
}
#navList a:link,
#navList a:visited,
#navList a:active {
 color:#bbb
}
#navList a:hover {
 color:#fff;
 background-color:#343434;
 text-decoration:none;
 text-shadow:0 0 1px #000
}
#navList a.aHeaderXML {
 padding-top:25px;
 overflow:hidden
}
#navList a.aHeaderXML img {
 vertical-align:middle
}
.blogStats {
 float:right;
 color:#ccc;
 padding-right:10px;
 text-align:right
}
#main {
 min-width:950px;
 text-align:left;
 padding:20px 0 0 10px;
 overflow:hidden
}
#mainContent .forFlow {
 margin-left:21em;
 float:none;
 width:auto
}
#mainContent {
 min-height:200px;
 padding:0 0 10px 0;
 *padding-top:10px;
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis;
 overflow:hidden;
 word-break:break-all;
 float:right;
 margin-left:-21em;
 margin-right:20px;
 display:inline;
 width:100%
}
.day {
 min-height:10px;
 _height:10px;
 background:#fff;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad;
 color:#666;
 margin:0 5px 20px 0;
 padding:5px 20px 10px
}
.dayTitle {
 width:100%;
 color:#666;
 line-height:2.2em;
 font-size:22px;
 clear:both;
 border-bottom:1px solid #ccc;
 text-align:center
}
.postTitle {
 font-size:110%;
 font-weight:bold;
 border-bottom:1px dashed #ccc;
 float:right;
 line-height:2.5em;
 font-size:18px;
 width:100%;
 clear:both
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
 color:#390;
 transition:all .4s linear 0s
}
.postTitle a:hover {
 color:#f60;
 text-decoration:none;
 margin-left:10px
}
.postCon {
 float:right;
 line-height:1.5;
 width:100%;
 clear:both;
 padding:10px 0
}
.postDesc {
 float:right;
 width:100%;
 clear:both;
 text-align:right;
 padding-right:5px;
 color:#a8b1ba;
 line-height:2.5em
}
.postDesc a:link,
.postDesc a:visited,
.postDesc a:active {
 color:#666
}
.postDesc a:hover {
 color:#f60;
 text-decoration:none
}
.postSeparator {
 clear:both;
 height:1px;
 border-top:1px dotted #666;
 width:100%;
 clear:both;
 float:right;
 margin:0 auto 15px auto
}
#sideBar {
 width:250px;
 min-height:200px;
 padding:0 0 0 5px;
 float:left;
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis;
 overflow:hidden;
 word-break:break-all
}
.newsItem .catListTitle {
 display:none
}
.newsItem,
#blog-calendar {
 margin-bottom:15px;
 text-indent:0;
 padding:10px;
 background:#fafcfd;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad;
 line-height:1.5
}
#calendar {
 margin-bottom:15px;
 padding:5px;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad;
 background:#fff
}
#calendar .Cal {
 width:100%;
 line-height:1.5
}
#calendar th {
 padding:2px 5px
}
#calendar td {
 padding:2px 5px
}
#calendar td a {
 display:block
}
.Cal {
 border:none;
 color:#666
}
#calendar table a:link,
#calendar table a:visited,
#calendar table a:active {
 font-weight:bold
}
#calendar table a:hover {
 color:#fff;
 text-decoration:none;
 background-color:#f60
}
.CalTodayDay {
 color:#f60
}
#calendar .CalNextPrev a:link,
#calendar .CalNextPrev a:visited,
#calendar .CalNextPrev a:active {
 font-weight:bold;
 background-color:#fff
}
.CalDayHeader {
 border-bottom:1px solid #ccc
}
.CalTitle {
 width:100%;
 background:#fff;
 color:#000;
 border-bottom:1px solid #666
}
.catListTitle {
 background:#390;
 border-bottom:1px solid #060;
 border-top-left-radius:7px;
 border-top-right-radius:7px;
 color:#fff;
 font-size:1.2em;
 height:1.8em;
 line-height:1.8em;
 padding:5px;
 text-indent:.5em;
 text-shadow:1px 1px 0 rgba(0,0,0,.3)
}
.catListComment {
 line-height:1.5
}
.divRecentComment {
 text-indent:2em;
 color:#666
}
#sideBarMain ul {
 line-height:1.5
}
#AjaxHolder_UpdatePanel1,
#AjaxHolder_PostComment_divCommnentArea,
#profile,
.entrylist,
.gallery {
 background:none repeat scroll 0 0 #fff;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad;
 margin:0 0 15px 0;
 min-height:200px;
 overflow:hidden;
 padding:0 15px;
 text-overflow:ellipsis;
 word-break:break-all
}
#AjaxHolder_PostComment_divCommnentArea {
 padding:10px
}
#profile,
.entrylist,
.gallery {
 padding:10px
}
.catListEssay,
.catListLink,
.catListNoteBook,
.catListTag,
.catListPostCategory,
.catListPostArchive,
.catListImageCategory,
.catListArticleArchive,
.catListView,
.catListFeedback,
.mySearch,
.catListComment,
.catListBlogRank,
.catList,
.catListArticleCategory {
 margin-bottom:15px;
 background:#fafcfd;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad;
 overflow:hidden;
 zoom:1
}
.catListEssay ul li,
.catListLink ul li,
.catListNoteBook ul li,
.catListTag ul li,
.catListPostCategory ul li,
.catListPostArchive ul li,
.catListImageCategory ul li,
.catListArticleArchive ul li,
.catListView ul li,
.catListFeedback ul li,
.catListComment ul li,
.catListBlogRank ul li,
.catList ul li,
.catListArticleCategory ul li {
 text-indent:1em;
 padding:10px 5px;
 border-bottom:1px solid #dadfe1;
 border-top:1px solid #fff;
 overflow:hidden
}
.catListEssay ul li a,
.catListLink ul li a,
.catListNoteBook ul li a,
.catListTag ul li a,
.catListPostCategory ul li a,
.catListPostArchive ul li a,
.catListImageCategory ul li a,
.catListArticleArchive ul li a,
.catListView ul li a,
.catListFeedback ul li a,
.catListComment ul li a,
.catListBlogRank ul li a,
.catList ul li a .catListArticleCategory ul li a {
 text-indent:1em;
 font-size:12px
}
.catListEssay ul li a:hover,
.catListLink ul li a:hover,
.catListNoteBook ul li a:hover,
.catListTag ul li a:hover,
.catListPostCategory ul li a:hover,
.catListPostArchive ul li a:hover,
.catListImageCategory ul li a:hover,
.catListView ul li a:hover,
.catListFeedback ul li a:hover,
.catListArticleArchive ul li a:hover,
.catListComment ul li a:hover {
 text-decoration:none
}
.divRecentCommentAticle {
 padding:0 10px
}
.divRecentComment {
 padding:10px;
 font-size:12px
}
#AjaxHolder_PostComment_divCommnentArea td {
 padding:5px 0
}
#topics {
 min-height:200px;
 margin-bottom:15px;
 padding:15px;
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis;
 overflow:hidden;
 word-break:break-all;
 background:#fff;
 border-radius:7px;
 box-shadow:1px 1px 2px #a7a8ad
}
#topics .postTitle {
 font-size:130%;
 font-weight:bold;
 border-bottom:1px solid #999;
 float:left;
 line-height:2em;
 width:100%;
 padding-left:5px
}
.postBody {
 padding:15px 2px 5px 5px;
 line-height:1.5;
 color:#000;
 border-bottom:1px solid #ccc
}
#EntryTag {
 color:#666
}
#EntryTag a {
 margin-left:5px
}
#EntryTag a:link,
#EntryTag a:visited,
#EntryTag a:active {
 color:#666
}
#EntryTag a:hover {
 color:#f60
}
#topics .postDesc {
 float:right;
 width:100%;
 text-align:right;
 padding-right:5px;
 color:#666;
 margin-top:5px
}
.feedback_area_title {
 font-weight:bold;
 line-height:35px;
 margin:10px 0;
 border-bottom:1px solid #ccc;
 padding-left:8px
}
.louzhu {
 background:transparent url('images/icoLouZhu.gif') no-repeat scroll right top;
 padding-right:16px
}
.feedbackListSubtitle {
 color:#666
}
.feedbackListSubtitle a:link,
.feedbackListSubtitle a:visited,
.feedbackListSubtitle a:active {
 color:#666;
 font-weight:normal
}
.feedbackListSubtitle a:hover {
 color:#f60;
 text-decoration:none
}
.feedbackManage {
 width:200px;
 text-align:right;
 float:right
}
.feedbackCon {
 border-bottom:1px solid #ccc;
 padding:20px 18px 10px 40px;
 min-height:35px;
 _height:35px;
 margin-bottom:1em;
 line-height:1.5
}
#divRefreshComments {
 text-align:right;
 margin-bottom:10px
}
.commenttb {
 width:320px
}
.entrylistTitle,
.PostListTitle,
.thumbTitle {
 font-size:110%;
 font-weight:bold;
 border-bottom:1px solid #ccc;
 padding-bottom:3px;
 line-height:2em;
 padding-right:10px
}
.entrylistDescription {
 color:#666;
 text-align:right;
 padding-top:5px;
 padding-bottom:5px;
 padding-right:10px;
 margin-bottom:10px
}
.entrylistItem {
 min-height:20px;
 _height:20px;
 margin-bottom:30px;
 padding-bottom:5px;
 width:100%
}
.entrylistPosttitle {
 font-size:110%;
 font-weight:bold;
 border-bottom:1px solid #ccc;
 line-height:2em;
 width:100%;
 padding-left:5px
}
a.entrylistItemTitle {
 color:#390
}
a.entrylistItemTitle:hover {
 color:#f60
}
.entrylistPosttitle a:hover {
 text-decoration:none
}
.entrylistPostSummary {
 margin-top:5px;
 padding-left:5px;
 margin-bottom:5px
}
.entrylistItemPostDesc {
 text-align:right;
 color:#666
}
.entrylistItemPostDesc a:link,
.entrylistItemPostDesc a:visited,
.entrylistItemPostDesc a:active {
 color:#666
}
.entrylistItemPostDesc a:hover {
 color:#f60
}
.entrylist .postSeparator {
 clear:both;
 width:100%;
 font-size:0;
 line-height:0;
 margin:0;
 padding:0;
 height:0;
 border:none
}
.pager {
 text-align:right;
 margin-right:10px
}
.PostList {
 border-bottom:1px solid #ccc;
 clear:both;
 min-height:1.5em;
 _height:1.5em;
 padding-top:10px;
 padding-left:5px;
 padding-right:5px;
 margin-bottom:5px
}
.postTitl2 {
 float:left
}
.postDesc2 {
 color:#666;
 float:right
}
.postText2 {
 clear:both;
 color:#666
}
.pfl_feedback_area_title {
 line-height:1.5;
 font-weight:bold;
 font-size:16px;
 border-bottom:1px solid #ccc;
 line-height:2.5em
}
.pfl_feedback_area_title a,
.pfl_feedbackManage a {
 color:#690;
 margin:0 10px;
 font-weight:normal
}
.pfl_feedback_area_title a:hover,
.pfl_feedbackManage a:hover {
 color:#f60
}
.pfl_feedbackManage a {
 margin:0 0 0 0
}
.pfl_feedbackItem {
 border-bottom:1px solid #ccc;
 margin-bottom:20px
}
.pfl_feedbacksubtitle {
 width:100%;
 border-bottom:1px dotted #ccc;
 height:2.5em;
 line-height:2.5em
}
.pfl_feedbackname {
 float:left;
 color:#a8b1ba
}
.pfl_feedbackManage {
 float:right
}
.pfl_feedbackCon {
 color:#000;
 padding:10px 0
}
.pfl_feedbackAnswer {
 color:#f40;
 text-indent:2em;
 padding-bottom:10px
}
.tdSentMessage {
 text-align:right
}
.errorMessage {
 width:300px;
 float:left
}
#Profile1_panelAdd td {
 padding:10px 0
}
.divPhoto {
 border:1px solid #ccc;
 padding:2px;
 margin-right:10px
}
.thumbDescription {
 color:#666;
 text-align:right;
 padding-top:5px;
 padding-bottom:5px;
 padding-right:10px;
 margin-bottom:10px
}
#footer {
 text-align:center;
 min-height:15px;
 _height:15px;
 border-top:1px solid #000;
 margin-top:10px;
 padding-top:10px;
 margin-bottom:10px
}
.personInfo {
 margin-bottom:20px
}
.pages {
 text-align:right
}
.postBody {
 line-height:1.5
}
.postBody p,
.postCon p {
 text-indent:2em;
 margin:0 auto 1em auto
}
.postBody h2 {
 font-size:150%;
 margin:15px auto 2px auto;
 font-weight:bold
}
.postBody h3 {
 font-size:120%;
 margin:15px auto 2px auto;
 font-weight:bold
}
.postBody h4 {
 font-size:110%;
 margin:15px auto 2px auto;
 font-weight:bold;
 color:#333
}
.postBody h5 {
 font-size:100%;
 margin:15px auto 2px auto;
 font-weight:bold;
 color:#333
}
.postBody a:link,
.postBody a:visited,
.postBody a:active {
 text-decoration:underline
}
.postCon a:link,
.postCon a:visited,
.postCon a:active {
 text-decoration:underline
}
.postBody ul,
.postCon ul {
 margin-left:2em
}
.postBody li,
.postCon li {
 list-style-type:disc;
 margin-bottom:1em
}
.postBody blockquote {
 background:url('images/comment.gif') no-repeat 25px 0;
 line-height:1.6;
 color:#333
}
.div_my_zzk {
 margin-left:13px
}
.input_my_zzk {
 width:120px
}
.blog_comment_body a:link {
 text-decoration:underline
}
#cnblogs_post_body img {
 max-width:820px
}
#sidebar_ad {
 margin:0 auto 15px auto
}


/** 导航 **/

#sign{
     text-align: center;
     margin-top: -150px;
}
/** 引用不缩进 **/
blockquote p{
	text-indent: 5px !important;
}

.postBody{
      font-family: Exo,'-apple-system','Open Sans',HelveticaNeue-Light,'Helvetica Neue Light','Helvetica Neue','Hiragino Sans GB','Microsoft YaHei',Helvetica,Arial,sans-serif;
}

/** 加粗改写 */

strong, b{
  color: #B85959 !important; 
  font-weight: bold !important;
}

#home{
   max-width:1300px;
   margin: 0 auto;
}
#topics{
    margin-right: 8px;
}
#cnblogs_post_body img{
   box-shadow: 0px 0px 10px #888888;
   margin: 0 auto;
}
#toc{
 font-size: 16px;
 display: block;
 position: fixed;
 top: 80px;
 right: 25px;
 min-width: 100px;
 max-width: 350px;
 max-height: 20px;
 overflow-y: scroll;
 border: 1px solid #aaa;
 border-radius: 0 0 1px 1px;
 -moz-border-radius: 0 0 1px 1px;
 background: rgba(249,249,249,0.75);
 padding: 12px;
 box-shadow: 0 1px 8px #000;
 -webkit-box-shadow: 0 1px 8px #000;
 -moz-box-shadow: 0 1px 8px #000;
}
 
#toc:hover{
 display: block;
 position: fixed;
 top: 50px;
 right: 25px;
 min-width: 100px;
 max-width: 350px;
 max-height: 400px;
 overflow-y: scroll;
 border: 1px solid #aaa;
 border-radius: 0 0 1px 1px;
 -moz-border-radius: 0 0 1px 1px;
 background: rgba(249,249,249,0.75);
 padding: 12px;
 box-shadow: 0 1px 8px #000;
 -webkit-box-shadow: 0 1px 8px #000;
 -moz-box-shadow: 0 1px 8px #000;
}
 
body { overflow-x: hidden;}

#toc a.head{
    text-decoration:none;
    font-size: 20px;
    font-weight:bold;
} 

/** 其他 **/

#profile_block{
   margin-left:20px;
}

/** 文章字体大小 */

#cnblogs_post_body p{
  font-size: 16px !important;
}

/** 标题 */

#cnblogs_post_body h2:before{
    display: inline-block;
    content: '#';
    color: #390;
    margin: 15px;
}

#cnblogs_post_body h3{
  font-size: 18px !important;
}

#cnblogs_post_body h3:before{
  display: inline-block;
    content: '##';
    color: #390;
    margin: 15px;
}

#cnblogs_post_body h4{
  font-size: 16px !important;
}

#cnblogs_post_body h4:before{
  display: inline-block;
    content: '###';
    color: #390;
    margin: 15px;
}

/** 
#cnblogs_post_body h2 {
    font-size: 21px;
    font-weight: bold;
    background: gray !important;
    background: #406CA4 !important;
    border-radius: 4px 4px 4px 4px !important;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑", "宋体", "黑体", Arial;
    font-size: 17px;
    font-weight: bold;
    margin: 15px 0 !important;
    padding: 5px 0 5px 20px;
}

#cnblogs_post_body h3 {
    display: inline-block;
    background: gray !important;
    background: #406CA4 !important;
    border-radius: 4px 4px 4px 4px !important;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑", "宋体", "黑体", Arial;
    font-size: 17px;
    font-weight: bold;
    margin: 15px 15px !important;
    padding: 5px 20px 5px 20px;
}   */

#blogTitle {
    background: #cccccc;
}

.dayTitle {
    text-align: right;
    font-size: 12px;
}

#sidebar_这里存放朋友博客的链接{
    display:none
}

#cnblogs_post_body p {
    line-height: 2.0;
    text-indent: 2em;
}

#MySignature{
   margin-top:150px;
}

.cnblogs-markdown pre{
   margin-left:25px;
}

#cnblogs_post_body table{
       margin: 15px 0px 15px 25px;
}

#cnblogs_post_body table th, #cnblogs_post_body table td{
	    padding: 6px 13px;
    border: 1px solid #ddd;
}

#cnblogs_post_body table tr{
	background-color: #fff;
    border-top: 1px solid #ccc;
}

#cnblogs_post_body table tr.header{
    background-color: #f8f8f8;
}

.cnblogs-markdown p code{
	display:inline;
}

.cnblogs-markdown pre{
	background-color: #ebf2fb;
    border-left: 2px solid #406CA4;
}

.cnblogs-markdown pre code.hljs{
	background-color:#ebf2fb!important;
	border:none!important;
}

#cnblogs_post_body table tr:nth-child(2n){
	background-color: #f8f8f8;
}

#cnblogs_post_body table tr:hover{
    background-color: #f8f8f8;
}

#cnblogs_post_body ul{
   margin-left:55px;
}

#cnblogs_post_body.cnblogs-markdown h1, #cnblogs_post_body.cnblogs-markdown h1 a{
        font-size: 12px;
        margin: 0px;
	color: white;
}

/** 固定推荐按钮 **/
#div_digg{
  display:none;
}
#div_digg .diggit{
  margin-left:13px
}
#div_digg .buryit{
  display:none;
  margin-right:13px
}
#div_digg:hover{
  opacity:1;
}

/** 链接样式 **/
.postBody p a {
    margin: 10px;
    color: blue;
}

.postBody p a:hover {
    color: #7dc35a !important;
    font-weight: normail !important;
} 

/** 兼容旧文章样式 **/
.cnblogs_code img {
    width: 2% !important;
}

/** 引用 > 的样式 **/
blockquote{
    margin-left: 13px;
    border-left: 3px solid #C09450 !important;
    border: none;
    background: #efefef;
}

/** 链接 **/
.postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: none;
    color: #E5143D;
}

/** 改变代码块字体大小 **/
.cnblogs-markdown .hljs{
    font-family: "JetBrains Mono",sans-serif!important;
    font-size: 14px!important;
    line-height: 1.5!important;
    padding: 5px!important;
}





body {
 font-size:14px !important;
 font-family:'PingFang SC','Helvetica Neue','Helvetica','Arial',sans-serif;
 -webkit-text-size-adjust:none
}

/*去除广告*/
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
display:none;!important
}





/*生成博客目录的CSS*/
#uprightsideBar{
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
    top:50px;
    right:0px;
    width: auto;
    height: auto;
}
#sideBarTab{
    float:left;
    width:30px;
    border:1px solid #e5e5e5;
    border-right:none;
    text-align:center;
    background:#d2d8de;
}

#sideBarContents{
    float:left;
    overflow:auto;
    overflow-x:hidden;!important;
    width:200px;
    min-height:108px;
    max-height:460px;
    border:1px solid #e5e5e5;
    border-right:none;
    background:#d2d8de;
}
#sideBarContents dl{
    margin:0;
    padding:0;
}

#sideBarContents dt{
    margin-top:5px;
    margin-left:5px;
}

#sideBarContents dd, dt {
    cursor: pointer;
}

#sideBarContents dd:hover, dt:hover {
    color:#A7995A;
}
#sideBarContents dd{
    margin-left:20px;
}





#back-to-top {
    background-color:#d2d8de;
    bottom: 0;
    box-shadow: 0 0 6px #d2d8de;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}
```

## 页首html
```html
<script type="text/javascript">
/*
    功能：生成博客目录的JS工具
    测试：IE8，火狐，google测试通过
    孤傲苍狼
    2014-5-11
*/
var BlogDirectory = {
    /*
        获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
    */
    getElementPosition:function (ele) {
        var topPosition = 0;
        var leftPosition = 0;
        while (ele){
            topPosition += ele.offsetTop;
            leftPosition += ele.offsetLeft;
            ele = ele.offsetParent;
        }
        return {top:topPosition, left:leftPosition};
    },

    /*
    获取滚动条当前位置
    */
    getScrollBarPosition:function () {
        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return  scrollBarPosition;
    },

    /*
    移动滚动条，finalPos 为目的位置，internal 为移动速度
    */
    moveScrollBar:function(finalpos, interval) {

        //若不支持此方法，则退出
        if(!window.scrollTo) {
            return false;
        }

        //窗体滚动时，禁用鼠标滚轮
        window.onmousewheel = function(){
            return false;
        };

        //清除计时
        if (document.body.movement) {
            clearTimeout(document.body.movement);
        }

        var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

        var dist = 0;
        if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
            window.onmousewheel = function(){
                return true;
            }
            return true;
        }
        if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
            dist = Math.ceil((finalpos - currentpos)/10);
            currentpos += dist;
        }
        if (currentpos > finalpos) {
            dist = Math.ceil((currentpos - finalpos)/10);
            currentpos -= dist;
        }

        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
        window.scrollTo(0, currentpos);//移动窗口
        if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
        {
            window.onmousewheel = function(){
                return true;
            }
            return true;
        }

        //进行下一步移动
        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
        document.body.movement = setTimeout(repeat, interval);
    },

    htmlDecode:function (text){
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },

    /*
    创建博客目录，
    id表示包含博文正文的 div 容器的 id，
    mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
    interval 表示移动的速度
    */
    createBlogDirectory:function (id, mt, st, interval){
         //获取博文正文div容器
        var elem = document.getElementById(id);
        if(!elem) return false;
        //获取div中所有元素结点
        var nodes = elem.getElementsByTagName("*");
        //创建博客目录的div容器
        var divSideBar = document.createElement('DIV');
        divSideBar.className = 'uprightsideBar';
        divSideBar.setAttribute('id', 'uprightsideBar');
        var divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        divSideBar.appendChild(divSideBarTab);
        var h2 = document.createElement('H2');
        divSideBarTab.appendChild(h2);
        var txt = document.createTextNode('目录');
        h2.appendChild(txt);
        var divSideBarContents = document.createElement('DIV');
        divSideBarContents.style.display = 'none';
        divSideBarContents.setAttribute('id', 'sideBarContents');
        divSideBar.appendChild(divSideBarContents);
        //创建自定义列表
        var dlist = document.createElement("dl");
        divSideBarContents.appendChild(dlist);
        var num = 0;//统计找到的mt和st
        mt = mt.toUpperCase();//转化成大写
        st = st.toUpperCase();//转化成大写
        //遍历所有元素结点
        for(var i=0; i<nodes.length; i++)
        {
            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)
            {
                //获取标题文本
                var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
                nodetext = nodetext.replace(/ /ig, "");//替换掉所有的
                nodetext = BlogDirectory.htmlDecode(nodetext);
                //插入锚
                nodes[i].setAttribute("id", "blogTitle" + num);
                var item;
                switch(nodes[i].nodeName)
                {
                    case mt:    //若为主标题
                        item = document.createElement("dt");
                        break;
                    case st:    //若为子标题
                        item = document.createElement("dd");
                        break;
                }

                //创建锚链接
                var itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                item.onclick = function(){        //添加鼠标点击触发函数
                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                    if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                };

                //将自定义表项加入自定义列表中
                dlist.appendChild(item);
                num++;
            }
        }

        if(num == 0) return false;
        /*鼠标进入时的事件处理*/
        divSideBarTab.onmouseenter = function(){
            divSideBarContents.style.display = 'block';
        }
        /*鼠标离开时的事件处理*/
        divSideBar.onmouseleave = function() {
            divSideBarContents.style.display = 'none';
        }

        document.body.appendChild(divSideBar);
    }

};

window.onload=function(){
    /*页面加载完成之后生成博客目录*/
    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
}
</script>