首页 > > 网页制作 > css >

本博客主题分享

2018-06-24 01:40:39来源：未知阅读 ()

水文一篇～～

缘由

最近有园友问到本博客的主题是怎么弄，其实也是参考其他的博客捣弄一些CSS、JS，前端咋咋，并没啥技术含量，有需要的同学可以拿去用。简单起见，直接把设置的代码全盘贴出来了。

第一步进入博客设置界面

主题是基于博客模版BlueSky修改的，需要选择此模版

第二步页面定制CSS代码

在此文本框填入CSS代码

代码如下：

  1 /*公共样式*/
  2 body {
  3   font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  4   background-image: none;
  5   background-color: #ebebeb;
  6   min-width: 1200px;
  7 }
  8 a:link, a:visited {
  9   color: #e67e22;
 10   text-decoration: none;
 11   transition: color 0.3s;
 12 }
 13 a:hover {
 14   text-decoration: underline;
 15 }
 16 
 17 /*自定义头部区域*/
 18 .main-header {
 19       padding-top: 80px;
 20       padding-bottom: 62px;
 21       background-image: url(http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_bgTop.jpg);
 22       background-repeat: no-repeat;
 23       background-position: center 24%;
 24       -webkit-background-size: cover;
 25       background-size: cover;
 26     }
 27     .topLogo {
 28       position: absolute;
 29       top: 34px;
 30       left: 15px;
 31     }
 32     .topLogo img{
 33       animation: loding  2s linear 0s infinite normal none paused ;
 34       -webkit-animation: loding  2s linear 0s infinite normal none paused ;
 35     }
 36     .topLogo.move img{
 37       animation: loding  2s linear 0s infinite normal none running ;
 38       -webkit-animation: loding  2s linear 0s infinite normal none running ;
 39     }
 40     @keyframes loding{
 41         0%{transform: rotate(0deg);}    
 42         100%{transform: rotate(360deg);}    
 43     }
 44     @-webkit-keyframes loding{
 45         0%{-webkit-transform: rotate(0deg);}    
 46         100%{-webkit-transform: rotate(360deg);}    
 47     }
 48     .topLogo:hover img {
 49          animation: loding  2s linear 0s infinite normal none running ;
 50       -webkit-animation: loding  2s linear 0s infinite normal none running ;
 51     }
 52 
 53 /*布局区域*/
 54 #Header1_HeaderTitle{position:relative;}
 55 #Header1_HeaderTitle svg {
 56     left: 0;
 57 }
 58 #blogTitle {
 59   display: block;
 60   position: absolute;
 61   top: -5px;
 62   left: 147px;
 63   font-size: 20px;
 64   color:#fff;
 65 }
 66 #blogTitle h2{
 67   font-size: 16px;
 68   margin-left: 43px;
 69   margin-top:10px;
 70 }
 71 #navigator,#main {
 72   width: 1200px;
 73   position: relative;
 74   margin: 0 auto;
 75 }
 76 #header {
 77   height: 37px;
 78   width: 100%;
 79   background-color: #fff;
 80   border-bottom: solid 1px #E5E5E5;
 81 }
 82 
 83 /*导航*/
 84 #navigator {
 85   top: 0;
 86 }
 87 .blogStats {
 88   color: #CACACA;
 89   font-size: 12px;
 90   text-align: right;
 91   padding-top: 10px;
 92 }
 93 #navList li {
 94   float: left;
 95   margin: 0;
 96   display: inline;
 97 }
 98 #navList li a {
 99   display: block;
