Skip to content

Instantly share code, notes, and snippets.

@wy-ei
Created July 1, 2018 14:08
Show Gist options
  • Save wy-ei/de78a1368c160cee9c2b9e33c3d5ae0b to your computer and use it in GitHub Desktop.
Save wy-ei/de78a1368c160cee9c2b9e33c3d5ae0b to your computer and use it in GitHub Desktop.
html {
font-size: 100px;
background: #fff;
}
body{
font-size: .14rem;
position: relative;
min-height: 100vh;
color: #000;
font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans;
}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
margin: 0;
padding: 0;
}
/* 要注意表单元素并不继承父级 font 的问题 */
button, input, select, textarea {
font: 400 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans;
}
a {
color: #000;
transition: color 300ms;
cursor: pointer;
}
a:hover {
text-decoration: none;
color: #e50053;
}
.clear {
clear: both
}
table {
border-collapse: collapse;
border-spacing: 0;
max-width: 850px
}
/* layout --> */
/* 响应式布局 */
#blogTitle,
#navigator,
#main,
#footer::after {
margin: auto!important;
width: 900px
}
@media screen and (min-width: 1260px) {
#blogTitle,
#navigator,
#main,
#footer::after {
width: 1200px;
}
}
@media screen and (max-width: 1260px) {
#blogTitle,
#navigator,
#main,
#footer::after {
width: 90%;
}
#mainContent{
width: 100%!important;
}
#sideBar{
width: 100%!important;
margin: 0!important;
}
}
@media screen and (max-width: 1023px) {
#blogTitle,
#navigator,
#main,
#footer::after {
width:95%!important;
}
}
#home {
margin: 0 auto;
padding-bottom: 100px;
}
/* <--- layout end */
/* sidebar --> */
#sideBar {
margin-left: 20px;
width: 290px;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: visible;
word-break: break-all
}
#sideBar ul {
word-break: break-all;
list-style: none
}
#sideBar li {
list-style: none
}
/* <-- sidebar end */
/* header */
#header{
background-color: #f9f9f9;
background-image: linear-gradient(#f8f8f8, #f5f5f5);
margin-bottom: 50px;
border-bottom: 1px solid #dedede;
}
#blogTitle{
padding: .3rem 0 .4rem 0;
}
#blogTitle h1{
padding: 0!important;
font-size: .22rem;
margin-bottom: .2rem;
}
#blogTitle h2{
padding: 0!important;
color: inherit;
font-size: .18rem;
}
#blogTitle a{
text-decoration: none;
color: inherit;
display: inline-block;
}
#blogTitle a:hover{
color: red;
}
#navigator{
padding-bottom: .1rem;
}
#navList{
list-style: none;
}
.blogStats{
display: none;
}
#navList li {
font-size: .14rem;
display: inline;
}
#navList li a{
margin-right: .2rem;
text-decoration: none;
}
#navList li:empty,
#navList #blog_nav_newpost {
display: none;
}
/* header end */
/* home posts list */
#mainContent .forFlow {
float: none;
width: 100%
}
.day .postSeparator {
border-top: 1px solid #eee;
margin: 20px 0 45px 0;
}
.dayTitle {
font-size: .12rem;
}
.dayTitle a {
text-decoration: none;
}
.day{
padding-bottom: 0.2rem;
margin: 0.45rem 0px;
border-bottom: 1px solid #eee;
}
.dayTitle{
height: 0.15rem;
font-size: 14px;
color: #555;
margin-right: 1em;
padding: 0.1rem 0px;
display: none;
}
.postTitle {
font-size: 0.18rem;
color: rgb(79, 79, 79);
margin-bottom: 0.1rem;
}
.postCon .c_b_p_desc{
font-size: 0.14rem;
color: rgb(63, 63, 63);
line-height: 2em;
margin: 16px 0px 0px;
}
.postDesc{
line-height: 1.5em;
margin-right: 1em;
padding: 0.1rem 0px;
color: #777;
}
.postDesc a{
margin-left: 10px;
text-decoration: underline;
}
/* home posts list end */
#calendar table a:hover {
color: #fff;
text-decoration: none;
background-color: #f60
}
.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 {
text-align: right;
margin-bottom: 10px
}
.entrylistItemPostDesc a:hover {
color: #f60
}
.topicListFooter .pager a:hover,.topicListFooter .pager span {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #9ab26b;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.09);
-moz-box-shadow: 0 0 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.09);
box-shadow: 0 0 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.09);
height: 40px;
line-height: 40px;
margin-top: 14px;
color: #fff;
display: inline-block;
padding: 0 15px;
text-decoration: none;
border: none
}
.divPhoto:hover {
border-color: #08c;
box-shadow: 3px 3px 3px rgba(0,0,0,.3)
}
/* footer */
#footer {
background-color: #f3f3f3;
border-top: 1px solid #dedede;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
font-size: 0;
}
#footer::after {
display: block;
content: "Copyright ©2018 wy-ei";
font-size: .12rem;
line-height: 40px;
color: #333;
height: 40px;
}
/* footer end */
/* post --> */
.postBody{
padding: 1em;
}
#mainContent {
background: none;
float: left;
overflow: visible;
text-overflow: ellipsis;
width: 890px;
word-break: break-all;
}
#topics {
background: #fff;
overflow: hidden;
border: 1px solid #ccc;
}
#topics .postTitle {
font-size: 24px;
background: #f5f5f5;
line-height: 50px;
padding: 0 15px;
color: #333;
margin-bottom: 0;
border-bottom: 1px solid #dedede;
}
#topics .postTitle a {
text-decoration:none;
}
#topics .postBody blockquote {
border: none;
border-left: 5px solid #ddd;
margin: 0;
padding-left: 10px
}
#topics .postBody blockquote p {
margin: 0;
padding: 0;
color: #777
}
.postTitle a {
text-decoration: none;
}
.postTitle a:hover {
color: red;
text-decoration: none
}
#post_next_prev {
line-height: 200%;
margin: 10px 0;
font-size: 14px
}
#post_next_prev a {
color: #333
}
#post_next_prev a:hover {
border-bottom: 1px dotted #ff5e52;
color: #ff5e52
}
#topics .postDesc {
font-size: 14px;
margin: 10px 0;
padding: 0 10px;
}
#topics .postDesc a:hover {
color: #9ab26b
}
/* <--- post end */
.pfl_feedback_area_title {
margin-bottom: 1em
}
.pfl_feedbackCon {
margin: .5em
}
img {
border: none
}
#BlogMusicPayer,#flashContent, {
display: block;
left: 719px;
position: absolute;
top: 45px
}
#user .user_info a:hover {
color: rgba(255,255,255,1)
}
#mynav li:hover {
background-color: #99b16b;
color: #fff
}
#mynav li,#profile_block a,.catListTag ul li,.catListTag ul li:before,.catListPostCategory ul li a,.catListPostArchive ul li a,.recent_comment_title a,.catListView ul li a,.catListFeedback ul li a {
-webkit-transition: all .2s ease-in;
-o-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
transition: all .1s ease-out
}
#cnblogs_post_body {
color: #333;
line-height: 1.8;
margin-bottom: 50px;
}
#cnblogs_post_body h2 {
margin: 20px 0
}
#cnblogs_post_body p a:hover,#cnblogs_post_body ol li a:hover,#cnblogs_post_body ul li a:hover {
border-bottom: 1px dotted #9ab26b
}
#cnblogs_post_body ol,#cnblogs_post_body ul {
margin: 0 0 1em;
margin-left: 40px;
padding: 0
}
#EntryTag {
font-size: 14px;
color: #7e8c8d;
font-weight: bold
}
#EntryTag a {
text-decoration: none;
color: #9fa4a4;
font-weight: normal;
margin-left: 10px
}
#BlogPostCategory a {
margin-left: 10px
}
#BlogPostCategory a:hover {
color: #ff5e52;
border-bottom: 1px dotted #ff5e52
}
#mystart ul li a.a,#mystart ul li a.b {
float: left;
margin-right: 12px;
text-decoration: none
}
#myinfo a:hover {
border-bottom: 1px dotted #9ab26b
}
.feedbackManage {
line-height: 26px;
float: right
}
.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
}
.entrylistPosttitle a.desc_img_wrap {
margin: 0;
margin-bottom: 10px;
display: block;
position: relative;
height: 320px
}
.c_b_p_desc {
font-size: 14px;
color: #333;
line-height: 200%
}
a.c_b_p_desc_readmore {
color: #000;
text-decoration: underline;
}
.entrylistItemPostDesc a:hover {
color: #9ab26b
}
#leftcontentcontainer {
margin-top: 20px
}
.myad {
padding: 20px;
background: #fff;
margin-top: 20px
}
.mySearch {
background: #fff
}
/* sidebar pannel --> */
.catListTitle {
border: 1px solid #ccc;
margin: 0;
overflow: hidden;
padding-left: 1em;
background: #f5f5f5;
font-size: 16px;
color: #757575;
line-height: 50px;
}
#profile_block {
color: #777;
padding: 15px;
line-height: 1.8;
margin-top: 0!important;
border: 1px solid #ccc;
border-top: none;
}
#profile_block a {
text-decoration: none;
}
#profile_block a:hover {
border-bottom: 1px dotted;
}
/* <-- end */
#widget_my_zzk {
padding: 15px 0 0 15px;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
margin: 0!important;
}
#widget_my_google {
border: 1px solid #ccc;
padding: 10px 0 15px 15px;
position: relative;
margin: 0px;
border-top: none;
border-collapse: separate;
}
.input_my_zzk {
height: 35px;
border: 1px solid #ddd;
outline: none;
line-height: 35px;
font-size: 13px;
width: 240px;
padding: 0 10px;
}
input.btn_my_zzk {
font-size: 14px;
height: 37px;
width: 70px;
background: #ddd;
text-align: center;
line-height: 37px;
border: none;
outline: none;
display: table-cell;
color: #222;
position: relative;
}
input.btn_my_zzk:hover {
cursor: pointer;
background: #aaa;
}
.catListTag ul li a:hover {
text-decoration: none;
color: #fff
}
.catListPostCategory {
background: #fff
}
.catListPostCategory ul {
border: 1px solid #dedede;
border-top: none
}
.catListPostCategory ul li {
line-height: 44px;
border-bottom: 1px solid #e9e9e9;
padding-left: 25px;
font-size: 15px;
color: #777
}
.catListPostCategory ul li a,.catListPostArchive ul li a,.catListArticleCategory ul li a,.recent_comment_title a,.catListView ul li a,.catListFeedback ul li a {
color: #777;
text-decoration: none
}
.catListPostCategory ul li a:hover,.catListPostArchive ul li a:hover,.catListArticleCategory ul li a:hover,.recent_comment_title a:hover,.catListView ul li a:hover,.catListFeedback ul li a:hover {
color: #ff5e52;
border-bottom: 1px dotted #ff5e52
}
.catListPostArchive {
background: #fff
}
.catListPostArchive ul {
border: 1px solid #dedede;
border-top: none
}
.catListPostArchive ul li {
line-height: 44px;
border-bottom: 1px solid #e9e9e9;
padding-left: 25px;
font-size: 15px;
color: #7e8c8d
}
.catListArticleCategory {
width: 290px;
padding-top: 20px;
background: #fff
}
.catListImageCategory {
width: 290px;
padding-top: 20px;
background: #fff
}
/* comment --> */
.catListComment {
background: #fff
}
.recent_comment_title {
color: #7e8c8d;
border: none!important
}
.recent_comment_body,.recent_comment_author {
color: #9fa4a4;
padding-top: 0!important
}
.recent_comment_body {
border-bottom: none!important
}
.recent_comment_author {
border-bottom: 1px solid #e9e9e9
}
.commentform{
margin: 0!important;
}
.commentbox_main{
margin-top: 10px;
}
#comment_form_container .comment_textarea{
margin-top: 10px;
width: 100%;
padding: 10px;
box-sizing:border-box;
}
#comment_form_container .commentbox_title{
width: 100%;
}
#blog-comments-placeholder:empty{
display: none;
}
#blog-comments-placeholder {
padding: 20px;
border: 1px solid #dedede;
padding-top: 0;
margin-top: 20px;
background: #fff
}
#comment_nav {
margin: 10px 0
}
#comment_nav a:hover {
color: red;
}
/* <----- comment */
.catListView {
background: #fff;
margin-top: 20px
}
.catListFeedback {
background: #fff;
margin-top: 20px
}
.catListFeedback ul li {
border-bottom: 1px solid #e9e9e9;
padding: 8px 0
}
.catListLink {
display: none
}
.clearFix:after {
clear: both;
display: block;
height: 0;
line-height: 0;
content: "";
visibility: hidden
}
.feedbackItem {
margin-top: 10px
}
.feedbackCon {
border: 1px dashed #dedede;
padding: 10px;
margin: 10px 0
}
#site_nav_under {
border: 1px solid #dedede;
padding: 20px;
background-color: #fff
}
/* 分类 ---> */
.entrylist{
background: #fff;
border: 1px solid #d9d9d9;
margin-bottom: 25px;
overflow: hidden;
}
.entrylist h1 {
margin: 0;
overflow: hidden;
border-bottom: 1px solid #e0e0e0;
background: #f5f5f5;
font-size: 16px;
color: #757575;
line-height: 50px;
text-indent: 1em;
}
.entrylistDescription{
display: none;
}
.entrylistItem {
padding-top: 37px;
margin: 0 14px 35px;
border-top: 1px solid #EEE;
margin-bottom: 20px;
}
.entrylist .entrylistItem:nth-child(3){
border-top: 0!important;
}
.entrylist .postSeparator {
display: none
}
.entrylistItemTitle {
color: #333;
}
.entrylistPosttitle {
margin: 0;
font-size: 18px;
font-weight: 400;
color: #4f4f4f;
}
.entrylistPosttitle a{
color:#333;
}
.entrylistPosttitle a:hover {
color: red;
text-decoration: none;
}
.entrylistPostSummary {
padding: 15px 0;
clear: both
}
.entrylistItemPostDesc {
clear: both;
color: #777;
float: none;
text-align: left;
line-height: 2em;
}
.entrylistItemPostDesc a {
color: #777;
margin: 0 5px;
}
.topicListFooter {
margin: 45px 0;
text-align: left;
}
#nav_next_page {
line-height: 40px
}
#nav_next_page a {
text-decoration: underline;
}
/* <--- 分类 */
#myposts h3 {
height: 50px;
line-height: 50px;
margin-bottom: 10px;
font-size: 28px!important
}
#myposts .PostList {
background: #fff;
padding: 20px;
border: 1px solid #dedede;
margin: 0 0 -1px 0!important
}
#myposts .PostList:hover {
border: 1px solid #169fe6;
position: relative;
z-index: 10
}
#myposts .PostList a {
display: block;
font-size: 16px;
color: #333
}
#myposts .PostList a:hover {
color: #ff5e52
}
.cnblogs-post-body {
color: #333
}
.sidebar-block {
margin-bottom: 20px;
background-color: #fff
}
.sidebar-block ul {
border: 1px solid #dedede;
border-top: none
}
.sidebar-block ul li {
line-height: 2;
border-bottom: 1px solid #e9e9e9;
padding: 8px 15px;
font-size: 14px;
color: #777
}
.sidebar-block ul li:last-of-type{
border-bottom: 0;
}
.sidebar-block ul li a {
color: #777;
text-decoration: none
}
.sidebar-block ul li a:hover {
color: #ff5e52;
border-bottom: 1px dotted #ff5e52
}
#cnblogs_post_body img {
max-width: 800px
}
#cnblogs_post_body a:link {
text-decoration: none;
}
/* news & ad */
#cnblogs_c1,
#under_post_news,
#under_post_kb,
#ad_t2{
display:none;
}
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_79545_yc3rhljwr9.eot?t=1530443143378'); /* IE9*/
src: url('//at.alicdn.com/t/font_79545_yc3rhljwr9.eot?t=1530443143378#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('//at.alicdn.com/t/font_79545_yc3rhljwr9.ttf?t=1530443143378') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_79545_yc3rhljwr9.svg?t=1530443143378#iconfont') format('svg'); /* iOS 4.1- */
}
#blog_nav_myhome:before,
#blog_nav_contact:before,
#blog_nav_admin::before,
#blog_go_up:before {
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#blog_nav_contact:before {
content: "\e67e";
margin-right: 10px;
}
#blog_nav_admin:before {
content: "\e7f6";
margin-right: 10px;
}
#blog_nav_myhome:before {
margin-right: 10px;
content: "\e734"; }
#blog_go_up:before {
content: "\e611";
}
#blog_go_up{
position: fixed;
bottom: 50px;
right: 10px;
text-decoration: none;
background: #ddd;
padding: 5px 10px;
border-radius: 3px;
}
#blog_go_up:hover{
background:#aaa;
}
/* 块/段落引用 */
blockquote {
position: relative;
color: #999;
font-weight: 400;
border-left: 2px solid #1abc9c;
padding-left: 1em;
margin: 1em 3em 1em 0;
}
@media only screen and ( max-width: 640px ) {
blockquote {
margin: 1em 0;
}
}
/* Firefox 以外,元素没有下划线,需添加 */
acronym, abbr {
border-bottom: 1px dotted;
font-variant: normal;
}
/* 添加鼠标问号,进一步确保应用的语义是正确的(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) */
abbr {
cursor: help;
}
/* 一致的 del 样式 */
del {
text-decoration: line-through;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: 400;
}
/* 去掉列表前的标识, li 会继承,大部分网站通常用列表来很多内容,所以应该当去 */
ul, ol {
list-style: none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption, th {
text-align: left;
}
q:before, q:after {
content: '';
}
/* 统一上标和下标 */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
}
:root sub, :root sup {
vertical-align: baseline; /* for ie9 and other modern browsers */
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
a:hover {
text-decoration: underline;
}
/* 下划线继承字体颜色 */
#cnblogs_post_body.cnblogs-markdown a {
border-bottom: 1px solid;
}
#cnblogs_post_body.cnblogs-markdown a:hover {
color: #555;
text-decoration: none;
}
/* 默认不显示下划线,保持页面简洁 */
ins, a {
text-decoration: none;
}
/* 专名号:虽然 u 已经重回 html5 Draft,但在所有浏览器中都是可以使用的,
* 要做到更好,向后兼容的话,添加 class=#cnblogs_post_body.cnblogs-markdown-u" 来显示专名号
* 关于 <u> 标签:http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
* 被放弃的是 4,之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
* 一篇关于 <u> 标签的很好文章:http://html5doctor.com/u-element/
*/
u, #cnblogs_post_body.cnblogs-markdown-u {
text-decoration: underline;
}
/* 标记,类似于手写的荧光笔的作用 */
mark {
background: #fffdd1;
border-bottom: 1px solid #ffedce;
padding: 2px;
margin: 0 5px;
}
code{
color: #a31515;
font-family: Menlo,Monaco,Lucida Console,Liberation Mono, DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace, serif;
}
/* 代码片断 */
pre code, pre tt {
color: #673ab7;
line-height: 1.2em;
}
pre {
border: 1px solid #eaeaea;
padding: .5em;
margin: 40px 0;
white-space: pre;
overflow: auto;
}
/* 一致化 horizontal rule */
hr {
border: none;
border-bottom: 1px solid #cfcfcf;
margin-bottom: 0.8em;
height: 10px;
}
/* 底部印刷体、版本等标记 */
small,
/* 图片说明 */
figcaption {
font-size: 0.9em;
color: #888;
}
strong, b {
font-weight: bold;
color: #000;
}
/* 可拖动文件添加拖动手势 */
[draggable] {
cursor: move;
}
/* 强制文本换行 */
.textwrap, .textwrap td, .textwrap th {
word-wrap: break-word;
word-break: break-all;
}
.textwrap-table {
table-layout: fixed;
}
/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */
.serif {
font-family: Palatino, Optima, Georgia, serif;
}
/* 保证块/段落之间的空白隔行 */
#cnblogs_post_body.cnblogs-markdown p, #cnblogs_post_body.cnblogs-markdown pre, #cnblogs_post_body.cnblogs-markdown ul, #cnblogs_post_body.cnblogs-markdown ol, #cnblogs_post_body.cnblogs-markdown dl, #cnblogs_post_body.cnblogs-markdown form, #cnblogs_post_body.cnblogs-markdown hr, #cnblogs_post_body.cnblogs-markdown table,
#cnblogs_post_body.cnblogs-markdown blockquote {
margin: 1em 0;
line-height: 2em;
font-size: 1em;
}
#cnblogs_post_body.cnblogs-markdown pre{
background: #f1f1f1;
display: block;
overflow: auto;
line-height: 1.8em;
border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal!important;
color: #000;
line-height: 1;
}
/* 标题应该更贴紧内容,并与其他块区分,margin 值要相应做优化 */
#cnblogs_post_body.cnblogs-markdown h1, #cnblogs_post_body.cnblogs-markdown h2, #cnblogs_post_body.cnblogs-markdown h3, #cnblogs_post_body.cnblogs-markdown h4, #cnblogs_post_body.cnblogs-markdown h5, #cnblogs_post_body.cnblogs-markdown h6 {
margin: 1em 0;
line-height: 1.6;
}
#cnblogs_post_body.cnblogs-markdown>h1:first-of-type{
margin-top: 0;
}
#cnblogs_post_body.cnblogs-markdown h1 {
font-size: 2em;
border-bottom: 1px solid #d1d1d1;
}
#cnblogs_post_body.cnblogs-markdown h2 {
font-size: 1.5em;
border-bottom: 1px dotted #d1d1d1;
}
#cnblogs_post_body.cnblogs-markdown h3 {
font-size: 1.4em;
border-bottom: 1px dotted #d1d1d1;
}
#cnblogs_post_body.cnblogs-markdown h4 {
font-size: 1.2em;
}
#cnblogs_post_body.cnblogs-markdown h5{
font-size: 1em;
}
#cnblogs_post_body.cnblogs-markdown h6 {
font-size: 0.8em;
}
/* 在文章中,应该还原 ul 和 ol 的样式 */
#cnblogs_post_body.cnblogs-markdown ul {
margin-left: 1.3em;
list-style: disc;
}
#cnblogs_post_body.cnblogs-markdown ol {
list-style: decimal;
margin-left: 1.9em;
}
#cnblogs_post_body.cnblogs-markdown li ul, #cnblogs_post_body.cnblogs-markdown li ol {
margin-bottom: 0.8em;
margin-left: 2em;
}
#cnblogs_post_body.cnblogs-markdown li ul {
list-style: circle;
}
/* 同 ul/ol,在文章中应用 table 基本格式,color 继承外层元素的颜色 */
#cnblogs_post_body.cnblogs-markdown table th, #cnblogs_post_body.cnblogs-markdown table td {
border: 1px solid #ddd;
padding: 0.5em 1em;
}
#cnblogs_post_body.cnblogs-markdown table th {
background: #fbfbfb;
}
#cnblogs_post_body.cnblogs-markdown table thead th {
background: #f1f1f1;
}
#cnblogs_post_body.cnblogs-markdown table caption {
border-bottom: none;
}
/* 去除 webkit 中 input 和 textarea 的默认样式 */
#cnblogs_post_body.cnblogs-markdown input, #cnblogs_post_body.cnblogs-markdown textarea {
border-radius: 0;
}
legend, caption {
color: #000;
font-weight: inherit;
}
#cnblogs_post_body.cnblogs-markdown em,
#cnblogs_post_body.cnblogs-markdown i {
font-style: italic;
}
/* Responsive images */
#cnblogs_post_body.cnblogs-markdown img {
max-width: 100%;
margin: auto;
display: block;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
padding: 0px!important;
font-size: 14px!important;
border: 0!important;
line-height: 2em!important;
background: none!important;
font-family: Source Code Pro,Courier,Courier New,monospace!important;
}
.cnblogs-markdown code,.cnblogs-post-body code {
padding: 0 5px!important;
font-size: 14px!important;
border: none!important;
}
@media screen and (max-width: 1023px) {
#topics{
border: none!important;
}
.postBody{
padding: 0em!important;
}
#topics .postTitle {
padding: 0;
background: #fff;
}
#topics .postDesc{
padding: 0;
}
}
@wy-ei
Copy link
Author

wy-ei commented Dec 6, 2018

外观

image

使用方法

1. 页脚增加代码

<a href="#top" id="blog_go_up"></a>

2. 修改上面的 CSS

修改上面 CSS 中 333 行 content 的内容

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment