博客园美化，自定义你的博客，css+html (iframe)
2021强烈安利：GZ的第三方CNB皮肤?（目前正用）：https://www.yuque.com/awescnb/user/kyi19z
以下为N年前的版本
可能要开始频繁的写博客了，先打扫下自家门口。
收藏备用
网易云原版iframe：
1 <div id="bodyframe" style="visibility: hidden"> 2 <embed id="floating" ; frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=320 src="https://music.163.com/outchain/player?type=0&id=4927975309&auto=0&height=430">embed> 3 <div id="floating" onclick="document.all.bodyframe.style.visibility='hidden'" style="background-color: #f1f1f1; cursor: pointer; text-align: center;font-size: 16px;";z-index: 1"> 4 <font color="#000000">隐藏font> 5 div> div> 6 7 <div id="floating" onclick="document.all.bodyframe.style.visibility='visible'"; style="background-color: #00000040; cursor: pointer; text-align: center; font-size: 16px;" z-index: 1"> 8 <font color="#888888" size:14px>听歌font>div>网易云iframe
1 body{ 2 background-color: #293941; 3 background:url("博客背景图片URL"); 4 background-attachment:fixed; 5 background-repeat:no-repeat; 6 background-position:center; 7 background-size:cover; 8 } 9 #floating { 10 position: fixed; 11 bottom: 0px; 12 right: 0; 13 z-index: 1 14 } 15 .c_ad_block /*关闭下方广告*/ 16 {display: none;} 17 .commentform/*关闭下方广告*/ 18 {display: none;} 19 #home { 20 margin: 0 auto; 21 width: 65%; 22 min-width: 950px; 23 background-color: #fffffff2;/*透明度调整为f2*/ 24 padding: 30px; 25 margin-top: 50px; 26 margin-bottom: 50px; 27 box-shadow: 0 2px 6px rgba(100,100,100,.3); 28 } 29 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { 30 background: #fff0;/*透明度调整为0*/ 31 margin-bottom: 35px; 32 word-wrap: break-word; 33 }CSS部分
1 <div id="bodyframe" style="visibility: visible"> 2 <embed id="floating" ; frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=320 src="https://music.163.com/outchain/player?type=0&id=歌单ID&auto=1&height=430">embed> 3 <div id="floating" onclick="document.all.bodyframe.style.visibility='hidden'" style="background-color: #f1f1f1; cursor: pointer; text-align: center;font-size: 16px;";z-index: 1"> 4 <font color="#000000">隐藏 font> 5 div> div>侧边栏公告
1 <div> 2 <p><img style="float:right; margin-right: 5%;" title="Hello,world!" 3 onmouseover="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321113207banner_r_n.png';" onmouseout="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png';" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png" alt="" />p> 4 div> 5 6 <div id="floating" onclick="document.all.bodyframe.style.visibility='visible'"; style="background-color: #00000040; cursor: pointer; text-align: center; font-size: 16px;" z-index: 1"> 7 <font color="#ffffff" size:14px>显示 font>div>页首
1 <div style="height:800px;" > 2 div> 3 /*留白*/页脚
PS: 先申请JS权限（说点好话给管理员~），博客园不支持iframe的字符串，替换成embed即可。
PS2: 网易云iframe插件可能不能播放部分歌曲（即使不用VIP、付费的，你怎么点都不会播放），自己测试下能播放的，放到新歌单就行了。
还有更讲究的：
https://www.cnblogs.com/laoguantongxiegogo/p/12488696.html#4521979
最后一句：简简单单就是美。
再备份一次2020.10.24：
1 /*html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }*/ 2 body{ 3 background-color: #293941; 4 background:url(https://tvax1.sinaimg.cn/large/8f8ff1c9gy1gd1p6m28fqj21hc0xc7n0.jpg); 5 /*background:url(https://tva4.sinaimg.cn/large/8f8ff1c9gy1gdhhlxutuwj21hc0xctpr.jpg);黑白*/ 6 background-attachment:fixed; 7 background-repeat:no-repeat; 8 background-position:center; 9 background-size:cover; 10 /* cursor: url(https://blog-static.cnblogs.com/files/-AClon-/va11_hand.ico),auto; */ 11 } 12 /*a:hover{cursor:url(),auto;}*/ 13 #floating { 14 position: fixed; 15 bottom: 0px; 16 right: 0; 17 z-index: 1 18 } 19 20 #MySignature { 21 background: rgb(255, 246, 220); 22 border-left: 5px solid rgb(255,204,51); 23 margin: 0; 24 color: black; 25 padding-left: 10px; 26 padding-top: unset; 27 padding-bottom: unset; 28 } 29 /*关闭下方广告*/ 30 .c_ad_block {display: none;} 31 /*.recomm-block{display: none;}*/ 32 #ad_t2{display: none;} 33 #footer { 34 color: #686868; 35 text-align: center; 36 min-height: 15px; 37 _height: 15px; 38 border-top: 1px solid #ededed; 39 margin-top: 0px; 40 padding-top: 10px; 41 margin-bottom: 0px; 42 } 43 44 #home { 45 margin: 0 auto; 46 width: 65%; 47 min-width: 950px; 48 background-color: #fffffff5; 49 padding: 20px; 50 margin-top: 50px; 51 margin-bottom: 50px; 52 box-shadow: 0 2px 6px rgba(100,100,100,.3); 53 } 54 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { 55 background: none; 56 margin: 0px auto; 57 word-wrap: break-word; 58 } 59 #blog-calendar { 60 margin: 5px auto; 61 } 62 .CalTodayDay { 63 background: #8fcbff !important; 64 } 65 /*目录生成*/ 66 #uprightsideBar{ 67 font-size:14px; 68 text-align:left; 69 position:fixed; 70 bottom: 13%; 71 right:0px; 72 width: auto; 73 height: auto; 74 } 75 #sideBarTab{ 76 float:right; 77 width:30px; 78 border-right: 3px solid rgb(255,204,51); 79 text-align:center; 80 background: #ffffff; 81 color: #777; 82 padding: 8px; 83 box-shadow: 0 0 7px rgba(100, 100, 100, 0.5); 84 } 85 86 #sideBarContents{ 87 float:right; 88 overflow:auto; 89 overflow-x:hidden;!important; 90 width:auto; 91 min-height:50px; 92 max-height: 450px; 93 max-width: 50%; 94 border-left:3px solid rgb(255,204,51); 95 background:#ffffff; 96 box-shadow: -1px 0 8px rgba(100, 100, 100, 0.5); 97 } 98 #sideBarContents dl{ 99 margin:0; 100 padding:0; 101 } 102 103 #sideBarContents dt{ 104 margin: 12px 10px; 105 font-size: 16px; 106 } 107 #sideBarContents dd{ 108 margin:8px 20px; 109 } 110 111 #sideBarContents dd, dt { 112 cursor: pointer; 113 } 114 #sideBarContents dd:hover, dt:hover { 115 color:rgb(255,204,51); 116 } 117 118 /* 文章标题样式(这个不是markdown里的标题) */ 119 .postTitle, .entrylistPosttitle, .postTitle a { 120 float: none; 121 padding: 0px 10px; 122 } 123 .day .postTitle a { 124 padding-left: 0px; 125 } 126 .entrylistPosttitle a:hover, .postTitle a:hover { 127 margin-left: 15px; 128 color: #0f3647; 129 text-decoration: none; 130 } 131 .postTitle a:link, .postTitle a:visited, .postTitle a:active, .entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active { 132 color: #21759b; 133 transition: all .4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s; 134 } 135 .entrylistTitle, .PostListTitle, .thumbTitle { 136 height: 38px; 137 line-height: 38px; 138 font-size: 16px; 139 border-bottom: 1px solid #ccc; 140 color: #21759b; 141 margin: 0; 142 } 143 .entrylistDescription { 144 color: #777; 145 text-align: left; 146 padding: 5px 15px; 147 font-size: 14px; 148 margin:0; 149 } 150 /* 普通文字样式 */ 151 #cnblogs_post_body p, .postBody p { 152 margin: 18px 0px; 153 color: unset; 154 font-size: 16px; 155 text-indent: 0; 156 } 157 158 .postBody a:link{text-decoration: none;} 159 .postBody a:hover{text-decoration: underline;} 160 161 /* 标题样式 */ 162 #topics .postTitle { 163 font-size:20px; 164 font-weight: bold; 165 line-height: 1.5; 166 width: 100%; 167 padding-left: 5px; 168 border-left: 3px solid #21759b; 169 float: none; 170 } 171 .postBody {font-size:unset;font-size: initial;} 172 173 .postBody h1, .postBody h2, .postBody h3, .postBody h4, .postBody h5, .postBody h6, #cnblogs_post_body h1,#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6{ 174 font-weight: bold; 175 line-height: 1.5; 176 color: unset; 177 } 178 179 #cnblogs_post_body h1 { 180 font-size: 30px; 181 margin: 10px 0; 182 border-bottom: 1px solid #ccc; 183 } 184 185 #cnblogs_post_body h2 { 186 font-size: 24px; 187 margin: 20px 0; 188 border-bottom: 1px solid #ccc; 189 } 190 191 #cnblogs_post_body h3 { 192 font-size: 20px; 193 margin: 20px auto 5px; 194 } 195 196 #cnblogs_post_body h4 { 197 font-size: 18px; 198 margin: 10px 0; 199 } 200 /* 标题样式设置结束 */ 201 202 /* 无序列表 */ 203 #cnblogs_post_body ul li { 204 list-style-type: disc; 205 margin: auto 0px; 206 } 207 208 /* 有序列表 */ 209 #cnblogs_post_body ol li { 210 list-style-type: decimal; 211 margin: auto 0px; 212 padding: 0px; 213 } 214 #cnblogs_post_body ol { 215 padding-left: 30px; 216 } 217 218 /* 超链接 */ 219 #cnblogs_post_body a:link { 220 text-decoration: none; 221 color: #002C99; 222 } 223 224 #cnblogs_post_body a:hover { 225 text-decoration: underline; 226 } 227 228 /* 引用背景 */ 229 #topics .postBody blockquote { 230 background: none; 231 border: none; 232 border-left: 5px solid #ccc; 233 margin: 0; 234 padding:0 10px; 235 color: #777; 236 min-height: auto; 237 } 238 239 /* 单行代码 */ 240 .cnblogs-markdown code { 241 font-family: Consolas, "Microsoft YaHei", monospace !important; 242 font-size: 16px !important; 243 color: #eee; 244 line-height: 20px; 245 background-color: #222 !important; 246 border: 1px solid #ccc !important; 247 padding: 0 5px !important; 248 border-radius: 3px !important; 249 line-height: 1.8; 250 margin: 1px 5px; 251 vertical-align: middle; 252 display: inline-block; 253 } 254 255 /* 多行代码, 引用 */ 256 .cnblogs-markdown .hljs { 257 font-family: Consolas, "Microsoft YaHei", monospace !important; 258 font-size: 16px !important; 259 line-height: 1.5 !important; 260 padding: 5px !important; 261 color:#eee; 262 } 263 264 /*表格*/ 265 #cnblogs_post_body table, .cnblogs-post-body table { 266 border: none; 267 border-collapse: collapse; 268 word-break: break-word; 269 } 270 271 .postDesc { 272 font-size: 13px; 273 color: #757575; 274 float: left; 275 width: 100%; 276 clear: both; 277 text-align: left; 278 padding-left: 20px; 279 padding-right: 5px; 280 margin-top: 0; 281 line-height: 1.5; 282 } 283 284 /*分类目录*/ 285 .entrylistItem { 286 min-height: unset; 287 margin: 30px 0px; 288 padding: 0px; 289 width: 100%; 290 } 291 292 /*代码颜色*/ 293 #mainContent .cnblogs-markdown .hljs,#mainContent .cnblogs-post-body .hljs { 294 display: block; 295 white-space:pre!important; 296 word-break:keep-all!important; 297 overflow-x: auto; 298 padding: .5em; 299 color: #abb2bf; 300 background: #2d3748!important 301 } 302 303 #mainContent .cnblogs-markdown .hljs-comment,#mainContent .cnblogs-markdown .hljs-quote,#mainContent .cnblogs-post-body .hljs-comment,#mainContent .cnblogs-post-body .hljs-quote { 304 color: #5c6370; 305 font-style: italic 306 } 307 308 #mainContent .cnblogs-markdown .hljs-doctag,#mainContent .cnblogs-markdown .hljs-formula,#mainContent .cnblogs-markdown .hljs-keyword,#mainContent .cnblogs-post-body .hljs-doctag,#mainContent .cnblogs-post-body .hljs-formula,#mainContent .cnblogs-post-body .hljs-keyword { 309 color: #c678dd 310 } 311 312 #mainContent .cnblogs-markdown .hljs-deletion,#mainContent .cnblogs-markdown .hljs-name,#mainContent .cnblogs-markdown .hljs-section,#mainContent .cnblogs-markdown .hljs-selector-tag,#mainContent .cnblogs-markdown .hljs-subst,#mainContent .cnblogs-post-body .hljs-deletion,#mainContent .cnblogs-post-body .hljs-name,#mainContent .cnblogs-post-body .hljs-section,#mainContent .cnblogs-post-body .hljs-selector-tag,#mainContent .cnblogs-post-body .hljs-subst { 313 color: #e06c75 314 } 315 316 #mainContent .cnblogs-markdown .hljs-literal,#mainContent .cnblogs-post-body .hljs-literal { 317 color: #56b6c2 318 } 319 320 #mainContent .cnblogs-markdown .hljs-addition,#mainContent .cnblogs-markdown .hljs-attribute,#mainContent .cnblogs-markdown .hljs-meta-string,#mainContent .cnblogs-markdown .hljs-regexp,#mainContent .cnblogs-markdown .hljs-string,#mainContent .cnblogs-post-body .hljs-addition,#mainContent .cnblogs-post-body .hljs-attribute,#mainContent .cnblogs-post-body .hljs-meta-string,#mainContent .cnblogs-post-body .hljs-regexp,#mainContent .cnblogs-post-body .hljs-string { 321 color: #98c379 322 } 323 324 #mainContent .cnblogs-markdown .hljs-built_in,#mainContent .cnblogs-markdown .hljs-class .hljs-title,#mainContent .cnblogs-post-body .hljs-built_in,#mainContent .cnblogs-post-body .hljs-class .hljs-title { 325 color: #e6c07b 326 } 327 328 #mainContent .cnblogs-markdown .hljs-attr,#mainContent .cnblogs-markdown .hljs-number,#mainContent .cnblogs-markdown .hljs-selector-attr,#mainContent .cnblogs-markdown .hljs-selector-class,#mainContent .cnblogs-markdown .hljs-selector-pseudo,#mainContent .cnblogs-markdown .hljs-template-variable,#mainContent .cnblogs-markdown .hljs-type,#mainContent .cnblogs-markdown .hljs-variable,#mainContent .cnblogs-post-body .hljs-attr,#mainContent .cnblogs-post-body .hljs-number,#mainContent .cnblogs-post-body .hljs-selector-attr,#mainContent .cnblogs-post-body .hljs-selector-class,#mainContent .cnblogs-post-body .hljs-selector-pseudo,#mainContent .cnblogs-post-body .hljs-template-variable,#mainContent .cnblogs-post-body .hljs-type,#mainContent .cnblogs-post-body .hljs-variable { 329 color: #d19a66 330 } 331 332 #mainContent .cnblogs-markdown .hljs-bullet,#mainContent .cnblogs-markdown .hljs-link,#mainContent .cnblogs-markdown .hljs-meta,#mainContent .cnblogs-markdown .hljs-selector-id,#mainContent .cnblogs-markdown .hljs-symbol,#mainContent .cnblogs-markdown .hljs-title,#mainContent .cnblogs-post-body .hljs-bullet,#mainContent .cnblogs-post-body .hljs-link,#mainContent .cnblogs-post-body .hljs-meta,#mainContent .cnblogs-post-body .hljs-selector-id,#mainContent .cnblogs-post-body .hljs-symbol,#mainContent .cnblogs-post-body .hljs-title { 333 color: #61aeee 334 } 335 336 #mainContent .cnblogs-markdown .hljs-emphasis,#mainContent .cnblogs-post-body .hljs-emphasis { 337 font-style: italic 338 } 339 340 #mainContent .cnblogs-markdown .hljs-strong,#mainContent .cnblogs-post-body .hljs-strong { 341 font-weight: 700 342 } 343 344 #mainContent .cnblogs-markdown .hljs-link,#mainContent .cnblogs-post-body .hljs-link { 345 text-decoration: underline 346 } 347 348 #mainContent .cnblogs-markdown .hljs-tag,#mainContent .cnblogs-post-body .hljs-tag { 349 color: #abb2bf 350 } 351 .footnotes hr { 352 display: none !important; 353 } 354 }CSS
1 <script> 2 var _hmt = _hmt || []; 3 (function() { 4 var hm = document.createElement("script"); 5 hm.src = "https://hm.baidu.com/hm.js?fa626316b93e18bd5ff11ef8b6bd2fc9"; 6 var s = document.getElementsByTagName("script")[0]; 7 s.parentNode.insertBefore(hm, s); 8 })(); 9 script> 10 11 <p style="text-align: center;"><span style="font-size: 16px;"><strong>欢迎第<a href="https://www.58q.com/" target="_blank"><img style="vertical-align: middle;" src="https://www.cutercounter.com/hits.php?id=huxdqocc&nd=5&style=27" alt="嗷了去，图裂了" />a>位访客strong>span>p> 12 <p style="text-align: center;">访问总量：<a href="https://www.58q.com/" target="_blank"><img style="vertical-align: text-top;" src="https://www.cutercounter.com/hits.php?id=huxdqocp&nd=6&style=14" alt="嗷了去，图裂了" />a>p> 13 <br/> 14 15 <span style="font-size: 14px;"><p><del>一个非专业的闲鱼的博客del>……p> 16 <p>学业为主，如有不足，请指正。p> 17 <p style="text-align: right;"><a href="https://space.bilibili.com/476079747" target="_blank"><span style="color: #3366ff;"><strong>B站: Nolcastrong>span>a>span>p> 18 <p style="text-align: right;"><strong><a href="http://www.coolapk.com/u/793843" target="_blank"><span style="color: #339966; font-size: 14px;">酷安: Lboy_Cspan>a>strong>p> 19 <p style="text-align: right;"><strong><a href="https://mianbaoduo.com/o/nolca" target="_blank"><span style="color: rgb(253,171,14); font-size: 14px;">面包多：资源零售铺>>span>a>strong>p> 20 <p style="text-align: right;"><strong><a href="http://nolca.ys168.com/" target="_blank"><span style="font-size: 14px;">资源小站>>span>a>strong>p>侧边公告栏
1 script charset="utf-8" src="https://blog-static.cnblogs.com/files/-AClon-/Scroll.js">script> 2 <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/-AClon-/mobile.css"> 3 <link rel="shortcut icon" href="https://files.cnblogs.com/files/-AClon-/nolca.ico"> 4 5 <div> 6 <p>img style="float: left; margin-left: 0%;" title="???" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321052532banner_l.png" alt="" />p> 7 8 9 <p ondragstart="window.event.returnValue=false;return false;" oncontextmenu="window.event.returnValue=false;return false;" onselectstart="event.returnValue=false;return false;">img style="float:right; margin-right: 5%;" title="Hello,world!" 10 onmouseover="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321113207banner_r_n.png';" onmouseout="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png';" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png" alt="" />p> 11 div> 12 13 14 <script type="text/javascript"> 15 /* 16 功能：生成博客目录的JS工具 17 测试：IE8，火狐，google测试通过 18 孤傲苍狼 19 2014-5-11 20 */ 21 var BlogDirectory = { 22 /* 23 获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top） 24 */ 25 getElementPosition:function (ele) { 26 var topPosition = 0; 27 var leftPosition = 0; 28 while (ele){ 29 topPosition += ele.offsetTop; 30 leftPosition += ele.offsetLeft; 31 ele = ele.offsetParent; 32 } 33 return {top:topPosition, left:leftPosition}; 34 }, 35 36 /* 37 获取滚动条当前位置 38 */ 39 getScrollBarPosition:function () { 40 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; 41 return scrollBarPosition; 42 }, 43 44 /* 45 移动滚动条，finalPos 为目的位置，internal 为移动速度 46 */ 47 moveScrollBar:function(finalpos, interval) { 48 49 //若不支持此方法，则退出 50 if(!window.scrollTo) { 51 return false; 52 } 53 54 //窗体滚动时，禁用鼠标滚轮 55 window.onmousewheel = function(){ 56 return false; 57 }; 58 59 //清除计时 60 if (document.body.movement) { 61 clearTimeout(document.body.movement); 62 } 63 64 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 65 66 var dist = 0; 67 if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出 68 window.onmousewheel = function(){ 69 return true; 70 } 71 return true; 72 } 73 if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离 74 dist = Math.ceil((finalpos - currentpos)/10); 75 currentpos += dist; 76 } 77 if (currentpos > finalpos) { 78 dist = Math.ceil((currentpos - finalpos)/10); 79 currentpos -= dist; 80 } 81 82 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 83 window.scrollTo(0, currentpos);//移动窗口 84 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出 85 { 86 window.onmousewheel = function(){ 87 return true; 88 } 89 return true; 90 } 91 92 //进行下一步移动 93 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 94 document.body.movement = setTimeout(repeat, interval); 95 }, 96 97 htmlDecode:function (text){ 98 var temp = document.createElement("div"); 99 temp.innerHTML = text; 100 var output = temp.innerText || temp.textContent; 101 temp = null; 102 return output; 103 }, 104 105 /* 106 创建博客目录， 107 id表示包含博文正文的 div 容器的 id， 108 mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！）， 109 interval 表示移动的速度 110 */ 111 createBlogDirectory:function (id, mt, st, interval){ 112 //获取博文正文div容器 113 var elem = document.getElementById(id); 114 if(!elem) return false; 115 //获取div中所有元素结点 116 var nodes = elem.getElementsByTagName("*"); 117 //创建博客目录的div容器 118 var divSideBar = document.createElement('DIV'); 119 divSideBar.className = 'uprightsideBar'; 120 divSideBar.setAttribute('id', 'uprightsideBar'); 121 var divSideBarTab = document.createElement('DIV'); 122 divSideBarTab.setAttribute('id', 'sideBarTab'); 123 divSideBar.appendChild(divSideBarTab); 124 var h2 = document.createElement('H2'); 125 divSideBarTab.appendChild(h2); 126 var txt = document.createTextNode('目录导航'); 127 h2.appendChild(txt); 128 var divSideBarContents = document.createElement('DIV'); 129 divSideBarContents.style.display = 'none'; 130 divSideBarContents.setAttribute('id', 'sideBarContents'); 131 divSideBar.appendChild(divSideBarContents); 132 //创建自定义列表 133 var dlist = document.createElement("dl"); 134 divSideBarContents.appendChild(dlist); 135 var num = 0;//统计找到的mt和st 136 mt = mt.toUpperCase();//转化成大写 137 st = st.toUpperCase();//转化成大写 138 //遍历所有元素结点 139 for(var i=0; i<nodes.length; i++) 140 { 141 if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) 142 { 143 //获取标题文本 144 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签 145 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 146 nodetext = BlogDirectory.htmlDecode(nodetext); 147 //插入锚 148 nodes[i].setAttribute("id", "blogTitle" + num); 149 var item; 150 switch(nodes[i].nodeName) 151 { 152 case mt: //若为主标题 153 item = document.createElement("dt"); 154 break; 155 case st: //若为子标题 156 item = document.createElement("dd"); 157 break; 158 } 159 160 //创建锚链接 161 var itemtext = document.createTextNode(nodetext); 162 item.appendChild(itemtext); 163 item.setAttribute("name", num); 164 item.onclick = function(){ //添加鼠标点击触发函数 165 var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); 166 if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; 167 }; 168 169 //将自定义表项加入自定义列表中 170 dlist.appendChild(item); 171 num++; 172 } 173 } 174 175 if(num == 0) return false; 176 /*鼠标进入时的事件处理*/ 177 divSideBarTab.onmouseenter = function(){ 178 divSideBarContents.style.display = 'block'; 179 } 180 /*鼠标离开时的事件处理*/ 181 divSideBar.onmouseleave = function() { 182 divSideBarContents.style.display = 'none'; 183 } 184 185 document.body.appendChild(divSideBar); 186 } 187 188 }; 189 window.onload=function(){ 190 /*页面加载完成之后生成博客目录*/ 191 BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); 192 } 193 script>页首(别人用JS实现的简陋的目录导航功能)
1 <div style="height:800px;" > 2 div> 3 <p style="text-align: center;"><span style="font-family: wingdings, 'zapf dingbats'; /*background-color: #ffffffee;*/ color: #ffffff;">Hello, world.span>p> 4 5 <script type="text/javascript" language="javascript"> 6 //Setting ico for cnblogs 7 var linkObject = document.createElement('link'); 8 linkObject.rel = "shortcut icon"; 9 linkObject.href = "https://files.cnblogs.com/files/-AClon-/nolca.ico"; 10 document.getElementsByTagName("head")[0].appendChild(linkObject); 11 script> 12 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> 14 <script src="https://blog-static.cnblogs.com/files/-AClon-/APlayer.min.js">script> 15 <div id="aplayer" class="aplayer" data-id="4927975309" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="false" data-order="" data-theme="rgb(255,204,51)">div> 16 <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js">script>页尾(支持icon和aplayer)