页面美化代码1.x

页面定制CSS代码

/*接下来是原美化*/
/*接下来是原美化*/
/*接下来是原美化*/
/*接下来是原美化*/
/*接下来是原美化*/
/*接下来是原美化*/
/*接下来是原美化*/

.topicListFooter {
	margin-top: 10px;
	margin-right: 10px;
	text-align: right;
}

body {
	color: #646360 !important;
	font-size: 14px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
}

table {
	max-width: 850px;
	border-collapse: collapse;
	border-spacing: 0;
}

#sideBar ul {
	word-break: break-all;
}

#sideBar li,#sideBar ul {
	list-style: none;
}

a:link {
	color: #000;
	text-decoration: none;
}

.clear {
	clear: both;
}

#navigator {       //工具框
	position: relative;
	clear: both;
	height: 60px;
	border: 1px solid #138cca;
	border-right: none;
	border-left: none;
	background-color: #169fe6;
}

#navList {
	margin: 0 auto;
	width: 75pc;
	height: 60px;
}

#navList li {
	float: left;
	height: 60px;
	list-style-type: none;
	line-height: 60px;
}

#navList a {
	display: block;
	padding: 0 20px;
	color: #fff;
	font-size: 1pc;
}

#navList a:link {
	color: #fff;
	text-shadow: 3px 3px 3px #000;
}

#navList a:hover {
	background-color: #fff;
	color: #169fe6;
	text-decoration: none;
}

.blogStats {
	display: none;
}

#main {
	clear: both;
	margin: 20px auto 0;
	width: 75pc;
}

.postDesc a:link {
	color: #a3a3a3;
}

.postDesc a:hover {
	color: #9ab26b;
	text-decoration: none;
}

.postSeparator {
	clear: both;
	margin: 20px 0;
	border-top: 1px dashed silver;
}

.topicListFooter {
	margin-top: 15px;
	height: 68px;
	font-size: 1pc;
	line-height: 68px;
}

#nav_next_page {
	line-height: 40px;
}

#nav_next_page a {
	display: inline-block;
	padding: 0 15px;
	height: 40px;
	border-radius: 3px;
	background-color: #99b16b;
	box-shadow: 0 0 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.09);
	color: #fff;
	text-decoration: none;
	line-height: 40px;
}

#calendar table a:hover {
	background-color: #f60;
	color: #fff;
	text-decoration: none;
}

.catListTag ul li {
	margin: .5em;
}

.divRecentComment {
	margin-top: .5em;
}

#EntryTag a:hover {
	color: #f60;
}

.feedbackListSubtitle {
	padding: 0 5px;
}

.feedbackListSubtitle a:hover {
	color: #9ab26b;
	text-decoration: none;
}

#divRefreshComments {
	margin-bottom: 10px;
	text-align: right;
}

.entrylistItemPostDesc a:hover {
	color: #f60;
}

.topicListFooter .pager a:hover,.topicListFooter .pager span {
	display: inline-block;
	margin-top: 14px;
	padding: 0 15px;
	height: 40px;
	border: none;
	border-radius: 3px;
	background: #9ab26b;
	box-shadow: 0 0 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.09);
	color: #fff;
	text-decoration: none;
	line-height: 40px;
}

.divPhoto:hover {
	border-color: #08c;
	box-shadow: 3px 3px 3px rgba(0,0,0,.3);
}

#footer {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 15px;
	color: #333;
	text-align: center;
}

.pfl_feedback_area_title {
	margin-bottom: 1em;
}

.pfl_feedbackCon {
	margin: .5em;
}

.postCon a:link {
	color: #9ab26b;
	text-decoration: none;
}

body,div,h1,h2,h3,h4,h5,h6,img,li,ul {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}

#home {
	margin: 0 auto;
}

#BlogMusicPayer,#flashContent {
	position: absolute;
	top: 45px;
	left: 719px;
	display: block;
}

#user .user_info a:hover {
	color: #fff;
}

#mynav li:hover {
	background-color: #99b16b;
	color: #fff;
}

#mynav li,#profile_block a,.catListFeedback ul li a,.catListPostArchive ul li a,.catListPostCategory ul li 

a,.catListTag ul li,.catListTag ul li:before,.catListView ul li a,.recent_comment_title a {
	-webkit-transition: all .2s ease-in;
	transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
}

#mainContent {
	float: left;
	overflow: visible;
	width: 890px;
	background: 0 0;
	text-overflow: ellipsis;
	word-break: break-all;
}

#mainContent .forFlow {
	float: none;
	width: 95%;
}

.day {
	margin-bottom: -1px;
	padding: 20px;
        //border: 1px solid #40c4ff;
	background: #fff;
}

.day:hover {
	position: relative;
	z-index: 10;
	border: 1px solid #169fe6;
}

.day:hover .postSeparator {
	border-top: 1px dashed #169fe6;
}

.dayTitle {
    display: none !important;
	z-index: 10px;
	float: left;
	display: block;
	margin-right: 10px;
	padding: 3px 6px;
	background-color: #45bcf9;
	color: #fff;
	font-size: 9pt;
}

.dayTitle:hover {
	background-color: #ff5e52;
}

.dayTitle a {
	color: #fff;
}

.day .postTitle2 {
    text-decoration: none;
    font-size: 1.5rem;
    margin-left: 3px;
    color: #e91e63;
    transition: margin-left 0.4s;
}

.day .postTitle {
	float: left;
	clear: right;
	font-size: 21px;
	line-height: 1.5em;
}

.postCon {
	clear: both;
	padding: 15px 0;
}

.postDesc {
	float: none;
	clear: both;
	color: #bcbcbc;
	text-align: left;
	font-size: 9pt;
	line-height: 200%;
}

.postDesc a {
	color: #999;
}

#topics {
	overflow: hidden;
	padding: 20px;
	border: 1px solid #dedede;
	background: #fff;
}

#topics .postTitle {
	margin-bottom: 20px;
	color: #333;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.8;
}

#topics .postTitle a {
	color: #333;
}

#topics .postBody blockquote {
	margin: 0;
	padding-left: 10px;
	border: none;
	border-left: 5px solid #ddd;
}

#topics .postBody blockquote p {
	margin: 0;
	padding: 0;
	color: #777;
}

.postTitle a:hover {
	color: #0e90d2;
	text-decoration: none;
}

#cnblogs_post_body {
	color: #333;
	line-height: 1.8;
}

#cnblogs_post_body h2 {
	margin: 20px 0;
}

#cnblogs_post_body ol,#cnblogs_post_body ul {
	margin: 0 0 1em;
	margin-left: 40px;
	padding: 0;
}

#EntryTag {
	color: #7e8c8d;
	font-weight: 700;
	font-size: 14px;
}

#EntryTag a {
	color: #9fa4a4;
	text-decoration: none;
	font-weight: 400;
}

#BlogPostCategory a,#EntryTag a {
	margin-left: 10px;
}

#BlogPostCategory a:hover {
	border-bottom: 1px dotted #ff5e52;
	color: #ff5e52;
}

#post_next_prev {
	margin: 10px 0;
	font-size: 14px;
	line-height: 200%;
}

#post_next_prev a {
	color: #333;
}

#post_next_prev a:hover {
	border-bottom: 1px dotted #ff5e52;
	color: #ff5e52;
}

#topics .postDesc {
	margin: 10px 0;
	color: #777;
	font-size: 14px;
	line-height: 200%;
}

#topics .postDesc a:hover {
	color: #9ab26b;
}

#mystart ul li a.a,#mystart ul li a.b {
	float: left;
	margin-right: 9pt;
	text-decoration: none;
}

#myinfo a:hover {
	border-bottom: 1px dotted #9ab26b;
}

.feedbackManage {
	float: right;
	line-height: 26px;
        margin-right: 20px;
}

.comment_actions a:hover {
	color: #9ab26b;
}

.login_tips a:hover {
	color: #fff;
}

.login_tips_login {
	background: #9ab26b;
}

.login_tips_regist {
	background: #49c8f5;
}

.login_tips_home {
	background: #2b6695;
}

.entrylistItem {
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
	min-height: 20px;
	background: #fff;
}

.entrylistPosttitle a.desc_img_wrap {
	position: relative;
	display: block;
	margin: 0;
	margin-bottom: 10px;
	height: 20pc;
}

.entrylistPosttitle a:hover {
	color: #99b16b;
	text-decoration: none;
}

.c_b_p_desc {
	color: #333;
	font-size: 14px;
	line-height: 200%;
}

