定制个人博客页面

Posted zwq20134

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定制个人博客页面相关的知识,希望对你有一定的参考价值。

全局CSS

@font-face
font-family: ‘FontAwesome‘;
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: #BEE7E9;
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-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: brown;

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:100%;
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: 95%;


#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: 20px auto 30px;
position: relative;
height: 60px;
color: black;

#header a
color: #999;

#header a:hover
color: #258fb8;
text-decoration: none;

#header h1
font-weight: normal;
font-family :STXingkai;
font-size: 50px;
color: brown;


#header h1 a
color:#007FFF

 


#header h2
font-weight: normal;
font-size: 0.9em;
margin-top: 10px;
margin-left: 30px;
font-family: "楷体","楷体_GB2312";

#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: -10px;

#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-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,
#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;
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: 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;

.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;
height: 343px;
overflow: hidden;

.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.commentform textarea.comment_textarea
padding: 10px;

#tbCommentBody
width:98%;

#cnblogs_post_body h3:hover
color: green;
font-size: large;
font-weight: bold;

/* 文章title自定义带动画样式 */
.postTitle
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
clear: both;
background-color: #FBF9F9;
margin-bottom: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 20px;
border-left: 3px solid #21759b;
padding-left: 20px;
font-size: 20px;
border-radius:0px;

.postTitle a:hover
text-decoration: none;
margin-left: 20px;
color: #E00000;

.postTitle a:link,
.postTitle a:visited,
.postTitle a:active
transition: all 0.4s linear 0s;

/*scroll to top*/
#scrollTop div
left:0;
overflow:hidden;
position:absolute;
top:0;
width:149px;
margin:0;
padding:0

#scrollTop .level-2
background:url(http://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(http://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;
top:90%;
width:149px;
z-index:11;
margin:-125px 0 0;
padding:0

/*目录样式*/
#sideCatalog a
font-size:12px;
font-weight:normal !important;

/*好看的滚动条*/
::-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;

.git-link
z-index: 100;
position: fixed;
top: 0;
right: 0;
border: 0;
height: 149px;
width: 149px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
background-image: url(//images2015.cnblogs.com/blog/459873/201603/459873-20160317090540131-1089895320.png);

#back-to-top
background-color: #8bcc99;
bottom: 10px;
box-shadow: 0 0 6px #72a072;
padding: 5px 10px;
position: fixed;
right: 50px;
border-radius: 8px;
opacity: 0.7;

/* 定制公告栏时钟位置 */
#clockdiv
text-align: center;

/* 定制公告栏音乐位置 */
#musicdiv
text-align: center;

/*
代码高亮开始,使用了一个叫Monokai Sublime的黑色主题皮肤,直接拿过来还不行,有一些样式冲突,还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre
/*控制代码不换行*/
white-space: pre;
word-wrap: normal;

.cnblogs-markdown .hljs
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
color: #FFF;
white-space: pre;
word-break: normal;

.hljs,
.hljs-tag,
.hljs-subst
color: #f8f8f2;

.hljs-strong,
.hljs-emphasis
color: #a8a8a2;

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link
color: #ae81ff;

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class
color: #a6e22e;

.hljs-strong
font-weight: bold;

.hljs-emphasis
font-style: italic;

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr
color: #f92672;

.hljs-symbol,
.hljs-attribute
color: #66d9ef;

.hljs-params,
.hljs-class .hljs-title
color: #f8f8f2;

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable
color: #e6db74;

.hljs-comment,
.hljs-deletion,
.hljs-meta
color: #75715e;

/*黑色主题皮肤结束*/


/*文章目录*/

博客侧边栏公告

<!-- 添加公告栏音乐-->
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height:95px;">

<div id="musicdiv">
<h4>我的音乐</h4>
<embed src="//music.163.com/style/swf/widget.swf?sid=442016280&type=2&auto=0&width=280&height=66" width="230" height="70" allowNetworking="all"></embed>
</div>
</div>


<!-- 添加公告栏时钟 -->
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;">
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

 

 

页首html代码

<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">

<a class="git-link" href="https://github.com/xinghalo"></a>
<span id="back-to-top"><a href="#top">返回顶部</a></span>
<span id="top"></span>

页脚Html代码

<script type="text/javascript">
$(function()
$(‘#blogTitle h1‘).addClass(‘bounceInLeft animated‘);
$(‘#blogTitle h2‘).addClass(‘bounceInRight animated‘);
// 删除反对按钮
$(‘.buryit‘).remove();
initCommentData();
);
function initCommentData()
$(‘.feedbackItem‘).each(function()
var text = $(this).find(‘.feedbackListSubtitle .layer‘).text();
// 将楼层信息放到data里面
// $(this).find(‘.blog_comment_body‘).attr(‘data-louceng‘, text.replace(/^#/g, ‘‘));
if($(this).find(‘.feedbackListSubtitle .louzhu‘).length>0) $(this).addClass(‘myself‘);
var avatar = $(this).find(‘> .feedbackCon > span‘).html() || ‘http://pic.cnitblog.com/face/sample_face.gif‘;
$(this).find(‘> .feedbackCon > .blog_comment_body‘).append(‘<img class="user-avatar" src="‘+avatar+‘"/>‘)
);

$(document).ajaxComplete(function(event, xhr, settings)
// 监听获取评论ajax事件
if(settings.url.indexOf(‘/mvc/blog/GetComments.aspx‘) >= 0)
initCommentData();

);
</script>
<script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>
<div id="scrollTop" style="display:none;">
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script>
<script type="text/javascript">
UI.global_search();
var uvOptions = ;
// !important
(function()
initScrollTop();
)();
</script>
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>

 

 

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()

var mainContent = $(‘#cnblogs_post_body‘);
var h1_list = $(‘#cnblogs_post_body h1‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length < 1)
return;

if(h1_list.length>0)

var content = ‘<a name="_labelTop"></a>‘;
content += ‘<div id="navCategory" style="color:#152e97;">‘;
content += ‘<p style="font-size:18px;"><b>目录</b></p>‘;
content += ‘<ul>‘;
for(var i=0; i<h1_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>‘;
$(h1_list[i]).before(go_to_top);

var h2_list = $(h1_list[i]).nextAll("h2");
var li2_content = ‘‘;
for(var j=0; j<h2_list.length; j++)

var tmp = $(h2_list[j]).prevAll(‘h1‘).first();
if(!tmp.is(h1_list[i]))
break;
var li2_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
$(h2_list[j]).before(li2_anchor);
li2_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h2_list[j]).text() + ‘</a></li>‘;


var li1_content = ‘‘;
if(li2_content.length > 0)
li1_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h1_list[i]).text() + ‘</a><ul>‘ + li2_content + ‘</ul></li>‘;
else
li1_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h1_list[i]).text() + ‘</a></li>‘;
content += li1_content;

content += ‘</ul>‘;
content += ‘</div><p>&nbsp;</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>

 

以上是关于定制个人博客页面的主要内容,如果未能解决你的问题,请参考以下文章

个人博客全新UI:我心中你最美

个人博客自定义样式

博客园自定义主题样式

Web 三件套个人简单博客系统页面搭建(附源码)

Spring Boot制作个人博客-博客归档页面

Spring Boot制作个人博客-博客归档页面