100   width: 80px;
101   height: 37px;
102   line-height: 37px;
103   font-size: 15px;
104   text-decoration: none;
105   color: #333;
106   padding: 0 10px;
107   text-align: center;
108   background-color: transparent;
109   -webkit-transition: all 0.2s ease-in-out;
110   -o-transition: all 0.2s ease-in-out;
111   transition: all 0.2s ease-in-out;
112 }
113 #navList li a:hover {
114   background-color: #e67e22;
115   color: #fff;
116   margin-top: 0;
117   padding-bottom: 0;
118   opacity: 1;
119 }
120 #main {
121   margin-top: 20px;
122   background: transparent;
123 }
124 #mainContent {
125   width: 900px;
126   background: transparent;
127   box-shadow: none;
128   -moz-box-shadow: none;
129   -web-kit-shadow: none;
130   border-radius: 0px;
131   -moz-border-radius: 0px;
132   -web-kit-shadow: 0px;
133   display: inline-block;
134 }
135 
136 #profile_block {
137   margin-top: 0px; 
138   line-height: 1.5;
139   text-align: left;
140 }
141 #sideBar {
142   width: 267px;
143   padding: 0 16px 16px;
144   display: inline-block;
145   overflow: hidden;
146   color: #2D2D2D;
147 }
148 #sideBar a {
149   
150 }
151 #sideBarMain > div {
152   margin-bottom: 20px;
153   background: #fff;
154   padding: 5px 15px;
155 }
156 #sideBarMain h3 {
157   font-weight: normal;
158   margin-bottom: 12px;
159   color: #333;
160   border-bottom-width: 1px;
161   border-bottom-style: solid;
162   border-bottom-color: #D4D4D4;
163   margin-top: 0;
164   padding: 5px 0;
165   font-size: 18px;
166 }
167 
168 /*推荐浮动框*/
169 #div_digg {
170   position: fixed;
171   bottom: 10px;
172   width: 140px;
173   right: 390px;
174   border: 2px solid #51CC6C;
175   padding: 10px;
176   background-color: #fff;
177   border-radius: 5px 5px 5px 5px !important;
178   box-shadow: 0 0 0 1px rgba(22, 159, 230, 0.45), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
179 }
180 /*文章区域样式*/
181 #cnblogs_post_body h2 {
182     font-size: 24px;
183     font-weight: normal;
184     background-color: #E67E22;
185     color: #fff;
186     text-indent: 10px;
187     border-radius: 5px;
188     text-shadow: 2px 2px 3px #222;
189     box-shadow: 0 0 0 1px #F9CB18, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
190     margin:10px 0;
191 }
192 #cnblogs_post_body h3 {
193   font-size: 18px;
194   font-weight: bold;
195   margin: 35px 0 20px;
196   padding-left: 10px;
197   position: relative;
198 }
199 #cnblogs_post_body h3:before {
200   content: '';
201   width: 3px;
202   height: 100%;
203   position: absolute;
204   top: 0px;
205   left: 0px;
206   background: #53EA38;
207 }
208 #cnblogs_post_body h4 {
209   font-size: 16px;
210   font-weight: bold;
211   background: transparent;
212   color: #333;
213   margin: 0;
214   padding: 5px 0;
215 }
216 
217 #cnblogs_post_body p {
218   margin: 0px auto;
219   text-indent: 0;
220   font-size:16px;
221   line-height:30px;
222 }
223 
224 .postBody blockquote, .postCon blockquote {
225     width: auto;
226     margin: 10px auto;
227     padding: 6px 6px 6px 60px;
228     color: #666;
229     background: white url(/images/blockquote.gif) 5px 5px no-repeat;
230 }
231 
232 
233 /*文章列表、内容样式*/
234 .postTitle{
235  position: relative;
236  -webkit-transition: color 0.2s;
237     transition: color 0.2s;
238 }
239 .postTitle:hover {
240  
241 }
242 .postTitle a, .post-title a, .postTitl2 a, .postTitl2 a, .entrylistPosttitle a, .entrylistPosttitle a {
243   color: black;
244   font-size: 25px;
245 }
246 .postTitle a:hover, .postTitl2 a:hover, .entrylistPosttitle a:hover {
247   color: #e67e22;
248   text-decoration: none;
249 }
250 .postTitle, .postTitl2, .entrylistPosttitle {
251   font-size: 20px;
252   padding-right: 64px;
253   padding-left: 10px;
254   border-left-width: 3px;
255   border-left-style: solid;
256   border-left-color: #e67e22;
257 }
258 
259 .post {
260   padding: 25px 15px;
261 }
262 .forFlow img {
263   margin-top: 0px;
264   margin-bottom: 0px;
265 }
266 .feedback_area_title {
267   padding: 0 0 10px;
268 }
269 
270 /*代码块样式*/
271 .cnblogs-markdown .hljs {
272   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
273   font-size: 12px !important;
274   line-height: 1.5 !important;
275   padding: 5px !important;
276 }
277 .hljs-comment, .hljs-quote, .hljs-variable {
278   color: rgb(2, 148, 2);
279   font-family: 'Microsoft YaHei';
280 }
281 .cnblogs-markdown .hljs {
282   display: block;
283   overflow-x: auto;
284   padding: .5em;
285   background: #fff;
286   color: #4d4e53;
287   background: url(http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_bg_code.png) top center #fafbfc !important;
288 }
289 .cnblogs-markdown .hljs {
290   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
291   font-size: 14px !important;
292   line-height: 1.5 !important;
293   padding: 10px !important;
294   border: 0 !important;
295 }
296 .hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition {
297   color: #DD4A68;
298 }
299 .hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
300   color: #07a;
301 }
302 .cnblogs-markdown pre {
303   margin-top: 10px;
304   margin-bottom: 10px;
305   border-left: 6px solid #558abb;
306 }
307 
308 .tocify {
309   bottom: 10px;
310   background-color: #fff;
311   right: 10px;
312 }
313 .nav-list > .active > a, .nav-list > .active > a:hover {
314     color: #ffffff;
315     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
316     background-color: #F99338;
317 }
318 .nav > li > a:hover {
319   text-decoration: none;
320   color: #ffffff;
321   background-color: #F99338;
322 }
323 .nav > li > a {
324   display: block;
325   font-size:14px;
326 }
327 .dayTitle {
328   display: none;
329 }
330 .day {
331   background: white;
332   padding: 24px 32px;
333   margin: 0 0 25px;
334 }
335 .postDesc, .postDesc2, .entrylistItemPostDesc {
336   border-bottom: 1px solid #E8E7D0;
337   text-align: right;
338   margin: 10px 0px;
339   padding: 5px 0px 10px;
340 }
341 .catListEssay li, .catListFeedback li, .catListView li, .catListPostCategory li ,.catListPostArchive li{
342   display: block;
343   padding: 1px 5px;
344   border-radius: 3px;
345   text-overflow: ellipsis;
346   overflow: hidden;
347   -o-text-overflow: ellipsis;
348   white-space: nowrap;
349   -webkit-transition: all 0.1s ease-in-out;
350   -o-transition: all 0.1s ease-in-out;
351   transition: all 0.1s ease-in-out;
352 }
353 .catListEssay li:hover, .catListFeedback li:hover, .catListView li:hover, .catListPostCategory li:hover ,.catListPostArchive li:hover{
354   background-color: #e67e22;
355 }
356 .catListEssay li:hover a, .catListFeedback li:hover a, .catListView li:hover a, .catListPostCategory li:hover a ,.catListPostArchive li:hover a{
357   text-decoration: none;
358   color: #fff !important;
359 }
360 .topicListFooter {
361   padding: 0px 20px 10px;
362 }
363 
364 /*文章内容设置背景色*/
365 #blog-comments-placeholder, #comment_form, #post_detail, #topics {
366   background: #fff;
367 }
368 #blog-comments-placeholder, #divRefreshComments, .commentform, #AjaxHolder_UpdatePanel1 {
369   padding: 10px 32px;
370 }
371 
372 .entrylist{
373  background:#fff;
374  padding:20px 10px;
375 }
376 
377 /*隐藏广告*/
378 #ad_t2, #ad_c1, #under_post_news, #ad_c2, #under_post_kb {
379   display: none;
380 }
381 
382 /*animate*/
383 @-webkit-keyframes shake {
384   from, to {
385     -webkit-transform: translate3d(0, 0, 0);
386     transform: translate3d(0, 0, 0);
387   }
388 
389   10%, 30%, 50%, 70%, 90% {
390     -webkit-transform: translate3d(-10px, 0, 0);
391     transform: translate3d(-10px, 0, 0);
392   }
393 
394   20%, 40%, 60%, 80% {
395     -webkit-transform: translate3d(10px, 0, 0);
396     transform: translate3d(10px, 0, 0);
397   }
398 }
399 
400 @keyframes shake {
401   from, to {
402     -webkit-transform: translate3d(0, 0, 0);
403     transform: translate3d(0, 0, 0);
404   }
405 
406   10%, 30%, 50%, 70%, 90% {
407     -webkit-transform: translate3d(-10px, 0, 0);
408     transform: translate3d(-10px, 0, 0);
409   }
410 
411   20%, 40%, 60%, 80% {
412     -webkit-transform: translate3d(10px, 0, 0);
413     transform: translate3d(10px, 0, 0);
414   }
415 }

