博客园美化主题——只需一分钟
前言
如果你只想快速开始,那请直接查看wiki~
快速使用博皮 · wangyang0210/Cnblogs-Theme Wiki (github.com)
下面的教程是之前使用的第一版博皮的样式,属于简洁清新的,你只需要根据博文选好模板然后复制粘贴即可,详细的请访问白色泪光,本人现用的这套博皮是根据bndong的进行修改的,且配置需要时间,有兴趣可以直接访问bndong,查看置顶博文进行配置。所有的修改都在博客园后台管理--->设置中,其中js的权限是要申请的。
配置期间如有不懂之处,欢迎随时评论!
第一套皮肤(借用下薛丫丫同学的博客)
第二套皮肤(大家直接看我博客就知道了)
【美化内容】
基本模板
darkgreentrip
(感谢 薛丫丫 同学提醒)
页面定制CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | #home { margin : 0 auto ; width : 80% ; /*原始65*/ min-width : 980px ; /*页面顶部的宽度*/ background-color : rgba( 245 , 245 , 245 , 0.7 ); padding : 30px ; margin-top : 50px ; margin-bottom : 50px ; box-shadow: 0 2px 6px rgba( 100 , 100 , 100 , 0.3 ); } body { background : rgba( 12 , 100 , 129 , 1 ) url ( 'http://attach.bbs.miui.com/forum/201406/29/002350y098au8440ja80gm.jpg' ) fixed no-repeat ; background-position : 50% 5% ; background- size : cover; } #navList a:hover { color : white ; background-color : #8BC34A ; text-decoration : none ; text-shadow : 0px 0px 1px #8BC34A ; } #blogTitle { height : 100px ; /*高度*/ clear : both ; background-color : rgba( 245 , 245 , 245 , 0 ); } #blogTitle h 1 { font-size : 36px ; font-weight : bold ; line-height : 1.8em ; /*原始 1.6em*/ margin-top : 10px ; /*原始 15px */ color : #548B54 ; } #blogTitle h 2 { font-weight : normal ; font-size : 17px ; /*原始 16px ;font-size: 1.0rem;*/ line-height : 1.8 ; color : #111 ; font-weight : bold ; text-align : right ; float : right ; } #navigator{ background-color : rgba( 33 , 160 , 139 , 0.9 ); } #navList a:link, #navList a:visited, #navList a:active{ color : #eee ; font-size : 18px ; font-weight : bold ; } .blogStats{ color : #eee ; } .postTitle { border-left : 8px solid rgba( 33 , 160 , 139 , 0.68 ); margin-left : 10px ; margin-bottom : 10px ; font-size : 20px ; float : right ; width : 100% ; clear : both ; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color : #21759b ; transition: all 0.4 s linear 0 s; } .postTitle a:hover { margin-left : 30px ; color : #8BC34A ; text-decoration : none ; } .postCon { float : right ; line-height : 1.5em ; width : 100% ; clear : both ; padding : 10px 0 ; } .day .postTitle a { padding-left : 10px ; } .day { background : rgba( 255 , 255 , 255 , 0.5 ); } /*文章附加信息*/ .postDesc { background : url (images/posted_time.png) no-repeat 0 1px ; color : #757575 ; float : left ; width : 100% ; clear : both ; text-align : left ; font-family : "微软雅黑" , "宋体" , "黑体" , Arial ; font-size : 13px ; padding-right : 20px ; /*5px padding-left: 90px;posted 发表时间左边距离*/ margin-top : 20px ; line-height : 1.8 ; padding-bottom : 35px ; } .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar { background : rgba( 255 , 255 , 255 , 0.5 ); margin-bottom : 35px ; word-wrap: break-word; } .CalTitle{ background : rgba( 255 , 255 , 255 , 0 ); } .catListTitle{ background-color : rgba( 33 , 160 , 139 , 0.9 ); } #topics{ background : rgba( 255 , 255 , 255 , 0.5 ); } .c_ad_block{ display : none ; } #tbCommentBody{ width : 100% ; height : 200px ; background : rgba( 255 , 255 , 255 , 0.5 ); } #q{ background : rgba( 255 , 255 , 255 , 0 );} .CalNextPrev{ background : rgba( 255 , 255 , 255 , 0 );} .cnblogs_code{ background : rgba( 255 , 255 , 255 , 0 ); } .cnblogs_code div{ background : rgba( 255 , 255 , 255 , 0 ); } .cnblogs_code_toolbar{ background : rgba( 255 , 255 , 255 , 0 ); } .entrylist{ background : rgba( 255 , 255 , 255 , 0.5 ); } a:hover { color : #F60 ; text-decoration : none ; } |
侧边栏公告
头像不要忘记替换成自己的哦~
1 2 3 | < div align="center"> < img src="https://pic.cnblogs.com/avatar/1334215/20180504110551.png"> </ div > |
页面首页
github的地址不要忘记替换成自己的哦~
1 2 3 | < a href="https://github.com/king-y" target="_blank"> < img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;"src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" > </ a > |
学无止境,谦卑而行.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步