.entrylistItemPostDesc a:hover,a.c_b_p_desc_readmore {
	color: #9ab26b;
}

#sideBar {
	float: left;
	overflow: visible;
	margin-left: 20px;
	width: 290px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	word-break: break-all;
}

#blog-news {
	overflow: visible;
	margin-bottom: 20px;
}

#blog-news .share {
	width: 290px;
	height: 118px;
	background: #fff;
}

#blog-news .share li:hover {
	box-shadow: 0 0 3px rgba(0,0,0,.3);
}

#profile_block {
	margin-top: 0!important;
	padding: 20px;
	background: #fff;
	color: #000;
	font-size: 16px;
	line-height: 1.8;
}

#profile_block a {
	color: #000;
	text-decoration: none;
	font-size: 16px;
}

#profile_block a:hover {
	border-bottom: 1px dotted #99b16b;
	color: #99b16b;
}

#blog-news .social .social_envelope,#blog-news .social .social_github,#blog-news .social .social_weibo {
	display: block;
	overflow: hidden;
	width: 63px;
	height: 58px;
	background: #d04341;
	color: #fff;
	text-align: center;
	font-size: 30px;
	line-height: 58px;
}

#blog-news .social .social_weibo {
	text-shadow: #b13937 1px 1px,#b13937 2px 2px,#b13937 3px 3px,#b13937 4px 4px,#b13937 5px 5px,#b13937 6px 

6px,#b13937 7px 7px,#b13937 8px 8px,#b13937 9px 9px,#b13937 10px 10px,#b13937 11px 11px,#b13937 9pt 9pt,#b13937 

13px 13px,#b13937 14px 14px,#b13937 15px 15px,#b13937 1pc 1pc,#b13937 17px 17px,#b13937 18px 18px,#b13937 19px 

19px,#b13937 20px 20px,#b13937 21px 21px,#b43a38 22px 22px,#b73b39 23px 23px,#bb3c3a 24px 24px,#be3d3b 25px 

25px,#c23e3c 26px 26px,#c53f3d 27px 27px,#c9403e 28px 28px,#cc413f 29px 29px,#d04341 30px 30px;
}

#blog-news .social .social_github {
	background: #34c8f4;
	text-shadow: #2fb4dc 1px 1px,#2fb4dc 2px 2px,#2fb4dc 3px 3px,#2fb4dc 4px 4px,#2fb4dc 5px 5px,#2fb4dc 6px 

6px,#2fb4dc 7px 7px,#2fb4dc 8px 8px,#2fb4dc 9px 9px,#2fb4dc 10px 10px,#2fb4dc 11px 11px,#2fb4dc 9pt 9pt,#2fb4dc 

13px 13px,#2fb4dc 14px 14px,#2fb4dc 15px 15px,#2fb4dc 1pc 1pc,#2fb4dc 17px 17px,#2fb4dc 18px 18px,#2fb4dc 19px 

19px,#2fb4dc 20px 20px,#2fb4dc 21px 21px,#2fb6de 22px 22px,#30b8e1 23px 23px,#30bae4 24px 24px,#31bce6 25px 

25px,#31bfe9 26px 26px,#32c1ec 27px 27px,#32c3ee 28px 28px,#33c5f1 29px 29px,#34c8f4 30px 30px;
}

#blog-news .social .social_envelope {
	background: #f8bc2e;
	text-shadow: #d3a027 1px 1px,#d3a027 2px 2px,#d3a027 3px 3px,#d3a027 4px 4px,#d3a027 5px 5px,#d3a027 6px 

6px,#d3a027 7px 7px,#d3a027 8px 8px,#d3a027 9px 9px,#d3a027 10px 10px,#d3a027 11px 11px,#d3a027 9pt 9pt,#d3a027 

13px 13px,#d3a027 14px 14px,#d3a027 15px 15px,#d3a027 1pc 1pc,#d3a027 17px 17px,#d3a027 18px 18px,#d3a027 19px 

19px,#d3a027 20px 20px,#d3a027 21px 21px,#d7a327 22px 22px,#dba628 23px 23px,#dfa929 24px 24px,#e3ac2a 25px 

25px,#e7af2a 26px 26px,#ebb22b 27px 27px,#efb52c 28px 28px,#f3b82d 29px 29px,#f8bc2e 30px 30px;
}

#blog-news .social .social_envelope:hover,#blog-news .social .social_github:hover,#blog-news .social 

.social_weibo:hover {
	text-shadow: none;
}

#leftcontentcontainer,.myad {
	margin-top: 20px;
}

.myad {
	padding: 20px;
}

.mySearch,.myad {
	background: #fff;
}

.catListTitle {
    padding: 10px 20px;
    border: 1px solid #169fe6;
    background-color: #169fe6;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    border-radius: 10px 10px 0px 0px;
}

#widget_my_zzk {
	margin: 0!important;
	padding: 15px 0 0 15px;
	border-right: 1px solid #dedede;
	border-left: 1px solid #dedede;
}

#widget_my_google {
	margin: 0!important;
	padding: 10px 0 15px 15px;
	border: 1px solid #dedede;
	border-top: none;
}

.input_my_zzk {
	padding: 0 9pt;
	width: 10pc;
	height: 35px;
	outline: 0;
	border: 1px solid #ddd;
	font-size: 13px;
	line-height: 35px;
}

input.btn_my_zzk {
	width: 70px;
	height: 37px;
	border: none;
	background: #ff5e52;
	color: #fff;
	text-align: center;
	font-size: 14px;
	font-family: Microsoft Yahei,Simsun,Arial;
	line-height: 37px;
}

input.btn_my_zzk:hover {
	cursor: pointer;
	cursor: hand;
}

.catListTag ul li:hover {
	background: #ff5e52;
	color: #fff;
	cursor: pointer;
}

.catListTag ul li:hover a {
	color: #fff;
}

.catListTag ul li a:hover {
	color: #fff;
	text-decoration: none;
}

.catListPostCategory {
	background: #fff;
}

.catListPostCategory ul {
	border: 1px solid #dedede;
	border-top: none;
}

.catListPostCategory ul li {
	padding-left: 25px;
	border-bottom: 1px solid #e9e9e9;
	color: #777;
	font-size: 15px;
	line-height: 44px;
}

.catListArticleCategory ul li a,.catListFeedback ul li a,.catListPostArchive ul li a,.catListPostCategory ul li 

a,.catListView ul li a,.recent_comment_title a {
	color: #777;
	text-decoration: none;
}

.catListArticleCategory ul li a:hover,.catListFeedback ul li a:hover,.catListPostArchive ul li 

a:hover,.catListPostCategory ul li a:hover,.catListView ul li a:hover,.recent_comment_title a:hover {
	border-bottom: 1px dotted #ff5e52;
	color: #ff5e52;
}

.catListPostArchive {
	background: #fff;
}

.catListPostArchive ul {
	border: 1px solid #dedede;
	border-top: none;
}

.catListPostArchive ul li {
	padding-left: 25px;
	border-bottom: 1px solid #e9e9e9;
	color: #7e8c8d;
	font-size: 15px;
	line-height: 44px;
}

.catListArticleCategory,.catListImageCategory {
	width: 290px;
	background: #fff;
}

.catListComment {
	background: #fff;
}

.recent_comment_title {
	border: none!important;
	color: #7e8c8d;
}

.recent_comment_author,.recent_comment_body {
	padding-top: 0!important;
	color: #9fa4a4;
}

.recent_comment_body {
	border-bottom: none!important;
}

.recent_comment_author {
	border-bottom: 1px solid #e9e9e9;
}

.catListFeedback,.catListView {
	background: #fff;
}

.catListFeedback ul li {
	padding: 8px 0;
	border-bottom: 1px solid #e9e9e9;
}

.clearFix:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: "";
	line-height: 0;
}

#myding {
	display: none;
	background: #99b16b;
}

#myadd:hover {
	opacity: 1;
}

#goto-top:hover {
	background: url(//images.cnblogs.com/cnblogs_com/Li-Cheng/554829/o_goto-top.png) no-repeat 0 -36px;
}

.feedbackItem {
	margin-top: 10px;
        /*margin-bottom: 40px;*/
    /*border-top: 1px dashed black;*/
    padding-top: 20px;
}

.feedbackCon {
    padding: 10px;
    padding-bottom: 0;
    /* border: 1px dashed rgba(0,0,0,.54); */
    background: #ffffff;
    border-radius: 15px;
    /* box-shadow: 3px 2px 8px 0px #888888; */
    /* box-shadow: 0px 0px 3px 0px #888888; */
    margin-top: 0;
}

#comment_nav,{
	margin: 10px 0;
}

#comment_nav a:hover {
	color: #9ab26b;
}

#comment_form_container,#site_nav_under {
	padding: 20px;
	border: 1px solid #dedede;
	background-color: #fff;
        margin-top: 0px;
}

#ad_under_post_holder {
	float: left;
	margin-bottom: 10px;
	width: 300px;
}

#under_post_news {
	margin-top: 10px;
	margin-left: 0;
	padding: 10px 20px;
	width: 33pc;
	height: 10pc;
	border: 1px solid #dedede;
	background-color: #fff;
}

#google_ad_c2 {
	float: left;
	clear: right;
	margin-bottom: 10px;
	margin-left: 0;
	width: 570px;
}

#under_post_kb {
	clear: left;
	margin-top: 60px;
	padding: 10px 20px;
	border: 1px solid #dedede;
	background-color: #fff;
}

.entrylist h1 {
	margin-bottom: 10px;
	height: 50px;
	line-height: 50px;
}

.entrylistItem {
	margin-bottom: -1px;
	padding: 20px;
	border: 1px solid #dedede;
	background: #fff;
}

.entrylistItem:hover {
	position: relative;
	z-index: 10;
	border: 1px solid #169fe6;
}

.entrylist .postSeparator {
	display: none;
}

.entrylistItemTitle {
	color: #555;
}

.entrylistPosttitle {
	float: left;
	clear: right;
	font-size: 21px;
	line-height: 1.5em;
}

.entrylistPostSummary {
	clear: both;
	padding: 15px 0;
}

.entrylistItemPostDesc {
	float: none;
	clear: both;
	color: #bcbcbc;
	text-align: left;
	font-size: 9pt;
	line-height: 200%;
}

.entrylistItemPostDesc a {
	float: right;
	color: #999;
}

#myposts h3 {
	margin-bottom: 10px;
	height: 50px;
	font-size: 28px!important;
	line-height: 50px;
}

#myposts .PostList {
	margin: 0 0 -1px!important;
	padding: 20px;
	border: 1px solid #dedede;
	background: #fff;
}

#myposts .PostList:hover {
	position: relative;
	z-index: 10;
	border: 1px solid #169fe6;
}

#myposts .PostList a {
	display: block;
	color: #333;
	font-size: 1pc;
}

#myposts .PostList a:hover {
	color: #ff5e52;
}

.cnblogs-post-body {
	color: #333;
}

.sidebar-block {
	margin-bottom: 20px;
	background-color: #fff;
}

.sidebar-block h3 {
	padding: 10px 20px;
	border: 1px solid #169fe6;
	background-color: #169fe6;
	color: #fff;
	font-weight: 400;
	font-size: 18px;
}

.sidebar-block ul {
	border: 1px solid #dedede;
	border-top: none;
}

.sidebar-block ul li {
	padding: 15px 10px 15px 20px;
	border-bottom: 1px solid #e9e9e9;
	color: #777;
	font-size: 14px;
	line-height: 2;
}

.sidebar-block ul li a {
	color: #777;
	text-decoration: none;
}

.sidebar-block ul li a:hover {
	border-bottom: 1px dotted #ff5e52;
	color: #ff5e52;
}

#cnblogs_post_body img {
	max-width: 50pc;
}

#cnblogs_post_body a:link {
	text-decoration: none;
}

#ad_t2 a:active,#ad_t2 a:link,#ad_t2 a:visited {
	color: #000;
}

#blogTitle h1 a {
    margin-left: 250px;
    color: white;
    font-family: 'Calibri';
    font-size: 75px;
}

div#cnblogs_c1, div#cnblogs_c2, div#under_post_news, div#ad_t2{
    display: none;
}

div div div h2 {
    text-align: right;
}

#blogTitle h2 {
    text-align: left;
    margin-left: 500px;
    color: rgba(0, 0, 0, 0.31);
    font-weight: 100;
}

#blogTitle {
    background: url(http://images.cnblogs.com/cnblogs_com/Attention/1313650/o_timg.jpg);
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -17px;
}

#zhanhang{
    font-size: 19px;
}
#blogTitle h1 {
    margin-top: 80px;
}

.sideImg {
    position: relative;
    width: 100%;
    height: 200px;
    background-position: center center;
    background-size: cover;
}

.side-info-head {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 65px;
    height: 65px;
    border-radius: 65px;
    background-position: center center;
    background-size: cover;
}
.side-info-more {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    font-size: 17px;
}
.side-info-oth {
    color: hsla(0,0%,100%,.7);
    font-size: 13px;
}

div#navigator {
    display: none;
}

div#yiyan {
    background: #40c4ff;
    margin: 5px;
    border-radius: 5px;
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    /*box-shadow: 1px 1px 12px 0px rgba(0,0,0,.54);*/
    margin: 15px 15px 15px 15px;
}

div#hitokoto {
    color: #fff;
    margin-top: 12px;
}

input#btnZzk, input.btn_my_zzk {
    border-radius: 15px;
    font-weight: 500;
    background-color: #40c4ff !important;
    margin-left: 20px;
}

input#q, input#google_q {
    border-radius: 10px;
}

.day.mdui-card.mdui-hoverable {
    margin-top: 40px;
}

.newsItem.mdui-card.mdui-hoverable {
    margin-bottom: 30px;
    border-radius: 10px 10px 0px 0px;
}

#comment_nav > a, #btn_comment_submit, #commentbox_opt a {
    padding: 0.6rem 0.8rem;
    background-color: #ffd740;
    color: white !important;
    margin: 0.3rem;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    transition: all 0.3s;
}

#btn_comment_submit {
    border: none;
    width: unset;
    height: unset;
    font-size: 1rem;
}

.container_3c6APS_.textCenter_1KzIPcR.weakText_3WcXGdI.baseText_dqsVpMD.copyright_2Ob_0Cg {
    display: none;
}

div#blog-comments-placeholder {
    margin-bottom: 50px;
    padding: 0px 30px;
}

a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #ff4081;
    text-decoration: none;
    vertical-align: top;
    outline: 0;
}

div#post_detail {
    margin-top: 30px;
}

.catListLink li {
    padding: 8px 10px 8px 20px !important;
}

.feedback_area_title {
    /* font-size: 16px; */
    /* margin-left: 20px; */
    /* margin-bottom: 20px; */
    /* font-weight: bold; */
    margin-left: 30px;
    font-size: 23px;
    margin-bottom: 30px;
}

a.layer {
    padding: 2px 6px;
    font-size: 90%;
    color: #fff !important;
    background-color: #448aff;
    border-radius: 2px;
    margin: 0px 10px 10px 20px;
}

span.louzhu {
    color: #ff4081;
    font-weight: bold;
}

div#author_profile_detail {
    font-size: 17px;
    line-height: initial;
}

#author_profile {
    float: left;
    width: 280px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px !important;
    color: #000;
    margin-left: 0;
    font-size: 12px;
}

.buryit {
    display: none;
}

#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: auto;
    text-align: center;
    margin-top: 10px;
}

div#kb_block a, div#kb_block a {
    color: #000;
}

inspector-stylesheet:1
div#RecentCommentsBlock ul li {
    line-height: 1;
}

div#author_profile_detail a {
    color: #000;   //#2196F3
    line-height: 1.5;
    font-size: 15px;
    font-weight: 500;
}

.author_avatar {
    vertical-align: top;
    float: left;
    margin-right: 5px;
    padding-top: 5px;
    padding-left: 2px;
    border-radius: 10px;
    margin-left: 10px;
}

#green_channel {
    /* padding: 10px 0; */
    /* margin-bottom: 10px; */
    /* margin-top: 10px; */
    border: none;
    font-size: 15px;
    width: 350px;
    text-align: center;
}

span.comment_actions a, .comment_vote a {
    font-size: 12px;
    color: grey;
}

span#digg_count {
    color: #fb3d3d;
    font-family: Consolas,Courier,'Courier New',monospace;
    font-size: 20px;
    font-weight: bolder;
}

.diggit {
    float: left;
    width: 46px;
    height: 60px;
    background: url(https://www.cnblogs.com/images/cnblogs_com/Attention/1319598/t_up.png) no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
    background-size: 90%;
    background-position: bottom;
}

#green_channel a:link, #green_channel a:visited, #green_channel a:active {
    text-shadow: none;
    background: none;
    border: none!important;
}