View Code

第三步页首HTML代码页脚HTML代码

用于定制头部和尾部的HTML解构及引入JS代码。资源引用可以先上传到自己博客文件目录在引用即可。

页首代码如下：

 1 <header class="main-header">
 2        <a class="topLogo move" href="http://www.cnblogs.com/" title="博客园">
 3          <img src="http://images.cnblogs.com/cnblogs_com/bigboyLin/771966/o_logo.png" alt="博客园" width="78">
 4        </a>
 5 </header>
 6 
 7 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/jquery.tocify.css" />
 8 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/pace-theme-minimal.css" />
 9 <link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/bigboyLin/animate.min.css" />
10 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/pace.min.js"></script>

View Code

页尾代码如下：

  1 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery-1.11.1.min.js"></script>
  2 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery-ui.min.js"></script>
  3 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.tocify.min.js"></script>
  4 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.lettering.js"></script>
  5 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/jquery.textillate.js"></script>
  6 <script type="text/javascript" src="http://files.cnblogs.com/files/bigboyLin/mo.min.js"></script>
  7 <script type="text/javascript">
  8 
  9 $(function(){
 10   addMenu();
 11   addPersonInfo()
 12   createTocify();
 13 
 14   $('#cnblogs_post_body').prepend('<div id="catalogBox"></div>');
 15   generateContentList();
 16   setTimeout(function(){
 17     $('.topLogo').removeClass('move');    
 18  },1000);
 19 
 20  // 动画效果
 21  $('#blogTitle h2').textillate({
 22     loop: true,
 23     autoStart: true,
 24     in: {
 25     shuffle: false,
 26     effect: 'bounce'},
 27     out: {
 28     effect: 'hinge',
 29     delayScale: 1.5,
 30     delay: 30,
 31     sync: false,
 32     shuffle: true,
 33     reverse: false,
 34     callback: function () {}
 35   }
 36  });
 37  // 导航动画
 38  $('#navList li').hover(function(){
 39     $(this).addClass('animated swing');
 40    
 41  },function(){
 42        $(this).removeClass('animated swing');
 43  });
 44 
 45 });
 46 
 47 
 48 // 添加文章浮动目录
 49 function createTocify(){
 50   var dom = $('<div id="toc" style="display:none;"></div>').appendTo('#topics');
 51   dom.tocify({context:$('#mainContent'),extendPage:false});  
 52   $(window).scroll(function(){
 53       var scrollTop = $(window).scrollTop();
 54       if(scrollTop >1000){
 55         $('#toc').fadeIn(); 
 56       }else{
 57         $('#toc').fadeOut();
 58       }
 59   });
 60 }
 61 
 62 
 63 // 添加版权信息
 64 function addPersonInfo(){
 65   var shtml = '<div style="background: #f4f7f8;line-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px;  font-size: 14px; border: #e0e0e0 1px dashed;">'+
 66  '作者：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">GeniusLyzh</a><br>'+
 67  '出处：<a href="http://www.cnblogs.com/GeniusLyzh/" target="_blank">http://www.cnblogs.com/GeniusLyzh/</a><br>'+
 68  '本文链接：<a href=""+location.href+"" target="_blank">'+location.href+'</a><br>'+
 69  '本文版权归作者和博客园共有，欢迎转载，须保留此段声明，并给出原文链接，谢谢！<br>'+
 70  '如果阅读了本文章，觉得有帮助，欢迎点击右下角推荐</div>';
 71   $('#blog_post_info_block').before(shtml );
 72 }
 73 
 74 
 75 //添加個人公告信息
 76 function addContact(){
 77   var shtml ="";
 78       //shtml+= "email：<a href='mailto:hi@linjiajun.com'>hi@linjiajun.com</a>";
 79      // shtml+= "我的小站：<a href='http://www.linjiajun.com' target='_blank' title='http://www.linjiajun.com'>Lyzh's blog</a><br>";
 80       shtml+= "<br>weibo：<a href='http://weibo.com/qylinxia' target='_blank' title='http://weibo.com/qylinxia'>Lyzh</a>";
 81      // shtml+="<br><br>"; 
 82   $('#profile_block').prepend(shtml); 
 83 }
 84 
 85 // 添加文章內嵌目录
 86 function generateContentList(){
 87     var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
 88     if(jquery_h3_list.length>0)
 89     {
 90         var content = '<a name="_labelTop"></a>';
 91         content    += '<div id="navCategory">';
 92         content    += '<p style="font-size:18px"><b style="font-weight:normal;">阅读目录</b></p>';
 93         content    += '<ul>';
 94         for(var i =0;i<jquery_h3_list.length;i++)
 95         {
 96             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
 97             $(jquery_h3_list[i]).before(go_to_top);
 98             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
 99             content += li_content;
100         }
101         content    += '</ul>';
102         content    += '</div>';
103         
104         if($('#cnblogs_post_body').length != 0 )
105         {
106             
107             $($('#catalogBox')[0]).prepend(content);
108         }
109     }    
110 }
111 
112 function addMenu(){
113     var menuHtml = '';
114         menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="https://github.com/jiajunlin">GitHub</a></li>';
115         menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="http://www.linjiajun.com">我的小站</a></li>';
116       // menuHtml += '<li class=""><a  class="menu" target="_blank" rel="nofollow" href="http://home.cnblogs.com/u/bigboyLin/">关于我</a></li>';
117        
118     $('#navList').append(menuHtml);
119 }
120 
121 </script>