纯css制作博客皮肤_html/css_WEB-ITnose

我做了一个与众不同的博客，效果就是现在你看到的样子（本来打算截图的，想想好像多余了...），分享给大家，有兴趣的话你也可以自己做一个。

下面说说要怎么做，首先你要有一个博客园的博客，然后找到博客后台管理里的设置，选择Custom模板，并禁用模板默认CSS，在下图所示编辑区里写上你的css代码就可以了。

当然你可以在上述步骤做完之后可以把页面保存下来，能更方便的编辑css文件。打开博客主页ctrl+s就可以保存下来你的博客页面了，其实不只是主页，还有文章页面你也要保存下来进行修改。保存下来的页面只要添加自己的css文件进行编辑，就可以在浏览器里调试，最终把css代码贴上去，并点击设置页面最下面的"保存"按钮就可以看到自己做的皮肤啦！

下面是我的css代码，提供给大家参考，请让我继续与众不同！

 

 1 /* Author: |HEAR| */ 2  3  4 /*Public*/ 5  6 * { 7  box-sizing: border-box; 8  transition: all 0.5s; 9 } 10  11 ::selection { 12  color: #F99; 13 } 14  15 ::-moz-selection { 16  color: #F99; 17 } 18  19 body { 20  color: lightgray; 21  margin: 0; 22  padding: 0; 23  font-size: 14px; 24  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 25 } 26  27 h3 { 28  font-size: 15px; 29  font-weight: bold 30 } 31  32 ul { 33  padding: 0; 34  list-style: none; 35 } 36  37 a { 38  color: gray; 39  text-decoration: none; 40 } 41  42 a:hover { 43  color: #E30; 44 } 45  46  47 /*header*/ 48  49 #header { 50  height: 300px; 51 } 52  53 #blogTitle { 54  font-size: 24px; 55  text-align: center; 56 } 57  58 #navigator { 59  text-align: center; 60 } 61  62 #navList li { 63  display: inline-block; 64 } 65  66 .blogStats { 67  width: 240px; 68  margin: auto; 69  border-radius: 1em; 70  background: #C4E17F linear-gradient(to right, #C4E17F, #C4E17F 12.5%, #F7FDCA 12.5%, #F7FDCA 25%, #FECF71 25%, #FECF71 37.5%, #F0776C 37.5%, #F0776C 50%, #DB9DBE 50%, #DB9CBE 62.5%, #C49CDE 62.5%, #C49CDE 75%, #669AE1 75%, #669AE1 87.5%, #62C2E4 87.5%, #62C2E4) repeat scroll 0% 0%; 71  background-size: 200%; 72  animation: conveyor 4s ease infinite; 73 } 74  75  76 /*main*/ 77  78 #main { 79  margin: auto; 80  padding: 0 20px; 81 } 82  83 @media (min-width: 768px) { 84  #main { 85  width: 100%; 86     } 87 } 88  89 @media (min-width: 992px) { 90  #main { 91  width: 90%; 92     } 93 } 94  95 @media (min-width: 1200px) { 96  #main { 97  width: 80%; 98     } 99 }100 101 102 /*mainContent*/103 104 #mainContent {105  float: left;106  margin: 0 auto;107  padding: 20px;108 }109 110 @media (min-width: 768px) {111  #mainContent {112  width: 100%;113     }114 }115 116 @media (min-width: 992px) {117  #mainContent {118  width: 77.5%;119     }120 }121 122 @media (min-width: 1200px) {123  #mainContent {124  width: 80%;125     }126 }127 128 129 /*article*/130 131 .day,132 .commentform,133 .entrylistItem,134 #sideBar,135 #post_detail,136 #blog-comments-placeholder,137 #myposts {138  margin: 0px auto 40px;139  padding: 20px;140  border-radius: 5px;141  background: #333;142  background: repeating-linear-gradient(to bottom, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(-60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px);143 }144 145 .day:hover,146 .commentform:hover,147 .entrylistItem:hover,148 #sideBar:hover,149 #post_detail:hover,150 #blog-comments-placeholder:hover,151 #myposts:hover {152  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);153 }154 155 .dayTitle {156  float: left;157  margin-right: 20px;158 }159 160 .postCon,161 .entrylistPostSummary {162  margin: 10px auto;163 }164 165 .postDesc,166 .entrylistItemPostDesc {167  text-align: right;168 }169 170 .dayTitle,171 .postTitle {172  font-size: 20px;173 }174 175 176 /*option*/177 178 #green_channel {179  float: right;180  width: auto;181  border: none;182  margin: 15px 0;183 }184 185 #green_channel a {186  float: left;187  margin: 0 0 0 10px;188  background: none;189  box-shadow: none;190  text-shadow: none;191  border-radius: 3px;192  vertical-align: middle;193 }194 195 #author_profile {196  float: left;197  width: auto;198  margin: 9px 10px;199 }200 201 .author_avatar {202  margin: 3px 10px;203  padding: 0;204  border-radius: 5px;205 }206 207 .diggword {208  display: none;209 }210 #green_channel #green_channel_weibo,211 #green_channel #green_channel_wechat {212  padding: 0px 2px;213 }214 #div_digg {215  margin: 14px auto;216  padding: 10px 0;217 }218 219 .diggit,220 .buryit {221  color: white;222  width: 56px;223  height: 24px;224  margin: 1px;225  padding: 0 6px;226  text-align: right;227  position: relative;228  border-radius: 3px;229 }230 231 .diggit {232  background: #9C9;233  animation: pulse 1s ease-in infinite;234 }235 236 .buryit {237  background: #99C;238 }239 240 .diggit:before,241 .buryit:before {242  top: 3px;243  left: 6px;244  position: absolute;245  font-weight: bold;246 }247 248 .diggit:before {249  color: red;250  content: "♥";251 }252 253 .buryit:before {254  color: black;255  content: "♠";256 }257 258 .diggnum,259 .burynum {260  color: white;261 }262 263 264 /*comment title*/265 266 .feedback_area_title,267 #commentform_title {268  font-size: 16px;269  font-weight: bold;270 }271 272 #commentform_title {273  padding: 0;274  background-image: none;275 }276 277 278 /*comment*/279 280 .feedbackItem {281  margin-top: 20px;282  border-top: 1px solid #CC9;283 }284 285 .feedbackListSubtitle {286  margin: 10px 0;287 }288 289 .feedbackManage {290  float: right;291 }292 293 div.commentform input.author {294  color: lightgray;295  padding: 0;296  font-size: 14px;297  border: none;298  background-color: transparent;299  background-image: none;300 }301 302 #comment_nav,303 .commentbox_title_right {304  float: right;305 }306 307 .commentbox_title,308 .comment_textarea {309  min-width: 100%;310 }311 312 313 /*sideBar*/314 315 #sideBar {316  float: left;317  margin: 20px auto 0;318  display: none !important;319 }320 321 @media (min-width: 992px) {322  #sideBar {323  width: 22.5%;324  display: block !important;325     }326 }327 328 @media (min-width: 1200px) {329  #sideBar {330  width: 20%;331  display: block !important;332     }333 }334 335 #blog-calendar {336  margin: 10px auto;337  padding: 10px;338  font-size: 12px;339  border-radius: 5px;340  background: rgba(153, 204, 153, 0.6);341 }342 343 .input_my_zzk,344 .btn_my_zzk,345 .comment_btn,346 #commentbox_opt a,347 div.commentform textarea {348  margin: 2px auto;349  padding: 2px 5px;350  border: none;351  border-radius: 3px;352  background: rgba(255, 255, 255, 0.5);353 }354 355 .input_my_zzk,356 input.btn_my_zzk {357  width: 100%;358  height: 25px;359 }360 361 #commentbox_opt a {362  color: black;363  font-size: 12px;364  padding: 4px 10px;365 }366 367 .btn_my_zzk:hover,368 .comment_btn:hover,369 .input_my_zzk:hover,370 .input_my_zzk:focus,371 .comment_textarea:hover,372 .comment_textarea:focus,373 #commentbox_opt a:hover {374  outline: 0;375  color: white;376  background: rgba(153, 153, 204, 0.5);377 }378 379 380 /*footer*/381 382 #footer {383  margin-top: 20px;384  padding: 10px;385  text-align: center;386 }387 388 389 /*AD Kill*/390 391 #under_post_news,392 #under_post_kb {393  display: none;394 }395 396 397 /*animation*/398 399 @keyframes conveyor {400  0% {401  background-position: 0% 0%;402     }403  50% {404  background-position: 100% 0%;405     }406  100% {407  background-position: 0% 0%;408     }409 }410 411 @keyframes pulse {412  50% {413  outline-color: rgba(136, 187, 136, 0.9);414  box-shadow: 0px 0px 1px 4px rgba(136, 187, 136, 0.9), 0px 0px 1px 8px rgba(153, 204, 153, 0.5);415     }416 }

 

 第一次发博客，写得不好。皮肤做得不好的地方希望大家指正，谢谢！