页面定制 CSS 代码
需要禁用博客园自带的页面定制 CSS 代码
@font-face { font-family: 'RainFate'; font-style: normal; font-weight: normal; src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); } * { margin: 0; padding: 0; } body { background: #eee; color: #444; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-shadow: 0 0 1px transparent; color:#505050; } @media screen and (max- 1260px) { body { margin: 0px; } } @media screen and (max- 600px) { body { font-size: 13px; } } h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} h1 {font-size: 1.8em;} h2 {font-size: 1.5em;} h3 {font-size: 1.3em;} a {text-decoration: none;color: #258fb8;} a:hover {text-decoration: underline;} #home{ margin: 0 auto; width: 85%; background-color: #fff; padding: 30px; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); border-radius: 20px; } #tbCommentBody {width: 100%;} #blogTitle {width:22%;margin-top: -10px;text-align: center;} .alignright {float: right;} .clearfix {zoom: 1;} .clearfix:before,.clearfix:after {content: "";display: table;} .clearfix:after {clear: both;} #header, #main, #footer {width: 100%;margin: 0 auto;} @media screen and (max- 1260px) { #main { width: 95%; } } #mainContent { width: 75%; float: left; margin-left: 10px; } @media screen and (max- 1260px) { #main-col { width: 100%; margin-right: -300px; } } @media screen and (max- 900px) { #main-col { margin-right: 0; float: none; } } @media screen and (max- 1260px) { #wrapper { margin-right: 300px; } } @media screen and (max- 900px) { #wrapper { margin-right: 0; } } #header { text-shadow: 0 0 1px #fff; margin: 20px auto 30px; position: relative; height: 60px; color: #999; } #header a { color: #999; } #header a:hover { color: #258fb8; text-decoration: none; } #header h1 { font-weight: normal; font-size: 30px; } #header h2 { font-weight: normal; font-size: 0.9em; margin-top: 10px; margin-left: 30px; } #header #navigator { font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; width: 100%; font-size: 16px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 50px; line-height: 50px; clear: both; margin-top: 25px; } #header #navigator ul { list-style: none; } #header #navigator ul li { float: left; width: 10%; text-align: center; margin-right: 15px; } #header .blogStats { float: right; font-size: 13px; } .topicListFooter { margin-top:30px; margin-bottom: 30px; margin-right: 0 !important; } .topicListFooter a { display: inline !important; padding: 10px 20px; background: #ddd; color: #999; font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; text-shadow: 0 0 1px #fff; border-radius: 5px; } .topicListFooter a:hover { background: #258fb8; color: #fff; text-decoration: none; text-shadow: none; } .topicListFooter .prev:before { content: 'f053'; padding-right: 10px; font-family: FontAwesome; } .topicListFooter .next:after { content: 'f054'; padding-left: 10px; font-family: FontAwesome; } article { -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; background: #fff; } article.page { padding-left: 20px; } article.page .icon { display: none; } .postIcon:before { content: 'f016'; } article.photo .icon:before { content: 'f030'; } article.link .icon:before { content: 'f0c1'; } article.link .title a:after { content: 'f08e'; color: #999; font: 12px FontAwesome; padding-left: 10px; vertical-align: super; } /******************************************以下自定义样式***********************************************/ #MySignature{ border-top: 2px solid #ccc; padding-top: 20px; } .pager{ border-bottom: 1px dashed #ddd; padding-bottom: 30px; margin-bottom: -30px; } #blog-calendar{ width:0px; height:0px; display: none !important; } #TopViewPostsBlock ul li{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: inline-block; height: 30px; line-height: 30px; } .day .dayTitle{ display: none !important; } //去掉广告 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{ display: none !important; } .postTitle, .entrylistPosttitle { font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.8em; padding: 20px 20px 15px 0px; background: #fff; border-radius: 10px 10px 0px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entrylistPostSummary, .postCon, .postBody { padding: 0 20px 15px 0px; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 0 2px 0 #ddd; background: #fff; position: relative; } .postDesc, .entrylistItemPostDesc { padding: 0px 20px 15px 0px; color: #999; font-size: 0.9em; line-height: 16px; position: relative; min-height: 16px; background: #fff; border-bottom: 1px dashed #ccc; } #blog-calendar { display: none; } @media screen and (max- 600px) { .postCon { padding-left: 0px; } } .postIcon { height: 0px; margin-right: 25px; position: relative; top: 25px; left: 25px; color: #258fb8; } @media screen and (max- 600px) { article header .icon { display: none; } } .postIcon:before { position: absolute; font: 32px FontAwesome; top: 0; left: 0; width: 32px; text-align: center; } article header time { color: #999; font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom: 5px; display: block; line-height: 1; } article header .title { font-weight: normal; } article header .title a { color: #444; } article header .title a:hover { color: #258fb8; text-decoration: none; } #cnblogs_post_body { text-align: justify; line-height: 1.6; } #cnblogs_post_body p, #cnblogs_post_body blockquote, #cnblogs_post_body ul, #cnblogs_post_body ol, #cnblogs_post_body dl, #cnblogs_post_body table, #cnblogs_post_body iframe, #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5, #cnblogs_post_body h6, #cnblogs_post_body .video-container { margin-top: 15px; } #cnblogs_post_body blockquote { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-style: italic; font-family: "Georgia", serif; font-size: 1.2em; padding: 0 30px 15px; } #cnblogs_post_body blockquote footer { border-top: none; font-size: 0.8em; line-height: 1; margin: 20px 0 0; padding-top: 0; } #cnblogs_post_body blockquote footer cite:before { content: '—'; color: #ccc; padding: 0 0.5em; } #cnblogs_post_body code, #cnblogs_post_body pre { font-family: Monaco, Menlo, Consolas, Courier New, monospace; } #cnblogs_post_body code { background: #eee; color: #666; padding: 0 5px; margin: 0 2px; font-size: 0.9em; border: 1px solid #ddd; -webkit-border-radius: 3px; border-radius: 3px; } #cnblogs_post_body pre { overflow: auto; padding: 7px 15px; -webkit-border-radius: 2px; border-radius: 2px; } #cnblogs_post_body pre code { background: none; padding: 0; margin: 0; border: none; -webkit-border-radius: 0; border-radius: 0; } #cnblogs_post_body ul ul, #cnblogs_post_body ol ul, #cnblogs_post_body dl ul, #cnblogs_post_body ul ol, #cnblogs_post_body ol ol, #cnblogs_post_body dl ol, #cnblogs_post_body ul dl, #cnblogs_post_body ol dl, #cnblogs_post_body dl dl { margin-top: 0; } #cnblogs_post_body h1, #cnblogs_post_body h2 { font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 20px; } #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5, #cnblogs_post_body h6 { font-weight: normal; background: #eee; border-radius: 6px; color: Red; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; height: 25px; line-height: 25px; margin: 18px 5px !important; padding: 8px; opacity: 0.8; border: 1px dashed #aaa; } .postBody img, .entrylistPostSummary img, .postCon img, .postBody video { max-width: 100%; height: auto; border: none; } #cnblogs_post_body iframe { border: none; } #cnblogs_post_body .caption { display: block; margin-top: 5px; color: #999; position: relative; font-size: 0.9em; padding-left: 25px; } #cnblogs_post_body .caption:before { content: 'f040'; position: absolute; font: 1.3em FontAwesome; position: absolute; left: 0; top: 3px; } #cnblogs_post_body .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } #cnblogs_post_body .video-container iframe, #cnblogs_post_body .video-container object, #cnblogs_post_body .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; } #cnblogs_post_body .pullquote { float: right; border: none; padding: 0; margin: 1em 0 0.5em 1.5em; text-align: left; width: 45%; font-size: 1.5em; } #blog-comments-placeholder, #comment_form { padding: 20px; background: #fff; -webkit-box-shadow: 1px 10px 10px #ddd; box-shadow: 10px 10px 10px #ddd; margin-bottom: 50px; border: 1px solid #ccc; padding-top:0; } .feedback_area_title { margin-bottom: 15px; font-size: 1.8em; } .feedbackItem { border-bottom: 1px dashed #CCC; margin-bottom: 10px; padding: 5px; } .color_shine {background: rgb(226, 242, 255);} .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} #comment_form .title { font-weight: normal; margin-bottom: 15px; } #ad_under_post_holder { display: none; } .entrylistTitle { color: #999; font-weight: normal; margin-bottom: 30px; text-shadow: 0 0 1px #fff; } .entrylistTitle:before { font-family: FontAwesome; content: 'f07b'; padding-right: 15px; } .archive { -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; border-bottom: 1px solid #ddd; margin-bottom: 50px; } .archive article { -webkit-box-shadow: none; box-shadow: none; } .archive article .post-content { margin-bottom: 0; } #sideBar{ width: 22%; line-height: 1.8em; float: right; } @media screen and (max- 900px) { #sideBar { float: none; width: 100%; } } .catListLink, .catListMyTeams, .catListComment, .catListFeedback { display: none; } .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank { background: #fff; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 10px 10px 10px #ddd; margin-bottom: 30px; word-wrap: break-word; border-radius: 10px; margin-top: 10px; border: 1px solid #ddd; } #blog-sidecolumn h3, .newsItem h3 { padding: 15px 20px; font-size: 1em; border-bottom: 1px solid #ddd; font-weight: normal; } #blog-sidecolumn ul, .newsItem #blog-news { font-size: 0.9em; padding: 15px 20px; } #blog-sidecolumn ul, #blog-sidecolumn ol, #blog-sidecolumn dl { list-style: none; } #blog-sidecolumn ul ul, #blog-sidecolumn ol ul, #blog-sidecolumn dl ul, #blog-sidecolumn ul ol, #blog-sidecolumn ol ol, #blog-sidecolumn dl ol, #blog-sidecolumn ul dl, #blog-sidecolumn ol dl, #blog-sidecolumn dl dl { list-style: disc; margin-left: 20px; } #q { background: #fff; font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; font-style: italic; font-size: 1em; padding: 10px 15px; border: 1px solid #ddd; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #999; height: 100%; } #q:focus { color: #444; } /*隐藏搜索框中的无用组件*/ .mySearch { display: none; } #sideBar .tag small { margin-left: 15px; color: #999; } #sideBar .tag small:before { content: '('; } #sideBar .tag small:after { content: ')'; } #sideBar .twitter li { border-bottom: 1px solid #ddd; padding: 15px 20px; font-size: 0.9em; } #sideBar .twitter li:last-of-type { border-bottom: none; } #sideBar .twitter small { display: block; margin-top: 10px; color: #999; line-height: 1; } #sideBar .tagcloud .entry { padding-right: 5px; } #sideBar .tagcloud a { margin-right: 10px; display: inline-block; } #footer { color: #999; margin-bottom: 50px; font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; text-shadow: 0 0 1px #fff; text-align:center; margin: 30px 0px 50px; } .entry .gist { background: #eee; border: 1px solid #ddd; margin-top: 15px; padding: 7px 15px; -webkit-border-radius: 2px; border-radius: 2px; text-shadow: 0 0 1px #fff; line-height: 1.6; overflow: auto; color: #666; } .entry .gist .gist-file { border: none; font-family: inherit; margin: 0; font-size: 0.9em; } .entry .gist .gist-file .gist-data { background: none; border-bottom: none; } .entry .gist .gist-file .gist-data pre { padding: 0 !important; font-family: Monaco, Menlo, Consolas, Courier New, monospace; } .entry .gist .gist-file .gist-meta { background: none; color: #999; margin-top: 5px; padding: 0; text-shadow: 0 0 1px #fff; font-size: 100%; } .entry .gist .gist-file .gist-meta a { color: #258fb8; } .entry .gist .gist-file .gist-meta a:visited { color: #258fb8; } figure.highlight { background: #eee; border: 1px solid #ddd; margin-top: 15px; padding: 7px 15px; -webkit-border-radius: 2px; border-radius: 2px; text-shadow: 0 0 1px #fff; line-height: 1.6; overflow: auto; position: relative; font-size: 0.9em; } figure.highlight figcaption { color: #999; margin-bottom: 5px; text-shadow: 0 0 1px #fff; } figure.highlight figcaption a { position: absolute; right: 15px; } figure.highlight pre { border: none; padding: 0; margin: 0; } figure.highlight table { margin-top: 0; border-spacing: 0; } figure.highlight .gutter { color: #999; padding: 7px 10px 7px 5px !important; border-right: 1px solid #ddd; text-align: right; } figure.highlight .code { padding: 7px 7px 7px 10px !important; border-left: 1px solid #fff; color: #666; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #93a1a1; font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #2aa198; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl, pre .literal, pre .id { color: #268bd2; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #b58900; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title { color: #cb4b16; } pre .deletion { color: #dc322f; } .feedbackListSubtitle { position: relative;} .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;} #cnblogs_post_body {overflow: hidden;} #cnblogs_post_body ol { padding-left: 40px;} #cnblogs_post_body ul { margin-left: 35px;} .fixedReadRank { position: fixed; top: 20px; width: 270px; } .fixedRecRank { position: fixed; top: 360px; width: 270px; } figure.highlight { margin-top: 0; padding: 0;} figure table {width: 100%; margin: 0 !important;} #cnblogs_post_body pre { padding: 0; } #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; } /*评论标题*/ .feedback_area_title { padding:10px; font-size:24px; font-weight:bold; color:#aaa; border-bottom:1px dashed #ccc; } .feedbackListSubtitle { font-size:12px; color:#888; } .feedbackListSubtitle a { color:#888; } .comment_quote { background:#eee; padding:15px; border:1px dashed #aaa; border-radius:5px; }#commentform_title { color:#aaa; background-image:none; background-repeat:no-repeat; margin-bottom:10px; padding:10px 20px 10px 10px; font-size:24px; font-weight:bold; border-bottom:1px dashed #ccc; } /*评论框*/ #comment_form { margin:10px 0; padding:25px; border-radius: 10px; height: 343px; overflow: hidden; margin-top: 50px; } #blog-comments-placeholder { display: none; } .commentform { margin:10px 0; padding:10px 20px; background:#fff; } /*评论输入域*/ #tbCommentBody { font-family:'MIcrosoft Yahei'; margin-top:10px; background:white; color:#333; border:2px solid #fff; box-shadow:inset 0 0 8px #aaa; height:120px; font-size:14px; min-height:120px; border-radius: 10px; } /*评论条目*/ .feedbackItem { font-size:14px; line-height:24px; margin:10px 0; padding:20px; } .feedbackListSubtitle { font-weight:normal; } /*green_channel*/ #green_channel { text:align:right; padding-left:0px; font-weight:normal; font-size:13px; width:100%; border:1px dashed #ccc; color:#fff; border-radius:4px; margin:5px auto; } @media screen and (max- 768px) { body { font-size: 13px; } #main{padding:0px !important;} #mainContent{width: 96%;float: left;margin: 0px 2%;} #sideBar {display: none;} #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;} #header{height:auto !important;margin: 20px auto 5px;} #header #navigator{width: 100%;text-align: center;float:none;} #header #navigator ul{width: 100%;margin-left: 6%;} #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;} .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;} .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;} #green_channel{padding:0px !important;} #blog_stats{display: none;} } #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;} #div_digg{ padding: 5px; border-radius: 5px; position: fixed; left: 0; bottom: 80px; width:80px; z-index:100; } .diggit{ background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat; width: 60px; height: 60px; } #div_digg .diggnum{ position: absolute; bottom: -20px; left: 6px; background: #D0D0D0; padding: 2px 0; display: block; color: #555; font-size: 12px; text-align: center; width: 60px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } .buryit{ display: none; } div.commentform textarea.comment_textarea{ padding:10px; } #tbCommentBody{ 98%; } /*scroll to top*/ #scrollTop div{ left:0; overflow:hidden; position:absolute; top:0; width:149px; margin:0; padding:0 } #scrollTop .level-2{ background:url(https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220141435894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; display:none; height:250px; opacity:0; z-index:1 } #scrollTop .level-3{ background:none repeat scroll 0 0 transparent; cursor:pointer; display:block; height:150px; z-index:2 } #scrollTop{ background:url(https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220141435894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; cursor:default; display:block; height:250px; overflow:hidden; position:fixed; right:0; top:80%; width:149px; z-index:11; margin:-125px 0 0; padding:0 } /*评论带头像,且支持旋转*/ .feedbackCon img:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } .feedbackCon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .cnblogs_code { background-color: #f2f4f5; padding-left: 1em; padding-right: 1em; border: none!important; border-radius: 3px!important; font-family: Lucida Console,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace!important } .cnblogs_code div { background-color: transparent; color: #656c73 } .cnblogs_code img { margin: 0!important } .cnblogs_code pre { color: #656c73; font-family: inherit!important } .cnblogs_code pre span { font-family: inherit!important; color: inherit!important } .cnblogs_code textarea { font-family: inherit!important; padding: 5px; border: 1px solid #3e4c42; color: #c5d4ef; background-color: #282c34 } .cnblogs_code textarea:focus { outline: 0 } .cnblogs_code .code_img_closed,.cnblogs_code .code_img_opened { display: none!important } .cnblogs_code .cnblogs_code_toolbar { width: 20px } .cnblogs_code .cnblogs_code_toolbar span { padding-right: 0 } .cnblogs_code .cnblogs_code_toolbar a:link img { background-color: transparent!important } .cnblogs_code .cnblogs_code_collapse { color: #656c73; border: 1px solid #989fa6; border-radius: 2px; background-color: transparent; display: inline-block; cursor: pointer; padding: 5px 5px 2px 5px } /*以下锚点*/ #sideToolbar { position: fixed; bottom: -12px; right: 25px; width: 250px; height: 440px } #sideCatalog{ background-color:#fff; padding-bottom:10px; border-radius:5px; } #sideCatalog-sidebar { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #eaeaea; border-color: -moz-use-text-color #eaeaea; border-image: none; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-style: none solid; border-width: 0 1px; height: 353px; left: 5px; position: absolute; top: 0; width: 0 } #sideCatalog-catalog { height: 325px; padding-top: 18px; overflow-x: hidden; overflow-y: scroll; padding-left: 23px; position: relative } #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top { cursor: pointer; top: 0 } #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom { bottom: 0 } #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll 0 -199px transparent; height: 10px; left: -5px; overflow: hidden; position: absolute; width: 10px } #sideCatalog li { margin: 0px; padding: 4px 7px; text-align: left; position: relative } #sideCatalog li: hover { background-color: #f5f5f5 } #sideCatalog-catalog ul .active { background-color: #f5f5f5 } #sideCatalog-catalog .active a { color: #519cea } #sideCatalog-catalog a: hover { color: #519cea } #sideCatalog span: first-child { color: #999; font-family: Arial; font-size: 14px; font-weight: bold; padding-right: 5px } #sideCatalog li.h2Offset { padding-left: 45px; text-indent: -25px } #sideCatalog li.h3Offset { padding-left: 90px; text-indent: -50px } #sideCatalog a { text-decoration: none; color: #555; font-weight: bold } .sideCatalog-dot { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") repeat scroll 0 -222px transparent; cursor: pointer; font-size: 12px; height: 10px; left: -10px; line-height: 12px; overflow: hidden; position: absolute; top: 10px; width: 6px } #sideCatalog .highlight .sideCatalog-dot { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -271px -38px transparent; height: 13px; left: -23px; top: 3px; width: 18px } #sideCatalogBtn { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll 0 0 transparent; cursor: pointer; display: block; height: 45px; margin-bottom: 5px; margin-left: 5px; position: relative; width: 45px; margin-top: 10px; outline: 0 } #sideCatalogBtn:hover { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -154px 0 transparent; } #sideToolbar-up { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent; border-radius: 2px; display: block; height: 45px; margin-left: 5px; width: 45px; outline: 0 } #sideToolbar-up:hover { background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent } #div_digg{ z-index: 999; } /*以上是锚点*/ /*以下是返回顶部*/ #gotop{ background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent !important; width: 45px; height: 45px; overflow: hidden; position: fixed; right: 166px; bottom: 20px; cursor: pointer; display:none; z-index: 999; } #gotop:hover{ background: url("https://images.cnblogs.com/cnblogs_com/RainFate/1617787/o_191220133515o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent !important; } /*以下是返回顶部*/
博客侧边栏公告(支持HTML代码)
<script type="text/javascript"> //以下是锚点JS var a = $(document); a.ready(function() { var b = $('body'), d = 'sideToolbar', e = 'sideCatalog', f = 'sideCatalog-catalog', g = 'sideCatalogBtn', h = 'sideToolbar-up', i = '<div id="sideToolbar"style="display:none;"><div class="sideCatalogBg"id="sideCatalog"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-catalog"><ul class="nav"style="225px;zoom:1;list-style-type: none;"></ul></div></div><a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a></div>', j = '', k = 200, l = 0, m = 0, n = 0, //限制存在个数,如数量过多,则只显示h2,不显示h3 //o, p = 13, o, p = 100, q = true, r = true, s = b; if(s.length === 0) { return }; b.append(i); //指定获取目录的范围-------------这一点非常重要,因为每个人指定的范围都不一样,所以这是要修改的地方 //o = s.find(':header'); o = $('#cnblogs_post_body').find(':header') if(o.length > p) { r = false; var t = s.find('h2'); var u = s.find('h3'); if(t.length + u.length > p) { q = false } }; j += '<li><span style="font-size: 14pt;">★本文目录</span></li>'; o.each(function(t) { var u = $(this), v = u[0]; var title = u.text(); var text = u.text(); u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //if (!u.attr('id')) { // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //}; if(v.localName === 'h2') { l++; m = 0; if(text.length > 14) text = text.substr(0, 20) + "..."; j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; } else if(v.localName === 'h3') { m++; n = 0; if(q) { if(text.length > 12) text = text.substr(0, 16) + "..."; j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; } } else if(v.localName === 'h4') { n++; if(r) { j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; } } }); $('#' + f + '>ul').html(j); b.data('spy', 'scroll'); b.data('target', '.sideCatalogBg'); $('body').scrollspy({ target: '.sideCatalogBg' }); $sideCatelog = $('#' + e); $('#' + g).on('click', function() { if($(this).hasClass('sideCatalogBtnDisable')) { $sideCatelog.css('visibility', 'hidden') } else { $sideCatelog.css('visibility', 'visible') }; $(this).toggleClass('sideCatalogBtnDisable') }); $('#' + h).on('click', function() { $("html,body").animate({ scrollTop: 0 }, 500) }); $sideToolbar = $('#' + d); //通过判断评论框是否存在显示索引目录 var commentDiv = $("#blog-comments-placeholder"); a.on('scroll', function() { //评论框存在才调用方法 if(commentDiv.length > 0) { var t = a.scrollTop(); if(t > k) { $sideToolbar.css('display', 'block'); $('#gotop').show() } else { $sideToolbar.css('display', 'none') $('#gotop').hide() } } }) }); //以上是锚点JS //以下是返回顶部JS $(function() { $('body').append('<div id="gotop" onclick="goTop();"></div>'); }); function goTop(u, t, r) { var scrollActivate = !0; if(scrollActivate) { u = u || 0.1; t = t || 16; var s = 0, q = 0, o = 0, p = 0, n = 0, j = 0; document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); n = window.scrollX || 0; j = window.scrollY || 0; s = Math.max(s, Math.max(o, n)); q = Math.max(q, Math.max(p, j)); p = 1 + u; window.scrollTo(Math.floor(s / p), Math.floor(q / p)); if (0 < s || 0 < q) window.setTimeout('goTop(' + u + ', ' + t + ')', t); else 'undefined' != typeof r && r(); } else { scrollActivate = !0 } } //以上是返回顶部JS </script>
页脚 HTML 代码
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script language="javascript" type="text/javascript"> //生成目录索引列表 function GenerateContentList() { var mainContent = $('#cnblogs_post_body'); var h2_list = $('#cnblogs_post_body h2'); //如果你的章节标题不是h2,只需要将这里的h2换掉即可 if (mainContent.length < 1) return; if (h2_list.length > 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory"'; content += '<p style="font-size:18px;"><b>阅读目录</b></p>'; content += '<ul>'; for (var i = 0; i < h2_list.length; i++) { var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>'; $(h2_list[i]).before(go_to_top); var h3_list = $("h3"); var li3_content = ''; for (var j = 0; j < h3_list.length; j++) { var tmp = $(h3_list[j]).prevAll('h2').first(); var tmp2 = $(h3_list[j]).parent().prevAll('h2').first(); if (tmp.length > 0 ? tmp[0] == h2_list[i] : false || tmp2.length > 0 ? tmp2[0] == h2_list[i] : false) if (tmp[0] == h2_list[i] || tmp2[0] == h2_list[i]) { var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; $(h3_list[j]).before(li3_anchor); li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; } } var li2_content = ''; if (li3_content.length > 0) li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; else li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; content += li2_content; } content += '</ul>'; content += '</div><p> </p>'; content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>'; if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content); } } } GenerateContentList(); </script>
显示结果如下