a#green_channel a:link, #green_channel a:visited, #green_channel a:active {
    color: #fff!important;
    border: none!important;
}

div#sidebar_recentcomments {
    display: none;
}

div#sidebar_imagecategory {
    display: none;
}

p#commentbox_opt {
    display: none;
}

label.mdui-textfield-label {
    margin-left: 10px;
}

div#comment_form_container p {
    display: none;
}

.blog_comment_body, .comment_vote {
    margin: 10px;
    line-height: 23px;
}

#commentform_title {
    background-image: none;
    margin-left: 16px;
    font-size: 23px;
    margin-bottom: 10px;
}

div#kb_block b {
    margin-left: 20px;
    font-size: 23px;
    /* padding-bottom: 1000px; */
    font-weight: 100;
}

div#kb_recent {
    margin-top: 20px;
}

body.null.mdui-appbar-with-toolbar.mdui-loaded {
    background: #EEEEEE;
}

div#comment_nav {
    display: none;
}

div#cnblogs_post_body a:link {
    color: #E91E63;
}

.syntaxhighlighter .line.alt1, .syntaxhighlighter .line.alt2 {
    background-color: #000!important;
}

.syntaxhighlighter .preprocessor {
    color: #f78aaf!important;
}

.syntaxhighlighter .keyword {
    font-weight: normal!important;
    color: #64B5F6!important;
}

.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
    color: #fee!important;
}

.syntaxhighlighter .string, .syntaxhighlighter .string a {
    color: #FF5722!important;
}

.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    color: #8BC34A!important;
}

.line {
    color: #b9abab;
}

.syntaxhighlighter .gutter .line {
    border-right: 2px solid #ffd740a1!important;
}

textarea#tbCommentBody {
    height: 70px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.42);
}

input#a {
    margin-left: 112px;
    margin-top: 10px;
    color: white !important;
}

div#count {
    text-align: center;
    margin-top: 10px;
}

.day.mdui-card.mdui-hoverable:hover {
    border: 0;
}

.mdui-container.mdui-p-t-5 {
    margin-right: -1228px;
    margin-left: 4px;
    margin-top: -43px;
}

div#musicPlay {
    margin-left: 30px;
    margin-top: -15px;
    margin-bottom: -15px;
    font-size: 17px;
}

input.mdui-btn.mdui-btn-raised.mdui-ripple.mdui-color-blue-600 {
    margin-left: 25px;
    margin-right: -10px;
}

audio#myaudio {
    margin-bottom: -25px;
    margin-left: 10px;
}

div#sideBarMain {
    margin-right: -40px;
}

u {
    color: black;
}

.aplayer-body {
    border: 4px solid #000;
}

.aplayer-miniswitcher {
    border: 1px solid #000000;
}

.feedback_area_title {
    display: none;
}

.feedbackCon div {
    color: black;
}

.comment_quote {
    padding: 5px 5px 5px 5px;
    border: 1px dashed #ccc;
}

button#tt, button#box {
    margin-left: 900px;
}

div#sidebar_topviewedposts {
    margin-top: 40px;
    margin-bottom: 40px;
}

div#sidebar_shortcut {
    margin-top: 40px;
}

ul#example-3 p {
    margin-left: 50px;
}

#back-to-top {
    bottom: 28px;
    padding: 10px 10px;
    position: fixed;
    right: 35px;
    cursor: pointer;
    display:none;
    -webkit-animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1);
    animation-fill-mode: forwards;
}

.footer-nav-text {
    color: #fff!important;
    box-sizing: border-box;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    line-height: 24px;
    padding-top: 24px;
    width: 100%;
    padding-bottom: 24px;
    margin-left: 150px;
}
.footer-nav {
    height: 96px;
}
.footer-nav-text .mdui-icon {
    padding-top: 23px;
    width: 24px;
    float: left;
    margin-right: 10px;
}
.footer-nav-text .footer-nav-direction {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 1px;
    opacity: 0.55;
}
.footer-nav > div > div > a[href="undefined"] {
    visibility: hidden;
}

#span_comment_canceledit,#tip_comment2{
    display: none !important;
}
#tip_comment {
    position: unset;
    color: #e91e63 !important;
}
@media screen and (max-width:1200px) {
    #catalog{
        display: none;
    }
}
.catalog{
    font-size: 15px;
    padding: 6px 8px;
    transition: all 0.3s;
    border-radius: 2px;
}
.catalog:hover{
    color: rgba(255,64,129,0.8);
}
.catalog.active{
    font-weight: bold;
    color: rgba(255,64,129,1);
}
.catalog > span{
    font-weight: bold;
    margin-right: 8px;
}
.catalog-h3{
    padding-left: 20px;
}
.catalog-h4{
    padding-left: 40px;
}
.sidebarcatalogfixed {
    position: fixed !important;
    top: 80px;
    width: 325px;
}
#catalog{
    padding-left: 7px;
    overflow-y: auto;
}
.sidecataloghide{
    opacity:0;
    animation: 0.2s hidefadeing ease-in;
    -webkit-animation: 0.2s hidefadeing ease-in;
    pointer-events: none;
    cursor: default;
}
.sidecatalogshow{
    opacity:1;
    animation: 0.2s showfadeing ease-in;
    -webkit-animation: 0.2s showfadeing ease-in;
}
@keyframes hidefadeing{
   from{opacity:1;transform:scale(1);}
   to{opacity:0;transform:scale(0.98);}
}
@keyframes showfadeing{
   from{opacity:0;transform:scale(0.98);}
   to{opacity:1;transform:scale(1);}
}

.underPostDetails>i,.underPostDetails>span{
    font-size:16px;
}
.underPostDetails {
    margin-top: 15px;
    margin-bottom: 8px;
    margin-left: 3px;
}
.underPostDetails > .space{
    width:5px;
    display:inline-block;
}

.syntaxhighlighter table td.code .line {
    padding: 0 1em!important;
}

.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
    color: #ff4081!important;
}

.comment_vote {
    margin-bottom: -20px;
}

div#sidebar_postarchive {
    margin: 0;
}

div#sidebar_search, div#sidebar_shortcut, div#sidebar_categories, div#sidebar_recentcomments, div#sidebar_topviewedposts, div#sidebar_topcommentedposts {
    border-radius: 10px 10px 0px 0px;
}

div#green_channel {
    display: none;
}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea{
    font-family: fari momo !important;
}

博客侧边栏公告

<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/css/mdui.min.css">
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/js/mdui.min.js"></script>

<div id="yiyan" class="mdui-shadow-5 mdui-hoverable">
<strong style="font-size:17.5px;display:inline;color:#fff;">一言（ヒトコト）</strong>

<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple" style="display: inline;text-align: right;margin-bottom: 2.7px;" mdui-dialog="{target: '#example-1'}"><i class="mdui-icon material-icons" style="color: #fff;">refresh</i></button>

  <div class="mdui-dialog" id="example-1">
    <div class="mdui-dialog-title">Are you sure?</div>
    <div class="mdui-dialog-content">别想了！我这么弱，怎么可能会写刷新？！<br>自己试试 <kbd style="padding: 2px 6px;font-size: 90%;color: #fff;background-color: #333;border-radius: 2px;font-family: Consolas,Courier,'Courier New',monospace;">F5</kbd> 吧：)</div>
    <div class="mdui-dialog-actions">
      <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    </div>
  </div>

         <div class="ui bottom attached center aligned segment">
          <div class="ui active centered inline loader" id="hitokoto-loader"></div>
          <script src="https://files.cnblogs.com/files/Attention/%E8%8E%B7%E5%8F%96%E4%B8%80%E8%A8%80.js"></script>
          <div style="font-size: 1em; line-height: 1.5em; display: none; color: #fff" id="hitokoto-content">加载中......</div>
          <div style="text-align: right; margin-top: 15px; font-size: 0.9em; color: #fff; display: none; " id="hitokoto-from"></div>
        </div>
</div>

<embed border="0"
 marginwidth="0"
 marginheight="0"
 width=330 height=86
 src="//music.163.com/outchain/player?type=2&id=459434585&auto=0&height=66"></embed>

<div>
    <input type="button" class="mdui-btn mdui-ripple mdui-color-blue-300" value="无聊的按钮" id="a"/>
    <div id="count"></div>
