部落格園主題記錄
阿新 • • 發佈:2022-04-04
今天有人評論我才發現,之前的主題評論時不支援數學公式,一直嫌麻煩沒有更換主題,現在鐵了心要換了,在這裡記錄一下之前的主題!
頁面定製CSS程式碼
點選檢視程式碼
/*返回頂部*/ #back-to-top { background-color: #ffffff; color:#000000; bottom: 3px; box-shadow: 0 0 6px ; padding: 5px 5px; position: fixed; right: 0.4px; border-radius: 4px; font-weight: bold; opacity: 0.85; } /*適應手機端*/ @media screen and (max-width: 768px){ #main, #mainContent{ width: 100%; } #sideBar, body > a, #navList, #navigator, .postDesc a, #homepage_top_pager{ display: none; } #blogTitle a{ font-size: 30px; } #blogTitle h2{ font-size: 16px; } #header{ height: 180px; } #home{ background-image: none; } .postTitle a{ font-size: 22px; } .postCon, .postCon a{ font-size: 16px; } .day{ margin: 0 2%; } .postCon a{ padding-left: 0; } .postDesc{ width: 100%; font-size: 12px; } #home{ background-color: #68BCCA; } #mainContent .forFlow{ margin: 4px 0 0 0; } .postBody{ } #blogTitle{ left: 0; } #mainContent .postBody{ width: 100%; } .post{ padding: 0 4%; } .topicListFooter{ width: 100%; text-align: center; padding: 0; height: 40px; } .topicListFooter a:link{ font-size: 12px; } } /*去廣告*/ .c_ad_block { display: none !important; } #commentform_title{ display: none !important; } #ad_t2{ display: none !important; } .itnews{ display: none !important; } .recomm-block{ display: none !important; } .under-post-card{ display: none !important; } @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("//blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); } * { margin: 0; padding: 0; } /*背景圖片 */ body { background: #eee; background: url(https://source.unsplash.com/1600x900) fixed; background-size: cover; background-repeat: no-repeat; font-weight: bold; color: #330099; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-shadow: 0 0 1px transparent; color:#330000; opacity:0.85 } @media screen and (max-width: 1260px) { body { margin: 0px; } } @media screen and (max-width: 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:#330099;} 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;} #header, #main, #footer {width: 100%;margin: 0 auto;} @media screen and (max-width: 1260px) { #main { width: 96%; } } #mainContent { width: 75%; float: left; margin-left: 10px; } @media screen and (max-width: 1260px) { #main-col { width: 100%; margin-right: -300px; } } @media screen and (max-width: 900px) { #main-col { margin-right: 0; float: none; } } @media screen and (max-width: 1260px) { #wrapper { margin-right: 300px; } } @media screen and (max-width: 900px) { #wrapper { margin-right: 0; } } #header { text-shadow: 0 0 1px #fff; margin: 10px auto 30px; position: relative; height: 60px; color: #999; } #header a { color: #000000; } #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,#cnblogs_c2,#HistoryToday,#sideBar,#under-post-card,#tnews,under-post-card,bannerbar,#bannerbar-mobile formobile,bannerbar-mobile formobile,#bannerbar,#bannerbar img{ 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-width: 600px) { .postCon { padding-left: 0px; } } .postIcon { height: 0px; margin-right: 25px; position: relative; top: 25px; left: 25px; color: #258fb8; } @media screen and (max-width: 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 { background: #eee; 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 { font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 20px; } #cnblogs_post_body h2, #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; min-height: 25px; line-height: 25px; margin: 18px 5px !important; padding: 8px; opacity: 0.8; border: 1px dashed #aaa; } #cnblogs_post_body h4{padding-left:20px !important;color:Green !important;} .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-width: 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: oblique; 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; } #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; } background: #eee; border: 1px solid #ddd; .entry .gist { 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; } .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;} .cnblogs_code_toolbar {display: none;} #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; } .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;} .cnblogs_code th {border: 1px solid silver; padding: 3px;} .cnblogs_code { 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; } .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; padding-top:5px; } .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-width: 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(//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{ width:98%; } #cnblogs_post_body h3:hover { color: green; font-size: large; font-weight: bold; } /*scroll to top*/ #scrollTop div{ left:0; overflow:hidden; position:absolute; top:0; width:149px; margin:0; padding:0 } #scrollTop .level-2{ background:url(//images2015.cnblogs.com/blog/894443/201707/894443-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(//images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; cursor:default; display:block; height:180px; overflow:hidden; position:fixed; right:0; bottom:0; 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; } /*CNZZ樣式*/ #cnzz_stat_icon_1264405927{ display: block; margin: 10px auto; width: 200px; text-align: center; } /*打賞外掛*/ /** * update 20150907 * **/ .myRewards {position:fixed; _position:absolute; right:0; top:10%; z-index:10000; padding-left:34px; width:0px; overflow:hidden; box-sizing: content-box;} .myRewards ul,.myRewards li{margin:0;padding:0;} .myRewards img{ border:0; display:block;} .myRewards a{ color:#000; text-decoration:none; outline:0 none;} .myRewards-main{ width:240px; height:332px; font:12px/1.5 "microsoft yahei",tahoma,arial,sans-serif;; color:#000; background-color:#fff; border:1px solid #dbdbdb; border-right:none;} .btn-myRewards{ position:absolute; left:0; top:50%; margin-top:-46px; width:34px; height:93px;} .myR-h,.myR-bot{ margin:0; height:26px; line-height:26px; background-color:#e7e7e7;} .myRewards-main .myR-h{ padding:0 0 0 6px; font-size:14px; font-weight:normal; background-image:none;} .myRewards-main .myR-bot{ padding-right:6px; font-size:12px; text-align:right;} .myR-bot a:hover{ text-decoration:underline;} .myRewardsbox{ font-size:0; background-color:#eeeeee; width:240px;} .myRewards-list{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle; width:90px; font-size:12px;} .myRewards-list ul{ list-style:none;} .myRewards-list ul.not-full{border-top:1px solid #dfdfdf;} .myRewards-list li{ display:block; height:56px; -webkit-transition:background-color .2s linear; transition:background-color .2s linear;} .myRewards-list a{ position:relative; display:block; padding-left:40px; height:55px; line-height:55px; font-size:12px; border-bottom:1px solid #cccccc;} .myRewards-list a.fifth{border-bottom: none;} .myRewards-list a img{ position:absolute; left:6px; top:13px; width:30px; height:30px;} .myRewards-list .myR-on{ border-right:none;} .myRewards-list .myR-on a, .myRewards-list .myR-on a:hover{ background-color:#fff;} .myRewards-detail{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle; width:150px; height:280px; font-size:12px; background-color:#fff;} .myRewards-ubox{ padding:14px 0 0 10px;} .myRewards-code-tit{ margin:0 0 20px; width:132px; height:30px; line-height:30px; font-size:12px; text-align:center; background:url(../img/tab_pay.jpg) no-repeat;} .myRewards-code{ margin:0 0 20px; padding:12px; width:106px; height:106px; background:url(../img/border.jpg) no-repeat; box-sizing: content-box;} .myRewards-code img{ width:106px; height:106px;} .i-myRewards{ position:absolute; right:6px; top:16px; width:23px; height:23px; line-height:23px; font-size:14px; color:#44b973; text-align:center; background:url(../img/tab_shang.png) no-repeat;} .myRewards-account{ font-size:12px; word-break:break-all; text-align:center;} /* 評論開始 */ /* 使用者頭像 */ .blog_comment_body > img.user-avatar { position: absolute; left: -72px; top: 0px; width: 48px; height: 48px; } .myself .blog_comment_body > img.user-avatar { left: initial; right: -72px; } #blog-comments-placeholder { border: solid 1px #CCC; border-radius: 5px; } div#comments_pager_top { display: none; } #blog-comments-placeholder > br { display: none; } /* 評論列表 */ .feedbackManage { width: 130px; display: none; position: absolute; right: 150px; top: 6px; } .feedbackItem:hover .feedbackManage { display: block; } /* 所有評論裡面的A標籤 */ .feedbackItem a { color: #989898 !important; transition: all .2s; } .feedbackItem a:hover { color: #FF661C !important; text-decoration: underline; } /* 評論分割線 */ .feedbackCon { background: none; clear: both; margin: 10px 0 0 30px; } /* 樓層 */ .feedbackListSubtitle a.layer { background: #B2E866; color: #414141 !important; padding: 2px 4px; border-radius: 2px; margin-right: 4px; /*display: none;*/ } /* 評論人 */ .feedbackListSubtitle a[target="_blank"] { color: #FF6969 !important; } /* 評論時間 */ .feedbackItem .comment_date { color: #BCBCBC; margin-right: 4px; } /* 樓主顏色 */ .feedbackListSubtitle { color: #0AB300; } /* 支援與反對 */ .comment_vote { float: right; margin-top: -34px; display: none; } /* 滑鼠經過時顯示支援與反對 */ .feedbackItem:hover .comment_vote { display: block; } /* 評論內容顏色 */ .feedbackItem { color: #464646; position: relative; } /* 評論背景色 */ .blog_comment_body { background: #c9e4cb; float: left; padding: 14px 10px; border-radius: 5px; position: relative; overflow: visible; margin-left: 33px; max-width: 550px; } /* 評論三角形 */ .blog_comment_body:before { content: ''; display: block; position: absolute; left: -17px; top: 9px; width: 0; height: 0; border-right: solid 18px #B2E866; border-top: solid 6px rgba(0, 0, 0, 0); border-bottom: solid 10px rgba(0, 0, 0, 0); } /* 評論頭像 */ .blog_comment_body:after { content: attr(data-louceng); display: none; width: 48px; height: 48px; position: absolute; left: -72px; top: 0px; text-align: center; line-height: 48px; font-size: 18px; color: #FFF; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42); font-family: 'Microsoft Yahei'; background: linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%); background: -o-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%); background: -ms-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%); background: -moz-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%); background: -webkit-linear-gradient(top , #74DA2D 12% , #87FF4B 35% , #47B31C 86%); background-size: contain; } /* 清除浮動 */ .feedbackCon:after { content: ''; display: block; clear: both; } /* 引用邊框 */ .comment_quote { border: 1px solid #63921F; border-radius: 3px; } /* 隱藏小圖示 */ .feedbackItem .sendMsg2This { display: none; } /* 樓主自己的樣式 */ .myself .blog_comment_body { float: right; margin-right: 72px; background: #98DDFF; } .myself .blog_comment_body:before { right: -17px; left: initial; border-left: solid 18px #98DDFF; border-right: none; } .myself .blog_comment_body:after { content: ''; display: none; width: 48px; height: 48px; background-image: url(//pic.cnblogs.com/avatar/352797/20160108090502.png) !important; background-size: contain; position: absolute; right: -72px; top: 0px; left: initial; } .myself .feedbackCon{ margin: 10px 0 0 0px; } .myself .comment_vote { float: left; margin-left: -40px; } .myself .comment_quote { border: 1px solid #4491B7; } .myself .feedbackListSubtitle { float: right; margin-right: 10px; margin-bottom: 10px; } .myself .feedbackListSubtitle a.layer { display: inline-block; } .myself .feedbackManage { left: 66px; right: initial; top: 8px; } /* 評論結束 */ .clearfix {zoom: 1;} .clearfix:before,.clearfix:after {content: "";display: table;} .clearfix:after {clear: both;} /*好看的滾動條*/ ::-webkit-scrollbar{ width:10px!important; height:10px!important; -webkit-appearance:none; } ::-webkit-scrollbar-thumb{ height:5px;border:1px solid transparent; border-top:none;border-bottom:none; -webkit-border-radius:6px; background-color:rgba(0,0,0,.3); background-clip:padding-box; } /* 定製公告欄時鐘位置 */ #clockdiv { /* left, center, right */ text-align: center; } /*生成部落格目錄的CSS*/ #uprightsideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*將div的位置固定到距離top:100px,right:0px的位置,這樣div就會處在最右邊的位置,距離頂部100px*/ top:50px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:#ffffff; } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:210px; min-height:108px; max-height:500px; border:1px solid #e5e5e5; border-right:none; background-color: #330000; color:#FFFFFF; } #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:#006699; } #sideBarContents dd{ margin-left:20px; }
部落格側邊公告
點選檢視程式碼
<div id="clockdiv"> <a href="https://www.cnblogs.com/pam-sh/"> <img id="preview_large" alt="" src="https://images.cnblogs.com/cnblogs_com/pam-sh/1845945/o_200911170904mmexport1516036776089.gif" class="preview-image" style="" width="120" height="100"/> </a><br> <a href="https://hang-shao.github.io/ReadMe//" target="_blank">Pam</a><br> </div>
頁首HTML
點選檢視程式碼
<a href="https://github.com/Hang-shao" class="github-corner" aria-label="View source on GitHub"> <svg width="50" height="50" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> </svg></a> <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}} </style> <script> var content = 'width=device-width, initial-scale=1 user-scalable=no'; var viewport = document.createElement('meta'); viewport.setAttribute('name', 'viewport'); viewport.setAttribute('content', content); document.head.appendChild( viewport ); </script> <script src="http://latex.codecogs.com/latex.js" type="text/javascript"></script> <span id="back-to-top"><a href="#top">返回頂部</a></span> <span id="top"></span> <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/bopo/maodian.css"> <script type="text/javascript"> /* 功能:生成部落格目錄的JS工具 測試:IE8,火狐,google測試通過 */ 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, 0); }, 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 和rt 分別表示主標題、次級標題和次次標題 的標籤名稱(如 H2、H3,H4 大寫或小寫都可以!), 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","h4",0); } </script>
頁尾HTML
點選檢視程式碼
<!-- 百度統計訪問量 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?afa6227b2a48bc1f2a88277912acb326";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- lightbox的樣式 -->
<link href="https://blog-static.cnblogs.com/files/pam-sh/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心程式碼 -->
<script src="https://blog-static.cnblogs.com/files/pam-sh/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
<script type='text/javascript'>$(".code_img_closed").unwrap();</script>
<script type='text/javascript'>$(".code_img_opened").unwrap();</script>
<script type = 'text/javascript' >
<!-- 目錄索引列表生成 -->
// by hsz
// 親測,設定標題1為第一層目錄不生效
function GenerateContentList()
{
if ($('#cnblogs_post_body').length == 0) { return; }
var jquery_h2_list = $('#cnblogs_post_body h2');
var jquery_h3_list = $('#cnblogs_post_body h3');
var jquery_h4_list = $('#cnblogs_post_body h4');
if (jquery_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 class="first_class_ul">';
for (var i = 0; i < jquery_h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a name="_label' + i + '"></a></div>';
$(jquery_h2_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
var nexth2Index = i + 1;
if (nexth2Index == jquery_h2_list.length) { nexth2Index = 0; }
var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[nexth2Index], "h3");
if (jquery_h3_list.length > 0)
{
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h3_list.length; j++)
{
var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h3_list[j]).before(go_to_top2);
li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
var nexth3Index = j + 1;
var next;
if (nexth3Index == jquery_h3_list.length)
{
if (i + 1 == jquery_h2_list.length)
{
next = jquery_h2_list[0];
}
else
{
next = jquery_h2_list[i + 1];
}
}
else
{
next = jquery_h3_list[nexth3Index];
}
var jquery_h4_list = $(jquery_h3_list[j]).nextUntil(next, "h4");
if (jquery_h4_list.length > 0)
{
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h4_list.length; k++)
{
var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h4_list[k]).before(go_to_third_Content);
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h4_list[k]).text() + '</a></li>';
}
if (jquery_h4_list.length > 0)
{
li_content += '</ul>';
}
li_content += '</li>';
}
if (jquery_h3_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_h3_list.length != 0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目錄</b></p>';
content += '<ul class="second_class_ul">';
for(var i =0; i < jquery_h3_list.length; i++)
{
var go_to_top2 = '<div style="text-align: right">a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h3_list[j]).before(go_to_top2);
var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
var nexth2Index = i + 1;
if (nexth2Index == jquery_h3_list.length) { nexth2Index = 0; }
var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h4");
if(jquery_h4_list.length>0)
{
li_content +='<ul class="third_class_ul">';
}
for(var j = 0;j < jquery_h4_list.length;j++)
{
var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h4_list[k]).before(go_to_third_Content);
li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h4_list[j]).text() + '</a></li>';
}
if(jquery_h4_list.length>0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else if (jquery_h4_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 < jquery_h4_list.length; i++)
{
var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h4_list[k]).before(go_to_third_Content);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h4_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
}
else
{
return;
}
$($('#cnblogs_post_body')[0]).prepend(content);
}
GenerateContentList();
</script>