分享自用博客园主题样式
程序员文章站
2022-05-17 14:43:06
1. 博客皮肤选择 SimpleMemory 因为简单,所以爱~ 2. 在”页面定制CSS代码“中填入以下内容 重要提示:侧边栏蓝色风格,有的模块可能遗漏,需要请自行在CSS样式中的“侧边栏”加上对应DIV的id或者class 3. 在“首页Html代码”中填入以下内容: 说明:此样式非首创,收集了 ......
1. 博客皮肤选择 simplememory
因为简单,所以爱~
2. 在”页面定制css代码“中填入以下内容
重要提示:侧边栏蓝色风格,有的模块可能遗漏,需要请自行在css样式中的“侧边栏”加上对应div的id或者class
/* ********************** * 整体布局 * **********************/ /* 整体布局 */ body { background:#f6f6f6; font-family: -apple-system, blinkmacsystemfont, segoe ui, roboto, helvetica neue, pingfang sc, hiragino sans gb, microsoft yahei, sans-serif; } #home { max-width: 1140px; padding: 15px; background: transparent; box-shadow: none; margin-top: 0; width: auto; } #main { margin-top: 15px; } #maincontent .forflow { padding-right: 20px; } /* 非阅读区域去掉白色背景 */ .newsitem, .catlistessay, .catlistlink, .catlistnotebook, .catlisttag, .catlistpostcategory, .catlistpostarchive, .catlistimagecategory, .catlistarticlearchive, .catlistview, .catlistfeedback, .mysearch, .catlistcomment, .catlistblogrank, .catlist, .catlistarticlecategory { background-color: transparent; } /* ********************** * 博客页首 * **********************/ /* 隐藏系统标题 */ #blogtitle { display: none; } /*顶部 */ .c-portrait { text-align: center; padding: 80px 0; background: #39424b; color: #fff; margin-bottom: -40px; } /* 标题和签名 */ .c-portrait h1 { font-size: 25px; font-weight: bold; margin: 5px 0; } .c-portrait h1 a { color: #fff; } .c-portrait h2 { font-size: 16px; margin: 7px 0 10px; color: #ccc; } /* ********************** * 导航栏 * **********************/ #navigator { padding: 0 10px; } #stats_article_count { display: none; } /* ********************** * 侧边栏 * **********************/ .catlistlink,#sidebar_scorerank,#blog-news,#sidebar_recentposts,#sidebar_postarchive, .mysearch,#blog-calendar,#topview_posts_wrap, .mysearch,#sidebar_articlecategory,#sidebar_postcategory { font-weight: normal; line-height: 1.2; font-size: 100%; margin-top: 0; margin-bottom: 10px; text-align: left; background-color: #fff; padding: 0 0 0 15px; border: 1px solid #eaeaea; } #blog-calendar{ padding:0; width: 100%; padding-bottom: 5px; margin-bottom: 35px; border: 1px solid #ededed; box-shadow:none; } div#profile_block{ padding: 10px 0 10px 0px; } #sidebar h3 { font-size: 14px; background-color: #428bca; padding: 5px; color: #fff; } .catlisttitle{ font-weight: normal; line-height: 1.2; font-size: 100%; margin-top:0; margin-bottom: 10px; text-align: center; width: 80px; } #sidebar { width: 250px; margin-top: 0; } #sidebar a { color: inherit; } /* 隐藏侧边公告标题 */ .newsitem .catlisttitle { display: none; } /* 增加列表项间距 */ .sidebar-block li { margin-bottom: 5px; } /* 支持反对 */ #div_digg { position: fixed; right: 30px; bottom: 50px; background: #fff; padding: 20px 20px 15px; border-radius: 5px; border: 1px solid #eaeaea !important; box-shadow:none !important; } /* ********************** * 文章列表 * **********************/ .entrylisttitle{ font-weight: bold; font-size: 18px; /* font-size: 100%; */ margin-top: 0; margin-bottom: 10px; text-align: left; background-color: #fff; padding: 0 0 0 15px; border: 1px solid #eaeaea; color: #ff5e52; } .entrylistposttitle { padding-left: 15px; margin-bottom: 10px; border-left: 8px solid #009688; font-size: 20px; width: 100%; } .entrylistposttitle a:link, .entrylistposttitle a:visited, .entrylistposttitle a:active { color: #393d49; transition: all 0.4s linear 0s; font-weight: bold; } /* 文章列表 */ #topics .posttitle { font-size: 28px; margin: 35px 0 30px; padding-left: 0; } #maincontent .day { padding: 15px 20px; background: #fff; } #maincontent .day .posttitle a { display: inline-block; } /* ********************** * 文章详情 * **********************/ pre { margin-bottom: 1.35em; } pre code { padding: 10px 16px !important; } .post { background: #fff; padding: 0 60px 60px; border-bottom: 1px solid #eee; } /* 文章标题 */ #topics .posttitle { font-size: 28px; margin: 35px 0 30px; padding-left: 0; text-align: center; padding-bottom: 20px; border-bottom: 1px solid #eee; } .posttitle { border-left: 8px solid #ff5e52; margin-bottom: 5px; font-weight: bold; line-height: 1; box-sizing: border-box; } .posttitle a:hover { margin-left: 0; } .posttitle a:link, .posttitle a:visited, .posttitle a:active { color: #393d49; transition: all 0.4s linear 0s; } /* 去除首行缩进 */ .postbody p, .postcon p { text-indent: 0; } /* 重写引用块样式 */ .postbody blockquote { min-height: auto; border-top: none; border-bottom: none; border-right: none; padding: 0 0 0 1em; } /* 增加底部留白 */ #cnblogs_post_body { padding-bottom: 5px; } /* 防止图片溢出 */ #cnblogs_post_body img { max-width: 100%; } /* 文章底部信息 */ .postdesc { margin-top: 0; } /* ********************** * 评论 * **********************/ #comment_form_container .comment_textarea { width: 100%; } #commentform_title { font: normal normal 16px/35px "microsoft yahei"; margin: 10px 0 30px; background-image: none; padding: 0; border-bottom: 1px solid #eaeaea; border-left: 8px solid #393d49; padding-left: 15px; } .comment_vote { padding-right: 2px; font-size: 14px; margin-top: 10px; } .comment_vote a.comment_digg { color: #f80; } .feedbackitem { margin: 20px 0 25px; background: #fff; padding: 10px 15px; } .feedbackcon { font-size: 13px; border-bottom: 0; padding: 10px 5px 0 5px; text-align: justify; } /* ********************** * 文章评价 * **********************/ #div_digg { position: fixed; right: 30px; bottom: 50px; background: #fff; padding: 20px 20px 15px; border-radius: 5px; border: 1px solid #888; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3); } /* ********************** * 隐藏广告 * **********************/ #ad_t2, #opt_under_post, .c_ad_block, #under_post_news, #under_post_kb { display: none !important; } /* ********************** * 适配手机 * **********************/ @media (max-width: 767px) { #home { padding-left: 0; padding-right: 0; } #div_digg { width: auto; padding: 0; right: -25px; bottom: 3px; box-shadow: none; } #div_digg .buryit { display: none; } #maincontent .forflow { padding-right: 0; } #maincontent .post { padding: 0 20px; } #sidebar, #blog-comments-placeholder { padding: 0 15px; } }
3. 在“首页html代码”中填入以下内容:
<div class="c-portrait"> <h1><a href="https://www.cnblogs.com/emacode/">易码</a></h1> <h2>舒心、快乐,比什么都重要</h2> </div>
说明:此样式非首创,收集了网上的资源结合自己喜好修改一番。