</div>
    <script type="text/javascript">
    function addCookie(name,cookievalue,time) {
    if (name != "" && cookievalue != "" &&  time != "") {
    if (isNaN(time) == false){
    var expires = new Date();
    expires.setTime(expires.getTime() + time * 1000);
    document.cookie = name + '=' + escape(cookievalue) + ';expires=' + expires.toGMTString();
    }
    }
    }
    function getCookie(cookieName) {
    var cookieString = document.cookie;
    var start = cookieString.indexOf(cookieName + '=');
    if (start == -1)
    return null;
    start += cookieName.length + 1;
    var end = cookieString.indexOf(';', start);
    if (end == -1) return unescape(cookieString.substring(start));
    return unescape(cookieString.substring(start, end));
    }
    //var html = document.getElementsByTagName("html")[0];
    var html = document.getElementById('a');
    html.onclick = function(){
    var count = parseInt(getCookie('count'))+1;
    addCookie("count",count,"1000");
    document.getElementById("count").innerHTML = "[您点击了"+getCookie('count')+"次]";
    }
    if (getCookie('count')){
    document.getElementById("count").innerHTML = "[您点击了"+getCookie('count')+"次]";
    }else{
    document.getElementById("count").innerHTML = "[您还没有点击过]";
    addCookie("count","0","1000");
    }
    </script>

<!-- 音乐播放器 -->
<!--
<div id="m">
<audio src="https://m10.music.126.net/20181029194218/ea43be14dcd5c8edc6a9fa47d4714002/ymusic/1ff7/0467/ec18/b60257e908639de6b675b4bd68a33aea.mp3" id="myaudio" controls="controls" loop="false" hidden="true">

    </audio>

    <input type="button" onclick="autoPlay()" value="播放" />
    <input type="button" onclick="closePlay()" value="关闭" />

</div>

<script language="javascript" type="text/javascript">
        function autoPlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.play();
        }
        function closePlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.pause();
            myAuto.load();
        }
    </script>-->

<!-- 背景动画 -->
<div class="Snow">
	<style>
        canvas {
            position:fixed;
            z-index:-999;
        }
	</style>
	<canvas id="Snow" width="1282" height="759"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/Attention/snow.js"></script>
<div id="postsContainer">
	<div id="posts">

页首Html代码

<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/css/mdui.min.css">
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/js/mdui.min.js"></script>

<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
	<div class="mdui-toolbar mdui-color-blue-600">
		<!--<button mdui-drawer="{target: '#left-drawer'}" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></button>-->
		<a href="javascript:var inst = new mdui.Drawer('#drawer',{overlay: 'true'});inst.toggle();" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '菜单'}"><i class="mdui-icon material-icons">menu</i></a>
		<a href="javascript:scrollbacktotop();" class="mdui-typo-headline">Attention</a>
		<a class="mdui-typo-title">博客</a>
		<div class="mdui-toolbar-spacer">
		</div>
		<div class="mdui-textfield mdui-textfield-expandable mdui-float-right" style="margin:0;margin-right:6px;max-width:45%;">
			<button class="mdui-textfield-icon mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '搜索'}" style="margin-top:1px;"><i class="mdui-icon material-icons">search</i></button>
			<input onkeydown="search();" id="toolbarsearchinput" class="mdui-textfield-input" type="text" style="color: #fff;" placeholder="搜索 - 我的博客内...">
			<button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button>
		</div>

<div class="mdui-container mdui-p-t-5">

<button class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white " mdui-tooltip="{content: '音乐'}"  mdui-menu="{target: '#example-3'}"><i class="mdui-icon material-icons">audiotrack</i></a>
</button>
  <ul class="mdui-menu mdui-menu-cascade" id="example-3">
<p>施工中...

      </ul>
    </li>
  </ul>
</div>

		<!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
		<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>-->
		<a href="https://www.cnblogs.com/Attention" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '首页'}" id="toolbarbuttonhome"><i class="mdui-icon material-icons">home</i></a>
		<a href="javascript:" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '目录'}" id="toolbarbuttoncatalog"><i class="mdui-icon material-icons">format_list_bulleted</i></a>
	</div>
</div>
<div class="mdui-drawer mdui-color-white mdui-drawer-close" id="drawer" overlay="true">
	<div class="sideImg" data-original="http://images.cnblogs.com/cnblogs_com/Attention/1313650/o_bckg.jpg" style="background-image: url("http://images.cnblogs.com/cnblogs_com/Attention/1313650/o_bckg.jpg");">
		<!--https://www.cnblogs.com/images/cnblogs_com/Attention/1313650/o_o_background_side1.jpg-->
		<div class="side-info-head mdui-shadow-3" style="background-image:url(http://images.cnblogs.com/cnblogs_com/Attention/1319598/o_meh.jpg">
		</div>
		<div class="side-info-more">
			Attention
			<br>
			<span class="side-info-oth">蒟蒻</span>
		</div>
	</div>
	<ul class="mdui-list">
		<a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/Attention/">
		<i class="mdui-list-item-icon mdui-icon material-icons">home</i>
		<div class="mdui-list-item-content">
					首页
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/">
		<i class="mdui-list-item-icon mdui-icon material-icons">subject</i>
		<div class="mdui-list-item-content">
					博客园
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/Attention/rss">
		<i class="mdui-list-item-icon mdui-icon material-icons">rss_feed</i>
		<div class="mdui-list-item-content">
					订阅
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://msg.cnblogs.com/send/Attention">
		<i class="mdui-list-item-icon mdui-icon material-icons">chat</i>
		<div class="mdui-list-item-content">
					联系
		</div>
		</a>
		<li class="mdui-subheader">管理</li>
		<a class="mdui-list-item mdui-ripple" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">
		<i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
		<div class="mdui-list-item-content">
					新随笔
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://i.cnblogs.com/">
		<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
		<div class="mdui-list-item-content">
					后台管理
		</div>
		</a>

                <li class="mdui-subheader">关于</li>
                <a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/Attention/p/9905419.html">
			<i class="mdui-list-item-icon mdui-icon material-icons">error_outline</i>
			<div class="mdui-list-item-content">关于我的博客</div>
		</a>
                <a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/Attention/p/9905419.html">
			<i class="mdui-list-item-icon mdui-icon material-icons">timelapse</i>
			<div class="mdui-list-item-content">博客美化更新日志</div>
		</a>

		<li class="mdui-subheader">友链 - 博客</li>
		<a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/abc2237512422">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					abc2237512422
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://www.luogu.org/blog/xryjr233/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					xryjr233
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="http://www.cnblogs.com/greed-vi">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					GREED_VI
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="http://www.cnblogs.com/yzx1798106406">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					yzx1798106406
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="http://www.cnblogs.com/fsy2017">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					fsy2017
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://wupengrui666.blog.luogu.org/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					prpr
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="http://www.cnblogs.com/kingx/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					KingX
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="http://www.cnblogs.com/Sroht/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					Sroht
		</div>
		</a>
		<a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/chenxiaoran666/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					chenxiaoran666
		</div>
		</a>
                <a class="mdui-list-item mdui-ripple" href="https://www.cnblogs.com/cjjsb/">
		<i class="mdui-list-item-icon mdui-icon material-icons">link</i>
		<div class="mdui-list-item-content">
					hl666
		</div>
		</a>
                <a class="mdui-list-item mdui-ripple" href="#">
		<i class="mdui-list-item-icon mdui-icon material-icons">explore</i>
		<div class="mdui-list-item-content">
					华外dalao见上
		</div>
		</a>
	</ul>
</div>

<div class="Snow">
	<style>
        canvas {
            position:fixed;
            z-index:-999;
        }
	</style>
	<canvas id="Snow" width="1282" height="759"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/Attention/snow.js"></script>
<div id="postsContainer">
	<div id="posts">

页脚Html代码

<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/css/mdui.min.css">
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/js/mdui.min.js"></script>
<!--<button class="mdui-btn mdui-ripple mdui-color-blue mdui-center mdui-btn-raised">button</button>-->

<!--鼠标特效-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/Attention/%E9%BC%A0%E6%A0%87%E7%89%B9%E6%95%88.js"></script>

<script src="https://blog-static.cnblogs.com/files/yzx1798106406/activate-power-mode.js"></script>

<!--打字特效-->
<script src="https://blog-static.cnblogs.com/files/Attention/%E6%89%93%E5%AD%97%E7%89%B9%E6%95%88.js"></script>

<!---->

<script>
window.onload = function(){
  var viewcode = document.getElementsByClassName("toolbar_item command_expandSource expandSource");
   for (var i=0;i<viewcode.length;i++){
       viewcode[i] .innerHTML = '+ 展开代码';
   }

cardTran();
 }
</script>

<style>
#back-to-top {
    bottom: 28px;
    padding: 10px 10px;
    position: fixed;
    right: 35px;
    cursor: pointer;
    display:none;
    -webkit-animation: fadeInUp 0.5s cubic-bezier(0,0,0.58,1);
    animation-fill-mode: forwards;
}
</style>
<script>//window.onload = function(){
  var viewcode = document.getElementsByClassName("toolbar_item command_expandSource expandSource");
   for (var i=0;i<viewcode.length;i++){
       viewcode[i] .innerHTML = '+ 展开代码';
   }
/*
    var obtn = document.getElementById('back-to-top');  //获取回到顶部按钮的ID
    var clientHeight = document.documentElement.clientHeight;   //获取可视区域的高度
    var timer = null; //定义一个定时器
    var isTop = true; //定义一个布尔值，用于判断是否到达顶部
    window.onscroll = function(){         //滚动条滚动事件

        //获取滚动条的滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; 

        if(osTop >= clientHeight / 4){  //如果滚动高度大于可视区域高度，则显示回到顶部按钮
            obtn.style.display = 'block';
        }else{         //否则隐藏
            obtn.style.display = 'none';
        }

        //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到顶部按钮点击事件
        //设置一个定时器
        timer = setInterval(function(){
            //获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止滚动事件清除定时器
            if(isTop == 0){
                clearInterval(timer);
            }
        },30);
    }
//}*/
</script>

<script>
{
function getElementsByClass(key){
var arr = new Array();
var tags=document.getElementsByTagName("*");
    for(var i=0;i<tags.length;i++){
        if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){
            arr.push(tags[i]);
        }
    }
return arr;
}
var timer = window.setInterval(function(){
    var el = getElementsByClass('pace');
    if(el.length>0){
        var a = document.createElement('div');
        a.setAttribute('class', 'spinner');
        var b = document.createElement('div');
        b.setAttribute('class', 'spinner-icon');
        el[0].appendChild(a);
        a.appendChild(b);
        window.clearInterval(timer);
    }
}, 3);
}
</script>

<script>
function search(){
if(event.keyCode==13){
if ($('#toolbarsearchinput').val()!=''){
document.getElementsByClassName("input_my_zzk")[0].value=$('#toolbarsearchinput').val();
$('#btnZzk').click();
}
}
}
</script>

<script>
onScrollBackToTopFabShow();
refreashToolbarButtons();function refreashToolbarButtons(){
    var path=window.location.pathname;
    var url = document.URL;

    var home=document.getElementById("toolbarbuttonhome");
    var catalog=document.getElementById("toolbarbuttoncatalog");
    if (path=="/Attention"||path=="/Attention/"){
        home.style="display:none;";
    }
    if (url.indexOf('/p/')==-1){
        catalog.style="display:none;";
    }
}
function scrollbacktotop(){
   (function smoothscroll(){
      var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
      if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
      }
    }
)();
}
</script>
<button style="z-index:999999;" id="backtotop" class="mdui-fab mdui-ripple mdui-ripple-white mdui-color-pink mdui-fab-fixed mdui-fab-hide" onclick="javascript:scrollbacktotop();">
<i class="mdui-icon material-icons">keyboard_arrow_up</i>
</button>
<!--id =   back_to_top-->

<script>
function getScrollTop(){
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop){
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body){
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
function onScrollToolbarChangeColor(){
	var ele=document.getElementById("toolbarinner");
	var eleout=document.getElementById("toolbar");
	var bannerimg=document.getElementById("bannerimg");
	//console.log(getScrollTop());
	var now=getScrollTop();
	if (now>=393){
		if (ele.style!="") ele.style="";
		if (eleout.style!="") eleout.style="";
	}else{
		if (ele.style!="background-color:rgba(0,150,136,0.0) !important;") ele.style="background-color:rgba(0,150,136,0.0) !important;";
		if (eleout.style!="box-shadow:none !important;") eleout.style="box-shadow:none !important;";
	}
	if (now<250){
		bannerimg.style="opacity:1;";
	}else if (now>=250&&now<=400){
		bannerimg.style="opacity:"+(1-(now-250)/150)+";";
	}else if (now>400){
		bannerimg.style="opacity:0;";
	}
}
function onScrollBackToTopFabShow(){
	var ele=document.getElementById("backtotop");
	var now=getScrollTop();
	if (now>=410){
        if (hasClass("mdui-fab-hide",ele)) ele.classList.remove("mdui-fab-hide");
    }else{
        addClass("mdui-fab-hide",ele)
    }
}
$(document).scroll(function() {
    onScrollToolbarChangeColor();
    onScrollBackToTopFabShow();
});
onScrollToolbarChangeColor();
//var t = window.setInterval("onScrollToolbarChangeColor();",100);
//window.onscroll=function(){onScrollToolbarChangeColor();}
</script>
<script>
function hasClass(cla, element) {
    if(element.className.trim().length === 0) return false;
    var allClass = element.className.trim().split(" ");
    return allClass.indexOf(cla) > -1;
}

function addClass(cla,element){
    if(!hasClass(cla,element)){
        if(element.setAttribute){
            element.setAttribute("class",element.getAttribute("class")+" "+cla);
        }else{
            element.className = element.className+" "+cla;
        }

    }
}
addClass("mdui-appbar-with-toolbar",document.getElementsByTagName("body")[0]);
</script>

<script>
$(window).load(function () {
   $("#toolbar").scrollIndicator();
   onScrollToolbarChangeColor();
   onScrollBackToTopFabShow();
   refreashToolbarButtons();
  // var inst = new mdui.Headroom('#backtotop',{offset: 410, pinnedClass:"unpinnedfab", unpinnedClass:"mdui-fab-hide",});
});
setTimeout("refreashToolbarButtons();","100");setTimeout("refreashToolbarButtons();","250");setTimeout("refreashToolbarButtons();","500");setTimeout("refreashToolbarButtons();","1000");setTimeout("refreashToolbarButtons();","1500");setTimeout("refreashToolbarButtons();","2000");
</script>

<script>
/*博客底部上一篇下一篇导航*/
var addBottomContextBlogNavLoader;
var reg_detailchecker = new RegExp(/\/p\/(\d)/);
if (reg_detailchecker.test(document.location.href)){
    addBottomContextBlogNavLoader=setInterval(function(){checkBottomContextBlogNav()},50);
}
var havePre=false,haveNext=false,preLink,nextLink,preTitle,nextTitle;
function checkBottomContextBlogNav(){
    if (document.getElementById("post_next_prev")==undefined||document.getElementById("footer")==undefined){
        return;
    }
    if (document.getElementById("post_next_prev").getElementsByTagName("a").length<=0){
        return;
    }
    clearInterval(addBottomContextBlogNavLoader);
    var infoOfContextBlog=document.getElementById("post_next_prev").getElementsByTagName("a");
    /*if (infoOfContextBlog.length<=0){
        return;
    }*/
    for (var i=0;i<infoOfContextBlog.length;i+=2){
        if (infoOfContextBlog[i].innerText.indexOf("«")!=-1){
            setPreBlog(infoOfContextBlog[i+1].href,infoOfContextBlog[i+1].innerText);
        }
        if (infoOfContextBlog[i].innerText.indexOf("»")!=-1){
            setNextBlog(infoOfContextBlog[i+1].href,infoOfContextBlog[i+1].innerText);
        }
    }
    var stylePre="",styleNext="";
    /*if (!havePre || preLink==undefined){
        stylePre="style='visibility:hidden;'";
    }
    if (!haveNext || nextLink==undefined){
        styleNext="style='visibility:hidden;'";
    }*/
    var insretContextNav="<div class='footer-nav mdui-color-blue-600'><div class='mdui-container'><div class='mdui-row'><a "+stylePre+" href='"+preLink+"' class='mdui-ripple mdui-color-theme mdui-col-xs-2 mdui-col-sm-6 footer-nav-left'><div class='footer-nav-text'><i class='mdui-icon material-icons'>arrow_back</i><span class='footer-nav-direction mdui-hidden-xs-down'>上一篇</span><div class='footer-nav-chapter mdui-hidden-xs-down'>"+preTitle+"</div></div></a><a "+stylePre+"  href='"+nextLink+"' class='mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 footer-nav-right'><div class='footer-nav-text'><i class='mdui-icon material-icons'>arrow_forward</i><span class='footer-nav-direction'>下一篇</span><div class='footer-nav-chapter'>"+nextTitle+"</div></div></a></div></div></div>";
    $("#footer").after(insretContextNav);
    document.getElementById("post_next_prev").style.display="none";
}
function setPreBlog(link,title){
    havePre=true;
    preLink=link;
    preTitle=title;
}
function setNextBlog(link,title){
    haveNext=true;
    nextLink=link;
    nextTitle=title;
}
</script>
<style>
.footer-nav-text {
    color: #fff!important;
    box-sizing: border-box;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    line-height: 24px;
    padding-top: 24px;
    width: 100%;
    padding-bottom: 24px;
    margin-left: 150px;
}
.footer-nav {
    height: 96px;
}
.footer-nav-text .mdui-icon {
    padding-top: 23px;
    width: 24px;
    float: left;
    margin-right: 10px;
}
.footer-nav-text .footer-nav-direction {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 1px;
    opacity: 0.55;
}
.footer-nav > div > div > a[href="undefined"] {
    visibility: hidden;
}
</style>

<script>
/*优化评论体验*/
var reloadCommentToolbarLoader=setInterval(function(){checkReloadCommentToolbarAble();},50);
function checkReloadCommentToolbarAble(){
    if (document.getElementsByClassName("commentbox_title").length>0){
        clearInterval(reloadCommentToolbarLoader);
        $(document.getElementsByClassName("commentbox_title")[0]).after("<div class='mdui-btn-group' style='margin-top:8px;'><button onclick='insertUBB(\"tbCommentBody\",\"quote\")' mdui-tooltip='{content: \"添加引用\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>format_quote</i></button><button onclick='insertUBB(\"tbCommentBody\",\"b\")' mdui-tooltip='{content: \"加粗\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>format_bold</i></button><button onclick='insertUbbUrl(\"tbCommentBody\")' mdui-tooltip='{content: \"添加链接\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>insert_link</i></button><button onclick='insertIndent(\"tbCommentBody\")' mdui-tooltip='{content: \"首行缩进\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>format_indent_increase</i></button><button onclick='insertUbbCode()' mdui-tooltip='{content: \"插入代码\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>code</i></button><button onclick='OpenImageUploadWindow();' mdui-tooltip='{content: \"插入图片\", delay: 50}' type='button' class='mdui-btn mdui-btn-dense mdui-ripple'><i class='mdui-icon material-icons'>insert_photo</i></button></div>");
        document.getElementsByClassName("commentbox_title")[0].style.display="none";
        var addCommentBox="<div class='mdui-textfield mdui-textfield-floating-label' style='margin-left:3px;margin-top:-10px;margin-bottom:5px;'><label class='mdui-textfield-label'>评论内容</label><inputt id='tbCommentBody' class='mdui-textfield-input'></inputt></div>";
        for (var i=1;i<=3;i++)addCommentBox=addCommentBox.replace("inputt","textarea");//艹蛋的博客园检测机制
        $("#tbCommentBody").remove();
        $(document.getElementsByClassName("commentbox_main")[0]).append(addCommentBox);

        $(document.getElementsByClassName("commentbox_main")[0]).append("<button onclick='document.getElementById(\"btn_comment_submit\").click()' style='margin-top:8px;' class='mdui-btn mdui-color-pink mdui-ripple'>发送评论</button>");
        $(document.getElementsByClassName("commentbox_main")[0]).append("<button onclick='commentManager.Subscribe();' style='margin-left:5px;margin-top:8px;' class='mdui-btn mdui-ripple' mdui-tooltip='{content: \"订阅后有新评论时会邮件通知您\", delay: 200}'>订阅评论</button>");
        $(document.getElementsByClassName("commentbox_main")[0]).append("<button onclick='return CancelCommentEdit();' style='margin-left:5px;margin-top:8px;display:none;' class='mdui-btn mdui-ripple' mdui-tooltip='{content: \"取消编辑该条评论\", delay: 200}' id='changeCommentMaterialButton'>不改了</button>");
    }
}
var showOrHideCancelChangeCommentMaterialButton = setInterval(function(){showOrHideCancelChangeCommentMaterialButtonChecker();},50);
function showOrHideCancelChangeCommentMaterialButtonChecker(){
    if (document.getElementById("span_comment_canceledit")!=undefined){
        if (document.getElementById("span_comment_canceledit").style.display!="none"){
            if (document.getElementById("changeCommentMaterialButton").style.display!=""){
                document.getElementById("changeCommentMaterialButton").style.display="";
            }
        }else{
            if (document.getElementById("changeCommentMaterialButton").style.display!="none"){
                document.getElementById("changeCommentMaterialButton").style.display="none";
            }
        }
    }
}
</script>
<style>
#span_comment_canceledit,#tip_comment2{
    display: none !important;
}
#tip_comment {
    position: unset;
    color: #e91e63 !important;
}
</style>

<script>
/*优化阅读体验*/
var addCatalogLoader;
(function(){
    var reg_detailchecker = new RegExp(/\/p\/(\d)/);
    if (!reg_detailchecker.test(document.location.href)){
        return;
    }
    var sidebarhiddener= document.createElement('style');
    document.body.appendChild(sidebarhiddener);
    sidebarhiddener.innerHTML = '#leftcontentcontainer,#sideBarMain > .newsItem:nth-child(2){display:none;}';
    addCatalogLoader = setInterval(function(){checkCatalogLoaderAble()},50);
})();
function checkCatalogLoaderAble(){
    if ($("#sideBarMain").length<=0){
        return;
    }
    clearInterval(addCatalogLoader);
    addCatalog();
    $(window).resize(function() {
        $("#catalog")[0].style="max-height:"+(window.innerHeight-$("#toolbar")[0].offsetHeight-30)+"px";
    });
    $(window).scroll(function() {
        var scrollY = $(document).scrollTop();
        var scrollMaxFloatNum=$("#main").offset().top-$("#toolbar")[0].offsetHeight+3;
        if (scrollY > scrollMaxFloatNum){
            $('#catalog').addClass('sidebarcatalogfixed');
        }
        else {
            $('#catalog').removeClass('sidebarcatalogfixed');
        }

        if (($("#post_detail").offset().top+$("#post_detail")[0].offsetHeight)-$(window).scrollTop()-$("#toolbar")[0].offsetHeight-$("#blog_post_info_block")[0].offsetHeight-10<0){
            $("#catalog").removeClass("sidecatalogshow");
            $("#catalog").addClass("sidecataloghide");
        }else{
            $("#catalog").removeClass("sidecataloghide");
            $("#catalog").addClass("sidecatalogshow");
        }
     });
}
var s,headings=new Array();//TitleDomTree
function addCatalog(){
    $("#sideBarMain").prepend("<div id='catalog' class='newsItem mdui-card mdui-hoverable' style='max-height:"+(window.innerHeight-$("#toolbar")[0].offsetHeight-30)+"px'></div>");
    s=$("#cnblogs_post_body")[0].childNodes;
    dfsGetTitle(2,0,s.length-1,"node");
    if ($("#catalog")[0].innerHTML==""){
        $("#catalog")[0].innerHTML="<div style='text-align:center;margin-top:10px;margin-bottom:15px;'><i class='mdui-icon material-icons mdui-text-color-grey-400' style='font-size:80px;pointer-events:none;cursor:default;user-select:none;'>view_day</i></br><span class='mdui-icon material-icons mdui-text-color-grey-600' style='font-size:16px;margin-top:8px;'>本文没有目录</span></div>";
    }
    $(window).scroll(function() {//根据章节切换
        var scrollY = $(document).scrollTop();
        var lastActive=new Array();
        var nowActiveEle;
        for (var i=0;i<headings.length;i++){
            if ($("#catalog-"+headings[i].id).hasClass("active")){
                lastActive.push(headings[i]);
            }
            var toolbarHeight=document.getElementById("toolbar").offsetHeight+5;
            //console.log(headings[i]);
            //console.log(offsetHeight);
            //console.log($(headings[i]).offset().top-$(document).scrollTop());
            if (($(headings[i]).offset().top-$(document).scrollTop()-headings[i].offsetHeight/2) < toolbarHeight){
                nowActiveEle = headings[i];
            }
        }
        if (nowActiveEle!=undefined){
            if (!$("#catalog-"+nowActiveEle.id).hasClass("active")){
                $(("#catalog-"+nowActiveEle.id)).addClass("active");
            }
        }
        //console.log(lastActive);
        if (lastActive.length>0){
            for (var i=0;i<lastActive.length;i++){
                if (lastActive[i]!=nowActiveEle){
                    $("#catalog-"+ lastActive[i].id).removeClass("active");
                }
            }
        }
    });
}
function getNextTitle(type,l,r){
    for (var i=l;i<=r;i++){
     //   console.log(s[i].tagName.toLocaleLowerCase());
        var tagname=s[i].tagName;
        if (tagname==undefined){
            continue;
        }
        tagname=tagname.toLocaleLowerCase();
        if (tagname==type){
            return i-1;
        }
    }
    return r;
}
function dfsGetTitle(deep,l,r,nowId){
    var tarTag="h"+deep;
    if (deep>4){
        return;
    }
    var countTitles=0;
    for (var i=l;i<=r;i++){
        if (s[i].tagName==undefined){
            continue;
        }
        if (s[i].tagName.toLocaleLowerCase()!=tarTag){
            continue;
        }
        countTitles++;
        var giveId=nowId+"-"+countTitles;
        s[i].id=giveId;
        addCatalogItem(deep,giveId,s[i].innerText);
        headings.push(s[i]);
        //console.log(i+":"+getNextTitle("h"+deep,i+1,r));
        dfsGetTitle(deep+1,i+1,getNextTitle("h"+deep,i+1,r),giveId);
    }
}
function addCatalogItem(hType,id,content){
    var hClass="catalog-h"+hType;
    var nodeShowId=id;
    nodeShowId=nodeShowId.replace("node-","");
    nodeShowId=nodeShowId.replace("-",".");
    if (nodeShowId.indexOf(".")==-1){
        nodeShowId+=".0";
    }
    $("#catalog").append("<div id='catalog-"+id+"' class='catalog mdui-ripple "+hClass+"' onclick='getToTarget(\""+id+"\")'><span>"+nodeShowId+"</span>"+content+"</div>");
}
function getToTarget(tarid){
	var tartitle = document.getElementById(tarid);
	window.scrollTo({
	    top: $(tartitle).offset().top-tartitle.offsetHeight/2-document.getElementById("toolbar").offsetHeight+5,
	    behavior: "smooth"
	});
}
</script>
<style>
@media screen and (max-width:1200px) {
    #catalog{
        display: none;
    }
}
.catalog{
    font-size: 15px;
    padding: 6px 8px;
    transition: all 0.3s;
    border-radius: 2px;
}
.catalog:hover{
    color: rgba(255,64,129,0.8);
}
.catalog.active{
    font-weight: bold;
    color: rgba(255,64,129,1);
}
.catalog > span{
    font-weight: bold;
    margin-right: 8px;
}
.catalog-h3{
    padding-left: 20px;
}
.catalog-h4{
    padding-left: 40px;
}
.sidebarcatalogfixed {
    position: fixed !important;
    top: 80px;
    width: 325px;
}
#catalog{
    padding-left: 7px;
    overflow-y: auto;
}
.sidecataloghide{
    opacity:0;
    animation: 0.2s hidefadeing ease-in;
    -webkit-animation: 0.2s hidefadeing ease-in;
    pointer-events: none;
    cursor: default;
}
.sidecatalogshow{
    opacity:1;
    animation: 0.2s showfadeing ease-in;
    -webkit-animation: 0.2s showfadeing ease-in;
}
@keyframes hidefadeing{
   from{opacity:1;transform:scale(1);}
   to{opacity:0;transform:scale(0.98);}
}
@keyframes showfadeing{
   from{opacity:0;transform:scale(0.98);}
   to{opacity:1;transform:scale(1);}
}
</style>

<!--Day视图美化-->
<script>
    var dayViewChangeCounter = window.setInterval("dayViewChange();",20);
    function dayViewChange(){
        if (document.getElementsByClassName("day").length>0){
            window.clearInterval(dayViewChangeCounter);
        }else{
            return;
        }
        /*分开同一天博客*/
        var s=document.getElementById("mainContent").getElementsByClassName("day");
        var t,tmp;
        for (var i=0;i<s.length;i++){
            tmp=s[i].innerHTML;
            t=tmp.split("<div class=\"postSeparator\"></div>");
            for (var j=0;j<t.length;j++){
            $(s[i]).after("<div class='day mdui-card mdui-hoverable'>"+t[j]+"</div>");
            }
            s[i].remove();
        }

        /*美化预览样式*/
        s=document.getElementById("mainContent").getElementsByClassName("day");
        var m,href,content;
        for (var i=0;i<s.length;i++){
            tmp=s[i].getElementsByClassName("postDesc")[0].innerText;
            t=tmp.split(" ");
            t[5]=t[5].replace("阅读(",""); t[5]=t[5].replace(")","");t[6]=t[6].replace("评论(",""); t[6]=t[6].replace(")","");
            //console.log(t);
            href=s[i].getElementsByClassName("postCon")[0].getElementsByClassName("c_b_p_desc")[0].getElementsByTagName("a")[0].href;
            s[i].getElementsByClassName("postCon")[0].getElementsByClassName("c_b_p_desc")[0].getElementsByTagName("a")[0].remove();

            content=s[i].getElementsByClassName("postCon")[0].getElementsByClassName("c_b_p_desc")[0].innerText;
            content=content.substr(4);
            s[i].getElementsByClassName("postCon")[0].getElementsByClassName("c_b_p_desc")[0].innerText=content;

            if (s[i].getElementsByClassName("dayTitle").length>0) $(s[i].getElementsByClassName("dayTitle")[0]).remove();

            //console.log(href);
            m="<div class='mdui-divider underline'></div>";
            m+="<div class='underPostDetails'>";
            m+="<i class='mdui-icon material-icons mdui-text-color-grey'>remove_red_eye</i> <span class='mdui-icon mdui-text-color-grey'>"+t[5]+"</span> <span class='space'></span>";
            m+="<i class='mdui-icon material-icons mdui-text-color-grey'>message</i> <span class='mdui-icon mdui-text-color-grey'>"+t[6]+"</span> <span class='space'></span>";
            m+="<i class='mdui-icon material-icons mdui-text-color-grey'>access_time</i> <span class='mdui-icon mdui-text-color-grey'>"+t[2]+" "+t[3]+"</span> <span class='space'></span>";
            m+="<a href='"+href+"' class='mdui-btn mdui-btn-dense mdui-ripple mdui-text-color-pink mdui-float-right' style='margin-top:-5px;'>阅读</a>";
            m+="</div>";
            $(s[i]).append(m);
            s[i].getElementsByClassName("postDesc")[0].style="display:none;";
            /*tmp的格式如下  posted @ 2018-09-24 18:49 abc2237512422 阅读(123) 评论(456)*/
        }

    }
    var countTranNum=0;
    var TranCardCounter = window.setInterval("cardTran();",50);
    function cardTran(){
        countTranNum++;
        if (countTranNum>5){
            window.clearInterval(dayViewChangeCounter);
        }
        readyToTranToCard("class","newsItem");
        readyToTranToCard("class","sidebar-block");
        readyToTranToCard("id","sidebar_categories");
        readyToTranToCard("id","comment_form_container");
        readyToTranToCard("id","post_detail");
        readyToTranToCard("id","under_post_kb");
        readyToTranToCard("id","");
    }
    function readyToTranToCard(type,idOrClass){
        if (type=="id"){
            tranToCard(document.getElementById(idOrClass));
        }else{
            for (var i=0;i<document.getElementsByClassName(idOrClass).length;i++){
                tranToCard(document.getElementsByClassName(idOrClass)[i]);
            }
        }
    }
    function tranToCard(ele){
        $(ele).addClass("mdui-card mdui-hoverable");
    }
</script>
<style>
.underPostDetails>i,.underPostDetails>span{
    font-size:16px;
}
.underPostDetails {
    margin-top: 15px;
    margin-bottom: 8px;
    margin-left: 3px;
}
.underPostDetails > .space{
    width:5px;
    display:inline-block;
}
</style>

<!-- Music_Player -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="2489378461" data-lrctype="0" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-autoplay="false" data-theme="#000000">
</div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

<div class="mdui-fab-wrapper" id="fab">
	<button class="mdui-fab mdui-ripple mdui-color-blue-600" onclick="javascript:scrollbacktotop();">
	<i class="mdui-icon material-icons" id="fabouticon">keyboard_arrow_up</i>
    </button>
</div>
<!--id =   back_to_top-->

<!--
<button id="box" class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 400){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 200;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

<button id="tt" class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>
<script>
tt.onclick = function(){
scrollTo(1000,600);
}
</script>
-->