博客园自定义页面风格设计

简介: 最近好多人问我博客的页面设计模版,时间挺紧张的,赶着搞策划和学习。。。趁着现在放假写写吧~~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Memory,可以自适应,方便我们进行页面CSS定制 论如何改变自己的博客园,变得好不好看我就不敢保证了,也许会出现各种毛病QAQ ①拥有自己的CSS代码 我自己是完全禁用掉了模板CSS 然后会发现,blog干净得很,一点样式都没有。

最近好多人问我博客的页面设计模版,时间挺紧张的,赶着搞策划和学习。。。趁着现在放假写写吧~~~

全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Memory,可以自适应,方便我们进行页面CSS定制

论如何改变自己的博客园,变得好不好看我就不敢保证了,也许会出现各种毛病QAQ

①拥有自己的CSS代码

我自己是完全禁用掉了模板CSS

然后会发现,blog干净得很,一点样式都没有。

对于我们这种小白来说,从头到尾自己写一份完整的CSS代码是不现实的,这时候我们需要一份代码模板,拿模板来改就比较容易了。

网上会有一些人把自己的CSS代码公开出来,当然实际上你浏览别人的blog的时候,(对于Chrome浏览器)轻按F12,你可以在style那个小栏里找到该网页的CSS代码链接,或者似乎可以写个爬虫啥的来获取,下面是我写的Python爬虫代码,轻松获取~~~

1 #!/usr/bin/env python
2 #-*- coding:utf-8 -*-
3 import urllib2
4 resp=urllib2.urlopen('http://www.cnblogs.com/ECJTUACM-873284962/')
5 html=resp.read()
6 print html

我之前的CSS代码:

  1 /*公用*/
  2 body {
  3     font-size:15px;
  4     padding:0;
  5     margin:0;
  6     font-family:"微软雅黑","宋体",Arial;
  7     background:#205424 url('https://i.loli.net/2017/08/15/59923c58cc40f.jpg') no-repeat top center fixed;
  8     min-width:1200px;
  9 }
 10 #home {
 11     opacity: 0.95;
 12     filter: alpha(opacity=95);
 13     box-shadow:0 0 10px #000;
 14     margin:40px auto;
 15     width:1200px;
 16     background:#fff;
 17     overflow:auto;
 18     border:solid 1px #fff;
 19 }
 20 /*段落*/
 21 .postBody p,.postCon p {
 22     margin:7px 0;
 23     line-height:24px;
 24 }
 25 h1 {
 26     margin:0;
 27 }
 28 h3 {
 29     font-size:15px;
 30     font-weight:bold;
 31 }
 32 /*超链接*/
 33 a {
 34     color:#464646;
 35     text-decoration:none;
 36 }
 37 a:hover {
 38     text-decoration:underline;
 39 }
 40 a:visited,a:hover {
 41     color:#464646;
 42 }
 43 ul {
 44     list-style:none;
 45     margin:0;
 46     padding:0;
 47 }
 48 image {
 49     border:none;
 50 }
 51 #header {
 52     padding:20px;
 53 }
 54 /*博客标题*/
 55 #blogTitle,#blogTitle a {
 56     font-weight:bold;
 57     color:#666;
 58 }
 59 #blogTitle .title {
 60     margin-top:10px;
 61     height:100px;
 62     line-height:100px;
 63     font-size:36px;
 64     padding-left:120px;
 65     background:#fff url('https://i.loli.net/2017/08/02/598187babf39e.gif') no-repeat;
 66 }
 67 .headermaintitle {
 68     }#blogTitle,#blogTitle a:hover {
 69     text-decoration:none;
 70 }
 71 /*子标题*/
 72 .subtitle {
 73     padding-left:30px;
 74     font-size:14px;
 75     color:#999;
 76     font-weight:normal;
 77     margin:10px 0;
 78 }
 79 /*导航栏*/
 80 #navigator {
 81     font-size:16px;
 82     height:48px;
 83     background:#FFAAD5;
 84     text-align:center;
 85     margin-top:20px;
 86     margin-bottom:20px;
 87 }
 88 #navList li {
 89     margin:0;
 90     line-height:48px;
 91     display:inline-block;
 92     float:left;
 93 }
 94 #navList li:hover {
 95     background:#6DA47D;
 96 }
 97 #navList li a {
 98     padding:0 30px;
 99     text-decoration:none;
100     line-height:48px;
101     border:0;
102     color:#fff;
103     display:-moz-inline-box;
104     display:inline-block;
105 }
106 .blogStats {
107     height:48px;
108     color:#fff;
109     line-height:48px;
110 }
111 #main {
112     padding:20px;
113 }
114 /*左边*/
115 #sideBarMain {
116     padding:0 10px 0 0;
117     background:#fff;
118     margin:0 0 20px 0;
119     width:190px;
120     font-size:12px;
121     line-height:22px;
122 }
123 #sideBarMain a {
124     color:#666;
125 }
126 #leftcontentcontainer {
127     color:#666;
128 }
129 .newsItem {
130     color:#666;
131 }
132 /*公告*/
133 #profile_block {
134     margin-top:0px;
135     line-height:24px;
136     text-align:left;
137 }
138 /*主面板*/
139 #mainContent {
140     margin-top:0px;
141     padding-top:0px;
142     padding-right:0px;
143     background:#fff;
144     padding-bottom:0px;
145     float:right;
146     width:960px;
147     padding-left:0px;
148 }
149 /*每日文章列表*/
150 .day {
151     background:#fff;
152     padding:0;
153     margin:0 0 20px 0;
154 }
155 /*博客标题*/
156 .postTitle a {
157     color:#464646;
158 }
159 .postTitle {
160     padding-bottom:10px;
161     font-size:20px;
162     font-weight:bold;
163     color:#464646;
164     background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
165     padding-left:30px;
166 }
167 .dayTitle {
168     display:none;
169 }
170 /*摘要*/
171 .c_b_p_desc {
172     padding:10px;
173     line-height:24px;
174     color:#888;
175 }
176 .c_b_p_desc a {
177     color:#888;
178 }
179 .c_b_p_desc a:hover {
180     text-decoration:none;
181     border-bottom-width:1px;
182     border-bottom-style:dotted;
183 }
184 /*右侧图片*/
185 .desc_img {
186     margin-left:10px;
187     border:solid 1px #fff;
188     box-shadow:0 0 10px #aaa;
189 }
190 /*博文页*/
191 #topics .post {
192     background:#fff;
193 }
194 .postCon {
195     padding:10px 20px 0 20px;
196 }
197 .postDesc {
198     margin:0 30px;
199     margin-bottom:2px;
200     padding:8px 0px;
201     font-size:12px;
202     color:#aaa;
203     background:#fff;
204     text-align:right;
205 }
206 .postDesc a {
207     color:#AAA;
208 }
209 .postBody {
210     padding:0;
211 }
212 /*google搜索框*/
213 #google_q,#q {
214     height:22px;
215     width:120px;
216     border:solid 1px #ccc;
217     box-shadow:inset 0 0 3px #ddd;
218     border-radius:4px;
219 }
220 /*搜索按钮*/
221 .btn_my_zzk {
222     font-family:'Microsoft Yahei';
223     border:none;
224     height:26px;
225     width:60px;
226     padding:1px;
227     font-size:14px;
228     cursor:pointer;
229     position:relative;
230     vertical-align:middle;
231     display:inline-block;
232     background:#FFAAD5;
233     border-radius:4px;
234     color:#fff;
235 }
236 .btn_my_zzk:hover {
237     background:#6DA47D;
238 }
239 /*评论按钮*/
240 
241 #btn_comment_submit {
242     border:none;
243     height:48px;
244     width:120px;
245 }
246 /*评论按钮*/
247 .comment_btn {
248     font-family:'Microsoft Yahei';
249     border:none;
250     height:48px;
251     width:120px;
252     font-size:18px;
253     cursor:pointer;
254     position:relative;
255     vertical-align:middle;
256     display:inline-block;
257     background:#FFAAD5;
258     color:#fff;
259 }
260 #btn_comment_submit:hover {
261     background:#6DA47D;
262 }
263 /*评论标题*/
264 .feedback_area_title {
265     padding:10px;
266     font-size:24px;
267     font-weight:bold;
268     color:#55895B;
269     border-bottom:solid 6px #FFAAD5;
270 }
271 .feedbackListSubtitle {
272     font-size:12px;
273     color:#888;
274 }
275 .feedbackListSubtitle a {
276     color:#888;
277 }
278 .comment_quote {
279     background:#FCFAAC;
280     padding:15px;
281     border:1px solid #CCC;
282 }
283 #commentform_title {
284     color:#55895B;
285     background-image:none;
286     background-repeat:no-repeat;
287     margin-bottom:10px;
288     padding:10px 20px 10px 10px;
289     font-size:24px;
290     font-weight:bold;
291     border-bottom:solid 6px #55895B;
292 }
293 /*评论框*/
294 #comment_form {
295     margin:10px 0;
296     padding:0;
297 }
298 .commentform {
299     margin:10px 0;
300     padding:10px 20px;
301     background:#fff;
302 }
303 /*评论输入域*/
304 #tbCommentBody {
305     font-family:'MIcrosoft Yahei';
306     margin-top:10px;
307     width:940px;
308     max-width:940px;
309     min-width:940px;
310     background:white;
311     color:#333;
312     border:2px solid #fff;
313     box-shadow:inset 0 0 8px #aaa;
314     padding:10px;
315     height:120px;
316     font-size:14px;
317     min-height:120px;
318 }
319 /*评论条目*/
320 .feedbackItem {
321     font-size:14px;
322     line-height:24px;
323     margin:10px 0;
324     padding:20px;
325     background:#F2F2F2;
326     box-shadow:0 0 5px #aaa;
327 }
328 .feedbackListSubtitle {
329     font-weight:normal;
330 }
331 /*分类页*/
332 .entrylist {
333     padding:10px 20px;
334     background:#fff;
335 }
336 .entrylistItem {
337     margin:10px 0;
338     padding:10px;
339 }
340 .entrylistPosttitle {
341     font-size:18px;
342     font-weight:bold;
343     background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
344     padding-left:30px;
345 }
346 .entrylistPostSummary {
347     padding:10px;
348 }
349 .entrylistItemPostDesc {
350     font-size:12px;
351     color:#999;
352     padding-left:40px;
353 }
354 /*尾部*/
355 #footer {
356     font-size:12px;
357     margin:20px;
358     padding:12px;
359     text-align:center;
360     background:#FFAAD5;
361     color:#DDD;
362     font-size:14px;
363 }
364 /*文章内图片*/
365 #cnblogs_post_body p img {
366     margin:10px;
367 }
368 /*顶一下*/
369 .diggnum {
370     font-size:28px;
371     color:#FFFFFF;
372     font-family:'Microsoft Yahei';
373 }
374 #div_digg .diggnum {
375     line-height:100px;
376 }
377 .diggit {
378     float:left;
379     width:340px;
380     height:256px;
381     background:url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif') no-repeat;
382     background-position:0 0;
383     text-align:center;
384     cursor:pointer;
385 }
386 .diggit:hover {
387     background-position:-128px 0;
388 }
389 /*踩一下(园友反映,这个有点“邪恶”,呵呵,其实是我没来得及设计这个背景图片,就暂时把它隐藏了……可以去掉这句话)*/
390 .buryit {
391     display:none;
392 }
393 .diggword {
394     display:none;
395 }
396 /*green_channel*/
397 #green_channel {
398     text:align:right;
399     background:#6DA47D;
400     padding-left:20px;
401     font-weight:normal;
402     font-size:15px;
403     width:920px;
404     border:none;
405     color:#fff;
406     padding:20px;
407     border-radius:4px;
408 }
409 /*最新评论*/
410 #myposts .PostList {
411     font-size:14px;
412     line-height:24px;
413     margin:10px 0;
414     padding:20px;
415     background:#F2F2F2;
416     box-shadow:0 0 5px #aaa;
417 }
418 #myposts .postTitl2 a {
419     color:#6DA47D;
420 }
421   #ZjmainstayCnblogsSWFTags{
422       overflow: visible;
423       position: absolute;
424       right: 10px;
425       top: 735px;
426       width: 160px;
427       z-index: 10000;
428   }
429 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
430 A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
431 
432 #MagicArray{
433 /* Firefox 4 */
434 -moz-transition-property:width height bottom right;
435 -moz-transition-duration:1s;
436 
437 /* Safari and Chrome */
438 -webkit-transition-property:width height bottom right;
439 -webkit-transition-duration:1s;
440 
441 /* Opera */
442 -o-transition-property:width height bottom right;
443 -o-transition-duration:1s;
444 
445 position: fixed;
446 bottom:107px;
447 right: 108px;
448 width: 0px;
449 height: 0px;
450 text-align: center;
451 z-index:2;
452 }

我现在的CSS代码,大部分参考我的挚友swm_sxt(大神)

下面贴出现在的CSS源码:

  1 #site_nav_under {
  2     display: none;
  3 }
  4 .c_ad_block, .ad_text_commentbox {
  5     display: none;
  6     margin: 0;
  7     padding: 0;
  8 }
  9 #ad_under_google {
 10     height: 0;
 11     overflow: hidden;
 12 }
 13 #ad_under_google a {
 14     display: none;
 15 }
 16 
 17 
 18 @charset "utf-8";
 19 /* CSS Document */
 20 
 21 /**************************************************
 22 第一部分:所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
 23 如果不符合你皮肤的要求,你可以在后面通过更好的优先级覆盖着这些样式,但是
 24 你不能删除这些样式。
 25 **************************************************/
 26 #EntryTag {
 27     margin-top: 20px;
 28     font-size: 9pt;
 29     color: gray;
 30 }
 31 .topicListFooter {
 32     text-align: right;
 33     margin-right: 10px;
 34     margin-top: 10px;
 35 }
 36 #divRefreshComments{
 37     text-align: right; 
 38     margin-right: 10px;
 39     margin-bottom: 5px;
 40     font-size: 9pt;
 41 }
 42 /*****第一部分结束*******************************/
 43 
 44 /**************************************************
 45 第二部:公共样式(全局样式)。公共会对所有页面的标签都起作用。这个部分你
 46 可以随意的更改,并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
 47 模板所有页面的变化。因为它们是全局的。
 48 **************************************************/
 49 * {
 50     margin: 0;
 51     padding: 0;
 52 }
 53 html {
 54     height: 100%;
 55 }
 56 body {
 57     background:url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed;
 58     background-size:cover;
 59     color:#000;
 60     font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
 61     font-size: 15px;
 62     min-height: 101%;
 63     width:75em;
 64     margin-left:auto;
 65     margin-right:auto;
 66     z-index:0;
 67 }
 68 
 69 #Uleft, #Uright,#Dleft, #Dright{
 70     /* Firefox 4 */
 71     -moz-transition-property:top; 
 72     -moz-transition-duration:1s;
 73 
 74     /* Safari and Chrome */
 75     -webkit-transition-property:top; 
 76     -webkit-transition-duration:1s;
 77 
 78     /* Opera */
 79     -o-transition-property:top;
 80     -o-transition-duration:1s;
 81     position: fixed;
 82     width: 80px;
 83     height: 80px;
 84     line-height: 500px;
 85     text-align: center;
 86     z-index:1;
 87 }
 88 #Uleft{
 89     width: 80px;
 90     height: 80px;
 91     top:-60px;
 92     left: 50px;
 93 }
 94 #Uright{
 95     width: 110px;
 96     height: 110px;
 97     top: -75px;
 98     right: 50px;
 99 }
100 #Dleft{
101     bottom:10px;
102     left: 10px;
103     width: 200px;
104     height: 200px;
105 }
106 #Dright{
107     bottom:-50px;
108     right: 0px;
109     width: 200px;
110     height: 250px;
111 }
112 
113 #MagicArray{
114     /* Firefox 4 */
115     -moz-transition-property:width height bottom right; 
116     -moz-transition-duration:1s;
117 
118     /* Safari and Chrome */
119     -webkit-transition-property:width height bottom right; 
120     -webkit-transition-duration:1s;
121 
122     /* Opera */
123     -o-transition-property:width height bottom right;
124     -o-transition-duration:1s;
125 
126     position: fixed;
127     bottom:107px;
128     right: 108px;
129     width: 0px;
130     height: 0px;
131     text-align: center;
132     z-index:2;
133 }
134 #Tab1{
135     -moz-transition-property:fontSize width height; 
136     -moz-transition-delay:0.8s;
137 
138     -webkit-transition-property:fontSize width height; 
139     -webkit-transition-delay:0.8s;
140 
141     -o-transition-property:fontSize width height;
142     -o-transition-delay:0.8s;
143 
144     color:#8B0A50;
145     position: fixed;
146     font-size: 0px;
147     text-align: center;
148     z-index:3;
149     font-weight:500;
150     text-shadow:
151         -1px 0 #7A67EE,
152 1px #7A67EE,
153         1px 0 #7A67EE,
154 -1px #7A67EE;
155 }
156 
157 ::selection{background:#698B22;color:#FFF;}
158 ::-moz-selection{background#698B22;color:#FFF;}
159 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
160 A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
161 input{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
162 wait{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
163 input{outline:medium;}
164 /*
165 http://fq.wc.lt//up/1499566113.cur
166 http://fq.wc.lt//up/1499565578.cur
167 http://fq.wc.lt//up/1499564884.cur
168 */
169 /*鼠标*/
170 
171 table {
172     border-collapse: collapse;
173     border-spacing: 0;
174 }
175 fieldset, img {
176     border: 0;
177 }
178 ul {
179     word-break: break-all;
180 }
181 li {
182     list-style: none;
183 }
184 h1, h2, h3, h4, h5, h6 {
185     font-size: 100%;
186     font-weight: normal;
187 }
188 a:link {
189     color:black;
190     text-decoration:none;
191 }
192 a:visited {
193     color:#111;
194     text-decoration: none;
195 }
196 a:hover {
197     color: #7B68EE;
198     -moz-border-radius: 9px;
199     -khtml-border-radius: 9px;
200     -webkit-border-radius: 9px;
201     border-radius: 9px;
202     transition: all 0.4s linear 0s;
203 }
204 a:active {
205     color: black;
206     text-decoration: none;
207 }
208 .clear {
209     clear: both;
210 }
211 /*****第二部分结束*******************************/
212 
213 /**************************************************
214 第三部分:各个页面元素的样式。你可以根据需要随意的更改,并不会牵扯到其他
215 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
216 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
217 **************************************************/
218 /*****home和头部开始**************************/
219 #home {
220     margin: 0 auto;
221     width:95%;
222     min-width: 60em;
223 }
224 #header {
225     padding-bottom: 0.4em;
226     margin-top: 0.8em;
227 }
228 #blogTitle {
229     height: 7em;
230     clear: both;
231     border:1px solid #000;
232     -moz-border-radius: 11px;
233     -khtml-border-radius: 11px;
234     -webkit-border-radius: 11px;
235     border-radius: 12px;
236     -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
237     text-shadow:1px 1px 1px #e9f3e8
238 }
239 #blogTitle h1 {
240     font-size: 300%;
241     font-weight: bold;
242     margin-left: 1em;
243     margin-top: 0.4em;
244     width: 50%;
245     float: left;
246 }
247 #blogTitle h2 {
248     margin-left: 6em;
249     line-height: 1.5em;
250     width: 50%;
251     float: left;
252     text-shadow:-1px 0 #ddd,
253 1px #ddd,
254                 1px 0 #ddd,
255 -1px #ddd;
256 }
257 #blogLogo {
258     float: right;
259 }
260 #navigator {
261 /*    background-color: black;
262     height: 30px;
263     clear: both;*/
264 
265     margin-top:0.3em;
266     height: 2em;
267     clear:both;
268     border:1px solid #999;
269     -moz-border-radius: 11px;
270     -khtml-border-radius: 11px;
271     -webkit-border-radius: 11px;
272     border-radius: 11px;
273     -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
274     background:#FFF;
275     opacity: 0.60;
276 }
277 #navList {
278     min-height: 1.5em;
279     float: left;
280 }
281 #navList li {
282     float: left;
283 }
284 #navList a {
285     display: block;
286     padding-left:0.5em;
287     padding-right:0.5em;
288     line-height:2em;
289     float: left;
290     text-align: center;
291     border-right: 1px solid #999;
292 }
293 #navList a:link, #navList a:visited, #navList a:active {
294 /*    color: #ccc;*/
295 }
296 #navList a:hover {
297     color: #7B68EE;
298     padding-left:0.8em;
299     padding-right:0.8em;
300 }
301 
302 .blogStats {
303     float: right;
304     font-size:0.8em;
305     color: #000;
306     margin-top: 0.9em;
307     margin-right: 0.2em;
308     text-align: right;
309 }
310 /*****home和头部结束**************************/
311 
312 /*****主页文章列表开始**************************/
313 #main{
314     width: 100%;
315     min-width: 70em;
316     text-align: left;
317     background:#FFF5EE;
318     opacity: 0.90;
319 }
320 #mainContent .forFlow{
321     margin-left: 12em;
322     float: none; 
323     width: auto;
324 }
325 
326 #mainContent {
327     min-height: 18em;
328     padding: 0px 0px 10px 0;
329     *padding-top:10px;
330     -o-text-overflow: ellipsis;
331     text-overflow: ellipsis;
332     overflow: hidden;
333     word-break: break-all;
334     
335     float: right;
336     margin-left: -26em;
337     width: 100%
338 }
339 .day {
340     min-height: 10px;
341     _height: 10px;
342     margin-bottom: 20px;
343     padding-bottom: 5px;
344 }
345 .dayTitle {
346     width: 100%;
347     color: #666;
348 
349     font-weight: bold;
350     line-height: 1.5em;
351     font-size: 90%;
352     margin-top: 3px;
353     margin-bottom: 10px;
354     clear:both;
355     border-bottom: 2px solid #e9f3e8;
356     text-align:center;
357 
358 }
359 .postTitle {
360     font-size: 150%;
361     font-weight: bold;
362     /*border-bottom: 1px solid #9DAAF4;*/
363     float: right;
364     line-height: 1.5em;
365     width: 100%;
366     clear:both;
367     text-shadow:-3px 3px 3px #999
368 }
369 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
370     color: #000;
371     transition: all 0.4s linear 0s;
372 }
373 .postTitle a:hover {
374     margin-left: 10px;
375     color: #7B68EE;
376     text-decoration: none;
377     text-shadow:-13px 3px 3px #999
378 }
379 .postCon {
380     float: right;
381     line-height: 1.5em;
382     width: 100%;
383     clear:both;
384     padding: 10px 0;
385 }
386 .postDesc {
387     float: right;
388     width: 100%;
389     clear:both;
390     text-align: right;
391     padding-right: 5px;
392     color: #666;
393     margin-top: 5px;
394 }
395 .postDesc a:link, .postDesc a:visited, .postDesc a:active {
396     color: #666;
397     padding-right: 10px;
398 }
399 .postDesc a:hover {
400     color: #7B68EE;
401     text-decoration: none;
402 }
403 .postSeparator {
404     clear: both;
405     height: 1px;
406     border-top: 1px dotted #666;
407     width: 100%;
408     clear:both;
409     float: right;
410     margin: 0 auto 15px auto;
411 }
412 .diggit{
413     text-align: center;
414     width:50px;
415     height:40px;
416     background:url(http://fq.wc.lt//up/1503755899.png);
417     background-size:100% 100%;
418 }
419 .buryit{
420     font-size:0px;
421     width:0;
422     height:0;
423 }
424 .burynum{
425     font-size:0px;
426     width:0;
427     height:0;
428 }
429 /*****主页文章列表结束**************************/
430 
431 /*****侧边栏开始********************************/
432 #sideBar {
433     width: 14em;
434     min-height: 14em;
435     padding: 0px 0px 0px 5px;
436     float: left;
437     -o-text-overflow: ellipsis;
438     text-overflow: ellipsis;
439     overflow: hidden;
440     word-break: break-all;
441     font-size:0.7em;
442     opacity:0.85;
443 }
444 .counter{
445 }
446 .notice{
447     font-size:xx-small;
448 }
449 .btn_my_zzk{
450   display: inline-block;
451   font-size: 24px;
452   cursor: pointer;
453   text-align: center;   
454   text-decoration: none;
455   outline: none;
456   color: #fff;
457   background-color: #a55b97;
458   border: none;
459   border-radius: 15px;
460   box-shadow: 0 4px #999;
461 }
462 .newsItem .catListTitle {
463     display: none;
464 }
465 .newsItem {
466     padding: 15px 0 5px 0px;
467     font-weight:bold;
468     font-size:14px;
469     margin-bottom: 8px;
470 }
471 /**日历控件样式开始**/
472 #calendar {
473     width: 14em;
474 }
475 #calendar .Cal {
476     width: 100%;
477     line-height: 1.5em;
478 }
479 .Cal {/**日历容器table**/
480     border: none;
481     color: #111;
482 }
483 #calendar table a:link, #calendar table a:visited, #calendar table a:active {
484     font-weight: bold;
485 }
486 #calendar table a:hover {
487     color: #7B68EE;
488     text-decoration: none;
489     background-color: #7B68EE;
490 }
491 .CalTodayDay{/**今天日期样式**/
492     color: #EE82EE;
493 }
494 #calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
495     font-weight: bold;
496     background-color: #7B68EE;
497 }
498 .CalDayHeader{
499     border-bottom:1px solid #ccc;    
500 }
501 .CalTitle{/**日历年月头部样式**/
502     width:100%;
503     background:#FFF;
504     color:black;
505     border-bottom:1px solid #666;    
506 }
507 /**日历控件样式结束**/
508 .catListTitle {
509     font-weight: bolder;
510     font-family:STCaiyun;
511     color:     #B03060;
512     line-height: 2em;
513     font-size: 150%;
514     margin-top: 50px;
515     margin-bottom: 10px;
516     border-bottom: 1px solid #e9f3e8;
517     text-align: center;
518 }
519 .catListComment {
520     line-height: 1.5em;
521 }
522 .divRecentComment {
523     color: #666;
524     margin-bottom:1em;
525 }
526 .c_b_p_link_desc{
527     color: #666;
528     font-size: 30%;
529     margin-bottom:1.5em;
530 }
531 #sideBarMain ul {
532     line-height: 1.5em;
533 }
534 .catListEssay{
535     font-weight: bolder;
536 }
537 .catListTag{
538     font-size: 90%;
539     font-weight: bolder;
540 }
541 .catList{
542     font-weight: bolder;
543 }
544 .catListFeedback{
545     font-weight: bolder;
546 }
547 .catListView{
548     font-weight: bolder;
549 }
550 .recent_comment_title{
551     font-weight: bolder;
552 }
553 .recent_comment_body{
554     font-size: 30%;
555 }
556 .recent_comment_author{
557     color:#666;
558     font-size: 30%;
559 }
560 /*****侧边栏结束********************************/
561 
562 
563 /****查看文章页面开始*************************/
564 #topics {
565     width: 100%;
566     min-height: 18em;
567     padding: 0px 0px 10px 0;
568     float: left;
569     -o-text-overflow: ellipsis;
570     text-overflow: ellipsis;
571     overflow: hidden;
572     word-break: break-all;
573 }
574 #topics .postTitle {
575     font-size: 200%;
576     font-weight: bold;
577     border-bottom: 1px solid #999;
578     float: left;
579     line-height: 1.5em;
580     width: 100%;
581     text-align: center;
582 }
583 .postBody {
584     padding: 5px 2px 5px 5px;
585     line-height: 1.5em;
586     color: #000;
587     border-bottom: 1px solid #8686FF;
588 }
589 #EntryTag {
590     color: #000;
591 }
592 #EntryTag a {
593     margin-left: 5px;
594 }
595 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
596     color: #000;
597 }
598 #EntryTag a:hover {
599     color: #7B68EE;
600 }
601 #topics .postDesc {
602     float: right;
603     width: 100%;
604     font-size:0.9em;
605     text-align: right;
606     padding-right: 5px;
607     color: #000;
608     margin-top: 5px;
609 }
610 .feedback_area_title {
611     font-weight: bold;
612     margin-top: 20px;
613     border-bottom: 1px solid #8686FF;
614     margin-bottom: 10px;
615     padding-left: 8px;
616 }
617 .louzhu {
618     background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top;
619     padding-right:16px;
620 }
621 .layer{
622     font-family:STFangsong;
623     font-size:15px;
624     padding-left: 8px;
625 }
626 .feedbackListSubtitle {
627     margin-left: 10px;
628     color: #666;
629     font-size:0.9em;
630 }
631 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
632     font-weight:bold;
633     color: #666;
634     font-weight: normal;
635 }
636 .feedbackListSubtitle a:hover {
637     color: #7B68EE;
638     text-decoration: none;
639 }
640 .feedbackManage {
641     width: 160px;
642     text-align: right;
643     float: right;
644 }
645 .feedbackCon {
646     font-weight:bold;
647     border-bottom: 1px solid #ccc;
648     padding: 15px 18px 20px 50px;
649     min-height: 35px;
650     _height: 35px;
651     margin-bottom: 1em;
652     line-height: 1.5em;
653     width:80%;
654 }
655 #divRefreshComments {
656     text-align: right;
657     margin-bottom: 10px;
658 }
659 .commenttb {
660     width: 320px;
661 }
662 .cnblogs_code{
663 }
664 .comment_actions{
665     margin-right:30px;
666     font-size:16px;
667     font-family:STFangsong;
668 }
669 .comment_digg{
670     font-weight:bold;
671     margin-right:10px;
672     font-size:15px;
673     font-family:STXinwei;
674 }
675 .comment_bury{
676     font-weight:bold;
677     margin-right:10px;
678     font-size:15px;
679     font-family:STXinwei;
680 }
681 /****查看文章页面结束************************
682 
683 /****列表页面开始******************************/
684 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
685     font-size: 110%;
686     font-weight: bold;
687     border-bottom: 1px solid #8686FF;
688     text-align: right;
689     padding-bottom: 3px;
690     padding-right: 10px;
691 }
692 
693 .entrylistDescription {
694     color: #666;
695     text-align: right;
696     padding-top: 5px;
697     padding-bottom: 5px;
698     padding-right: 10px;
699     margin-bottom: 10px;
700 }
701 .entrylistItem {
702     min-height: 20px;
703     _height: 20px;
704     margin-bottom: 30px;
705     padding-bottom: 5px;
706     width: 100%;
707 }
708 .entrylistPosttitle {
709     font-size: 110%;
710     font-weight: bold;
711     border-bottom: 1px solid #666;
712     line-height: 1.5em;
713     width: 100%;
714     padding-left: 5px;
715 }
716 .entrylistPosttitle a:hover {
717     text-decoration: none;
718 }
719 .entrylistPostSummary {
720     margin-top: 5px;
721     padding-left: 5px;
722     margin-bottom: 5px;
723 }
724 .entrylistItemPostDesc {
725     padding-left: 50px;
726     text-align: right;
727     color: #666;
728 }
729 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
730     color: #666;
731 }
732 .entrylistItemPostDesc a:hover {
733     color: #7B68EE;
734 }
735 .entrylist .postSeparator {
736     clear: both;
737     width: 100%;
738     font-size: 0;
739     line-height: 0;
740     margin: 0;
741     padding: 0;
742     height: 0;
743     border: none;
744 }
745 
746 .pager {
747     text-align: right;
748     margin-right: 10px;
749 }
750 .PostList {
751     border-bottom: 1px solid #ccc;
752     clear: both;
753     min-height: 1.5em;
754     _height: 1.5em;
755     padding-top: 10px;
756     padding-left: 5px;
757     padding-right: 5px;
758     margin-bottom: 5px;
759 }
760 .postTitl2 {
761     float: left;
762     font-size:0.9em;
763     color: #666;
764 }
765 .postDesc2 {
766     color: #666;
767     float: right;
768     margin-right: ;
769     font-size:0.9em;
770 }
771 .postText2 {
772     clear: both;
773     
774 }
775 .pfl_feedback_area_title {
776     text-align: right;
777     line-height: 1.5em;
778     font-weight: bold;
779     border-bottom: 1px solid #666;
780     margin-bottom: 10px;
781 }
782 .pfl_feedbackItem {
783     border-bottom: 1px solid black;
784     margin-bottom: 20px;
785 }
786 .pfl_feedbacksubtitle {
787     width: 100%;
788     border-bottom: 1px dotted #666;
789     height: 1.5em;
790 }
791 .pfl_feedbackname {
792     float: left;
793 }
794 .pfl_feedbackManage {
795     float: right;
796 }
797 .pfl_feedbackCon {
798     color: black;
799     padding-top: 5px;
800     padding-bottom: 5px;
801 }
802 .pfl_feedbackAnswer {
803     color: #F40;
804     text-indent: 2em;
805 }
806 .tdSentMessage {
807     text-align: right;
808 }
809 .errorMessage {
810     width: 300px;
811     float: left;
812 }
813 
814 /****列表页面结束******************************/*/
815 /****相册页面开始******************************/
816 .divPhoto {
817     border: 1px solid #ccc;
818     padding: 2px;
819     margin-right: 10px;
820 }
821 
822 .thumbDescription {
823     color: #666;
824     text-align: right;
825     padding-top: 5px;
826     padding-bottom: 5px;
827     padding-right: 10px;
828     margin-bottom: 10px;
829 }
830 /****相册页面结束******************************/
831 
832 
833 /*****留言页面开始*****************************/
834 #footer {
835     text-align: center;
836     min-height: 15px;
837     _height: 15px;
838     border-top: 1px solid black;
839     margin-top: 10px;
840     padding-top: 10px;
841     margin-bottom: 10px;
842 }
843 /*留言查看页面的个人信息*/
844 .personInfo {
845     margin-bottom: 20px;
846 }
847 /*留言分页区域*/
848 .pages {
849     text-align: right;
850 }
851 /*****留言页面结束*****************************/
852 /*****第三部分结束*******************************/
853 
854 /**************************************************
855 第四部分:文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如:
856 如果作者的文章用有p标签,则可通过这个对这些文章中的p标签进行设置。前面
857 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
858 建议这个不要设置过于详细的细节。因为,一些样式,一篇文章比较适合的话,
859 并不能保证所有的文章都适合。
860 **************************************************/
861 /*文章内部常用标签格式*/
862 .postBody {
863     line-height: 1.5em;
864 }
865 .postBody p,.postCon  p{
866     text-indent: 2em;
867     margin: 0 auto 1em auto;
868 }
869 .postBody h2{
870     font-size: 150%;
871     margin: 15px auto 2px auto;
872     font-weight:bold;
873 }
874 .postBody h3 {
875     font-size: 120%;
876     margin: 15px auto 2px auto;
877     font-weight:bold;
878 }
879 .postBody h4{
880     font-size:110%;
881     margin:15px auto 2px auto;
882     font-weight:bold;
883     color:#333;
884 }
885 
886 .postBody h5{
887     font-size:100%;
888     margin:15px auto 2px auto;
889     font-weight:bold;
890     color:#333;
891 }
892 
893 .postBody a:link,.postBody a:visited,.postBody a:active{
894     text-decoration:none;
895 }
896 .postCon a:link,.postCon a:visited,.postCon a:active{
897     text-decoration:none;
898 }
899 .postBody ul,.postCon ul{
900     margin-left:2em;    
901 }
902 
903 .postBody li,.postCon li{
904     list-style-type:disc;
905     margin-bottom:1em;
906 }
907 
908 .postBody blockquote{
909     background:url('/images/comment.gif') no-repeat 25px 0px;
910     padding:10px 60px 5px 60px;
911     min-height:35px;
912     _height:35px;
913     line-height:1.6em;
914     color:#333;
915 }
916 /*****第四部分结束*******************************/

  当初我也是拿别人代码当模板来改的,不过现在可能有点面目全非了。

  那么现在,我们可以把这份别人的模板改成自己的风格,基本上CSS代码里参数的命名都是按元素的英文命名的,挺好认的,或者你可以把这个参数改改,看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时,你可以寻找一下这个元素在html代码里面的位置(在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素),看一下这个元素的id和class的名字是啥,在CSS代码里找找就行了。

  界面的颜色除了有black、white这类设定好的颜色之外,你可以找一个RGB颜色对照表,想要啥就丢啥。

  遇到有啥不会调的参数,基本搜一下“CSS+参数名字”就有详细介绍,毕竟这东西网上教程很多。

  比方说延迟变换可以用transition-property来做,而文字阴影效果是text-shadow,这些都是我自己在做的时候折腾了好一会的。

  Chrome(我不知道其他浏览器能不能)有个好处是你修改了个参数,他会立刻应用变换,这样就可以调到舒心再贴进自定义CSS代码里。

  还有就是你最好把CSS代码备份一下,不然要是误删了就GG,博主亲身体验T_T。

  这期间你可能需要一些好看的图片什么的,我自己资源是P站找的(Pixiv),一些比较普通的就百度图片吧,然后开个画图,开个Photoshop自己改改就能用了,图床直接用博客园就行了(开个不发布的随笔就能存图了,图片上右键可以获得图片链接地址)。

  这时候自己的blog已经比较好看了是不是啊?

②修改鼠标图案

  把这个放在第二是我按自己的操作顺序来的。

  没啥特别要说的,就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站,这里推荐小白的文件床(http://fq.wc.lt/)或者是sm.ms(https://sm.ms/),不知道是哪位大神弄的,太良心了。

body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}

③公告栏的设置

  折腾了一段时间以后应该对html也有了一定的了解,首先在博客园管理的设置页中把JS代码权限申请了,批准挺快的,然后就可以为所欲为了(雾)……

  首先你可以在侧边栏加点计数器,加点flash动画什么的,这些一般是找别人做好的,链过来或者抄过来就行。

  要搞js的话建议在网上找个教程看看,看它个把小时就基本能拿来用用了(其实跟c++挺像的,应该说java跟c++比较像吧),以后遇到不会的回去查查就行。

  我拿js做的大概就是加了一些小挂件,比方说左上角的西瓜是获取main元素之后把opacity(透明度)调到0就行,结合一下onmouseover、onmouseout什么的就能做出浮动效果,还是很赞的。

  尝试着做个推荐按钮,一直做不成,估计是被过滤了。发邮件去问博客园那边也是这是禁止的。

  目录我大多数还是参考swm_sxt,做的太良心了,perfect!

我的公告栏代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div class="head_img"><img width="160" height="160" alt="我的头像" src="https://i.loli.net/2017/08/02/598187babf39e.gif" class="img_avatar"><div>
 6 
 7 <p>做题做得心累的时候</p>
 8 <p>就看看背景吧</p>
 9 <p>想看背景的时候</p>
10 <p>请点击左上角西瓜一枚</p>
11 <p>右上角月亮有彩蛋</p>
12 <p>蒟蒻一枚,有事您Q我~</p>
13 <p>ECJTU的一个挣扎的ACMer</p>
14 <p>我的QQ在这哦!873284962~</p>
15 <p>我的微信在这哦!nzf6698【加好友请注明姓名和来源哦,谢谢各位支持^-^】~</p>
16 <p>喵~允许我卖一个萌~~~~</p>
17 <p>热爱交友!orz</p>
18 <p>希望大家多多支持,觉得文章好可以点个赞,动动你的鼠标加下关注哦</p>
19 <p>非常乐意互换友链呐,~o( =∩ω∩= )喵~~~~</p>
20 <p>有事您Q我,我一直在哦~:</p><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=873284962&amp;site=qq&amp;menu=yes">
21   <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:873284962:41 &amp;r=0.30709030851721764" alt="欢迎与我联系" title="欢迎与我联系">
22 </a>
23 <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
24 <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="150" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>
25 <p>求投食~(点图即可)</p>
26 <p>玩法:拖动小球至任意位置投放,让小球自由落地,每轮五个球,右上角有一个重新开始的按钮,祝欧尼酱能看的舒服,玩的开心,喵~~</p>
27 <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/discdrop/discDrop.swf?" width="150" height="225"><param name="movie" value="http://cdn.abowman.com/widgets/discdrop/discDrop.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object>
28 <p>看看你能得几分,欧尼酱,喵~~</p>
29 <p>我的访客量统计:Start From 2017.5.29 19:00</p>
30 <div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3214944&c=9645145" alt="AmazingCounters.com"></a></div>
31 <a href="http://info.flagcounter.com/G05j"><img src="http://s07.flagcounter.com/count/G05j/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_250/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
32 
33 <!-- Your XlchPlayerKey -->
34 <script>XlchKey="d9zz3e6DHX";</script>
35 <!-- font-awesome 4.2.0 -->
36 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
37 <!-- JQuery 2.2.4 -->
38 <script src="http://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
39 <!-- JQuery-mousewheel 3.1.9 -->
40 <script src="http://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
41 <!-- Scrollbar -->
42 <script src="http://static.badapple.top/BadApplePlayer/js/scrollbar.js"></script>
43 <!-- BadApplePlayer -->
44 <script src="http://static.badapple.top/BadApplePlayer/Player.js"></script>
45 </body>
46 </html>

关于背景音乐

  之前我有用过的是虾米音乐,其实外观确实很丑,今天看了大佬yji的博客,发现他的音乐播放器挺好看的,问了下才知道有个绚丽彩虹播放器,良心播放器,竟然是一个小姑娘,上初二时写的,我自愧不如,人家初二,我大二都搞不出这个玩意出来QAQ

下面是我的背景音乐的源码(加到/body之前就可以用了)

 1 <!-- Your XlchPlayerKey -->
 2 <script>XlchKey="d9zz3e6DHX";</script>
 3 <!-- font-awesome 4.2.0 -->
 4 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 5 <!-- JQuery 2.2.4 -->
 6 <script src="http://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
 7 <!-- JQuery-mousewheel 3.1.9 -->
 8 <script src="http://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
 9 <!-- Scrollbar -->
10 <script src="http://static.badapple.top/BadApplePlayer/js/scrollbar.js"></script>
11 <!-- BadApplePlayer -->
12 <script src="http://static.badapple.top/BadApplePlayer/Player.js"></script>

我现在的页首:

  1 <!DOCTYPE html>
  2 <html>
  3 <body>
  4 
  5 <style>
  6 #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
  7 </style>
  8 
  9 <input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">
 10 
 11 <input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">
 12 
 13 <input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">
 14 
 15 <input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">
 16 
 17 <a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
 18 <a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right:150px;bottom:130px;">首页</a>
 19 <a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right:10px;bottom:130px;">私信博主</a>
 20 <a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
 21 <a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
 22 <a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
 23 
 24 <script>
 25 function GetRandomNum(Min,Max){
 26     var Range=Max-Min;
 27     var Rand=Math.random();
 28     return(Min+Math.round(Rand * Range));
 29 }
 30 function ShowTab(){
 31     x=document.getElementById("MagicArray");
 32     if (x.style.width=="200px"){
 33         x.style.width="0px";
 34         x.style.height="0px";
 35         x.style.bottom="100px";
 36         x.style.right="100px";
 37         x.style.transform="rotate(0deg)";
 38     }else{
 39         x.style.width="200px";
 40         x.style.height="200px";
 41         x.style.bottom="0px";
 42         x.style.right="0px";
 43         x.style.transform="rotate(180deg)";
 44     }
 45     
 46     y=document.getElementsByName("Tab");
 47     for (var i=0;i<y.length;i++){
 48         x=y[i];
 49         if (x.style.fontSize=="15px"){
 50             x.style.fontSize="0px";
 51             x.style.transitionDelay="0s";
 52         }else{
 53             x.style.fontSize="15px";
 54             x.style.transitionDelay="0.8s";
 55         }
 56     }
 57 }
 58 function ShowPicture(){
 59     x=document.getElementById("main");
 60     x.style.opacity=0.9-x.style.opacity;
 61 }
 62 function ChangePicture(){
 63     x=document.body;
 64     y=GetRandomNum(0,14);
 65     if (y==0){
 66         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
 67         x.style.backgroundSize="cover";
 68     }else if (y==1){
 69         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
 70         x.style.backgroundSize="cover";
 71     }else if (y==2){
 72         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
 73         x.style.backgroundSize="cover";
 74     }else if (y==3){
 75         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
 76         x.style.backgroundSize="cover";
 77     }else if (y==4){
 78         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
 79         x.style.backgroundSize="cover";
 80     }else if (y==5){
 81         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
 82         x.style.backgroundSize="cover";
 83     }else if (y==6){
 84         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
 85         x.style.backgroundSize="cover";
 86     }else if (y==7){
 87         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
 88         x.style.backgroundSize="cover";
 89     }else if (y==8){
 90         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
 91         x.style.backgroundSize="cover";
 92     }else if (y==9){
 93         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
 94         x.style.backgroundSize="cover";
 95     }else if (y==10){
 96         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
 97         x.style.backgroundSize="cover";
 98     }else if (y==11){
 99         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
100         x.style.backgroundSize="cover";
101     }else if (y==12){
102         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
103         x.style.backgroundSize="cover";
104     }else if (y==13){
105         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
106         x.style.backgroundSize="cover";
107     }else if (y==14){
108         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
109         x.style.backgroundSize="cover";
110     }
111 }
112 
113 </script>
114 
115 
116 </body>
117 </html>

我之前的页首:

  1 <script type="text/javascript" src="http://files.cnblogs.com/ECJTUACM-873284962/swfobject.js"></script>
  2 
  3       <script type="text/javascript" src="http://demo.zjmainstay.cn/cnblogs/getTags.php?url=http%3A%2F%2Fwww.cnblogs.com%2FECJTUACM-873284962%2Ftag%2F"></script>
  4       <script type="text/javascript" src="http://files.cnblogs.com/ECJTUACM-873284962/ECJTUACM-873284962_cnblogs_tags.js"></script>
  5 
  6 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/bootstrap.min.css">
  7 <script src="http://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script>
  8 <script src="http://files.cnblogs.com/files/candy99/bootstrap.min.js"></script>
  9 <script src="http://files.cnblogs.com/files/candy99/bootbox.min.js"></script>
 10 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/slider.min.css">
 11 <div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;">
 12 <div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_1" class="slider_cube" style="left: 0px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_2" class="slider_cube" style="left: 0px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -238.667px; background-size: 1280px 360px; top: -17.1315px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: 0px -238.667px; background-size: 1280px 360px; top: 102.202px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_0" class="slider_cube" style="left: 128.1px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_1" class="slider_cube" style="left: 128.1px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_2" class="slider_cube" style="left: 128.1px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: -28.6099px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: 90.7234px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_0" class="slider_cube" style="left: 256.2px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_1" class="slider_cube" style="left: 256.2px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_2" class="slider_cube" style="left: 256.2px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: -28.2206px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: 91.1127px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_0" class="slider_cube" style="left: 384.3px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_1" class="slider_cube" style="left: 384.3px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_2" class="slider_cube" style="left: 384.3px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: -16.2405px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: 103.093px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_0" class="slider_cube" style="left: 512.4px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_1" class="slider_cube" style="left: 512.4px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_2" class="slider_cube" style="left: 512.4px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: -14.4504px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: 104.883px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_0" class="slider_cube" style="left: 640.5px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_1" class="slider_cube" style="left: 640.5px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_2" class="slider_cube" style="left: 640.5px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: -57.4707px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: 61.8625px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_0" class="slider_cube" style="left: 768.6px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_1" class="slider_cube" style="left: 768.6px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: -1.19332px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: 118.14px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_2" class="slider_cube" style="left: 768.6px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: -89.6487px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: 29.6844px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_0" class="slider_cube" style="left: 896.7px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_1" class="slider_cube" style="left: 896.7px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: -0.584714px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: 118.749px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_2" class="slider_cube" style="left: 896.7px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: -110.144px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: 9.18943px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_0" class="slider_cube" style="left: 1024.8px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_1" class="slider_cube" style="left: 1024.8px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: -7.43146px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: 111.902px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_2" class="slider_cube" style="left: 1024.8px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: -119.004px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: 0.328916px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_0" class="slider_cube" style="left: 1152.9px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_1" class="slider_cube" style="left: 1152.9px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: -2.56493px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: 117.138px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_2" class="slider_cube" style="left: 1152.9px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: -119.333px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div></div></div>
 13 </div>
 14 <script src="http://files.cnblogs.com/files/lianmin/slider1.2.min.js"></script>
 15 
 16 <script type="text/javascript">
 17     $("#imgBar").slider({
 18         imgs: [
 19             "https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg",
 20             "https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg",
 21             "https://images0.cnblogs.com/blog/708426/201501/100602118284450.jpg"],
 22         scale: 128 / 36,
 23         border: true,
 24         delay: 2200,
 25         x: 10,
 26         y: 3
 27     });
 28 
 29 
 30 function makeOpen(url){
 31 return eval('wind' + 'ow.o' + 'pen("'+url+'")');
 32 }
 33 </script>
 34 
 35 <script type="text/x-mathjax-config">
 36   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 37 </script>
 38 <script type="text/javascript"
 39   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 40 </script>
 41 <a href="https://github.com/Jackson0714" target="_blank">
 42   <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" >
 43 </a>
 44 <style type="text/css">
 45     .Abstract
 46     {
 47         padding: 15px;
 48         border: dotted 2px #999;
 49         color: #999;
 50         font-family: 'Microsoft Yahei';
 51         border-radius: 4px;
 52     }
 53         
 54     .First
 55     {
 56         margin: 10px 0;
 57         font-family: 'Microsoft Yahei';
 58         text-align: left;
 59         padding: 6px 20px;
 60         color: #fff;
 61         background: #55895B;
 62         font-size: 20px;
 63         border-radius: 4px;
 64         clear: both;
 65     }
 66         
 67         
 68     .Second
 69     {
 70         margin: 10px 0;
 71         font-family: 'Microsoft Yahei';
 72         padding: 6px 20px;
 73         background: #93C8A2;
 74         color: #fff;
 75         font-size: 18px;
 76         border-radius: 4px;
 77         clear: both;
 78     }
 79         
 80         
 81     .Third
 82     {
 83         margin: 10px 0;
 84         padding: 6px 20px;
 85         font-family: 'Microsoft Yahei';
 86         margin: 15px 0;
 87         font-size: 16px;
 88         color: fff;
 89         background: #C6EFD2;
 90         color: #999;
 91         border-radius: 4px;
 92         clear: both;
 93     }
 94     .note
 95     {
 96         margin: 10px 0;
 97         padding: 15px 20px 15px 60px;
 98         background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0;
 99         font-size: 15px;
100         font-family: 'Microsoft Yahei';
101         box-shadow: 0 0 8px #aaa;
102         clear: both;
103     }
104         
105     .demo
106     {
107         text-align: left;
108         padding: 6px 20px;
109         overflow: auto;
110         border-radius: 4px;
111         background: orange;
112         color: #fff;
113         font-size: 16px;
114         clear: both;
115     }
116         
117     .cnblogs_Highlighter
118     {
119         border: solid 1px #ccc;
120         clear: both;
121     }
122         
123     .cnblogs_code
124     {
125         background: #EFFFF4;
126         border: solid 0px #939393;
127         font-size: 14px;
128         clear: both;
129         padding: 10px 20px;
130     }
131     .cnblogs_code pre
132     {
133         font-size: 14px;
134     }
135     .cnblogs_code span
136     {
137         font-family: Courier New;
138         font-size: 14px;
139     }
140 </style>

我现在的页脚:

 1 <div class="fixedIndexs" style="position: fixed;opacity:0.5;bottom:300px;display: none"></div>
 2 <script language="javascript" type="text/javascript">
 3 var fixedIndexs=$('.fixedIndexs');
 4 var hs = $('#cnblogs_post_body h2');
 5 function openorclose(a) {
 6     $("#indexs").slideToggle("fast");
 7     var text=$(a).text();
 8     if(text=='[-]'){
 9         $(a).text("[+]");
10         return;
11     }
12     $(a).text("[-]");
13 }
14 function createIndexs(){
15     var indexs_container=$('<div style="border:solid 1px #ccc; background:#CD6889;width:200px;padding:4px 10px;"></div>');
16     var indexs_controller=$('<p style="text-align:right;margin:10;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
17     var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
18     indexs_container.append(indexs_controller).append(indexs);
19     $.each(hs,function(i,h){
20         $(h).before('<a name="index_'+i+'"></a>');
21         indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
22     });
23     if(hs.length!=0){
24         fixedIndexs.append(indexs_container);
25         //get home div right offset
26         fixedIndexs.css('right',30+'px');
27     }
28 }
29 createIndexs();
30 fixedIndexs.hide();
31 </script>

之前也有写过页脚,不过不是很好看,不过就是加了些链接,然后多介绍了下自己

我也把它贴出来吧~~~

 1 <div id="ECJTUACM-873284962CnblogsSWFTags"></div>
 2 <div class="cnblogs_Highlighter">
 3 <div style="text-align:left; margin:0 17px; ling-height:24px;">
 4 <p style="color:#2a6496; padding:15px;"><i class="fa fa-pencil fa-5x fa-spin"></i></p>
 5 <p><a target="_blank" href="http://www.cnblogs.com/ECJTUACM-873284962/">ACM竞赛&数学建模竞赛</a> - 创建于 2017年2月2日</p>
 6 <p><i class="fa fa-hand-o-right"></i> 这是一位ACM爱好者&数学爱好者的个人站,内容主要是算法&数据结构&数学研究的技术文章,大部分来自学习,部分来源于网络,希望对大家有所帮助。</p>
 7 <p>致力于ACM算法研究工作,喜爱交友,关注互联网前沿技术与趋势。</p> <br /><p> <a target="_blank" href="http://fontawesome.io/">Font Awesome</a> |  
 8 <a target="_blank" href="https://github.com/aFarkas/html5shiv">Respond.js</a> |  
 9 <a target="_blank" href="http://www.bootcss.com/">Bootstrap中文网</a> </p> </div>
10 
11 <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"1","bdPos":"right","bdTop":"120"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
12 </div>

④关于CSS动画特效

  很多人对我的图片动画特效感兴趣,我今天把页面风格调整了下,所以那个动画特效我就没有加上去了,似乎有些不兼容的特点~~~我还在努力的调整QAQ

大概只要把我的这段CSS代码中三个图片换成你想要的风格就好了,感谢Candy?大神~~~

 1 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/bootstrap.min.css">
 2 <script src="http://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script>
 3 <script src="http://files.cnblogs.com/files/candy99/bootstrap.min.js"></script>
 4 <script src="http://files.cnblogs.com/files/candy99/bootbox.min.js"></script>
 5 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/slider.min.css">
 6 <div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;">
 7 <div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_1" class="slider_cube" style="left: 0px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_2" class="slider_cube" style="left: 0px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: 0px -238.667px; background-size: 1280px 360px; top: -17.1315px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: 0px -238.667px; background-size: 1280px 360px; top: 102.202px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_0" class="slider_cube" style="left: 128.1px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_1" class="slider_cube" style="left: 128.1px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_2" class="slider_cube" style="left: 128.1px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: -28.6099px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: 90.7234px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_0" class="slider_cube" style="left: 256.2px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_1" class="slider_cube" style="left: 256.2px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_2" class="slider_cube" style="left: 256.2px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: -28.2206px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: 91.1127px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_0" class="slider_cube" style="left: 384.3px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_1" class="slider_cube" style="left: 384.3px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_2" class="slider_cube" style="left: 384.3px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: -16.2405px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: 103.093px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_0" class="slider_cube" style="left: 512.4px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_1" class="slider_cube" style="left: 512.4px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_2" class="slider_cube" style="left: 512.4px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: -14.4504px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: 104.883px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_0" class="slider_cube" style="left: 640.5px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_1" class="slider_cube" style="left: 640.5px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_2" class="slider_cube" style="left: 640.5px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: -57.4707px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: 61.8625px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_0" class="slider_cube" style="left: 768.6px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_1" class="slider_cube" style="left: 768.6px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: -1.19332px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: 118.14px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_2" class="slider_cube" style="left: 768.6px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: -89.6487px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: 29.6844px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_0" class="slider_cube" style="left: 896.7px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_1" class="slider_cube" style="left: 896.7px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: -0.584714px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: 118.749px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_2" class="slider_cube" style="left: 896.7px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: -110.144px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: 9.18943px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_0" class="slider_cube" style="left: 1024.8px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_1" class="slider_cube" style="left: 1024.8px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: -7.43146px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: 111.902px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_2" class="slider_cube" style="left: 1024.8px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: -119.004px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: 0.328916px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_0" class="slider_cube" style="left: 1152.9px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_1" class="slider_cube" style="left: 1152.9px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: -2.56493px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: 117.138px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_2" class="slider_cube" style="left: 1152.9px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg&quot;); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: -119.333px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url(&quot;https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg&quot;); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div></div></div>
 8 </div>
 9 <script src="http://files.cnblogs.com/files/lianmin/slider1.2.min.js"></script>
10 
11 <script type="text/javascript">
12     $("#imgBar").slider({
13         imgs: [
14             "https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg",
15             "https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg",
16             "https://images0.cnblogs.com/blog/708426/201501/100602118284450.jpg"],
17         scale: 128 / 36,
18         border: true,
19         delay: 2200,
20         x: 10,
21         y: 3
22     });
23 
24 
25 function makeOpen(url){
26 return eval('wind' + 'ow.o' + 'pen("'+url+'")');
27 }
28 </script>

⑤用Canvas和requestAnimFrame做动画特效

  指的是背景里面跑来跑去的星星什么的……

  这东西也不难学的,就是requestAnimFrame会自动帮你定时调用一段函数,然后你在函数里面用canvas写写绘图就行了,写得再丑最后效果好像都是挺平滑的,好像是浏览器会自动优化。

  我大概就是让每一帧画面都有一定概率生成一个星星(图什么的自己拿PS画画就行了),然后给一个下落速度和角度什么的。本来用了一些弹性碰撞公式来做碰撞的,但最后效果并不好,索性忽略质量差别的问题,碰撞了就交换速度和角度。

  学习使用requestAnimFrame的时候感觉最大的难点就是网上的代码大多加了很多效果,而导致代码很长,研读起来找不到自己真正想要的部分,其实只需要像下面这么写。(参考至swm_sxt)

 1 <script>
 2     window.requestAnimFrame=
 3         window.requestAnimationFrame||
 4         window.webkitRequestAnimationFrame||
 5         window.mozRequestAnimationFrame||
 6         window.oRequestAnimationFrame||
 7         window.msRequestAnimationFrame||
 8         function(callback){window.setTimeout(callback, 1000/60);};
 9     function work(timestamp){
10         timer=requestAnimationFrame(work);
11     }
12     timer=requestAnimationFrame(work);
13 </script>

下面是加了新特效后,我的页首HTML代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <body>
  4 
  5 <style>
  6 #Canvas{
  7     position:fixed;
  8     top:0px;
  9     left:0px;
 10 }
 11 </style>
 12 
 13 <canvas id="Canvas"></canvas>
 14 
 15 <style>
 16 #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
 17 </style>
 18 
 19 <input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">
 20 
 21 <input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">
 22 
 23 <input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">
 24 
 25 <input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">
 26 
 27 <a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
 28 <a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right:150px;bottom:130px;">首页</a>
 29 <a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right:10px;bottom:130px;">私信博主</a>
 30 <a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
 31 <a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
 32 <a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
 33 <a name="Tab" id="Tab1" style="right:85px;bottom:88px;" onclick="control()">动画</a>
 34 
 35 <script>
 36     window.requestAnimFrame=
 37         window.requestAnimationFrame||
 38         window.webkitRequestAnimationFrame||
 39         window.mozRequestAnimationFrame||
 40         window.oRequestAnimationFrame||
 41         window.msRequestAnimationFrame||
 42         function(callback){window.setTimeout(callback, 1000/10);};
 43     var W=document.body.scrollWidth,H=document.body.scrollHeight;
 44     var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
 45     var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
 46     var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
 47     var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
 48     ca.width=W;ca.height=H;
 49     img1.src="http://fq.wc.lt//up/1504690030.png";
 50     img2.src="http://fq.wc.lt//up/1504690047.png";
 51     img3.src="http://fq.wc.lt//up/1504690062.png";
 52     img4.src="http://fq.wc.lt//up/1504690077.png";
 53     
 54     function RandomNum(Min,Max){
 55         var Range=Max-Min;
 56         var Rand=Math.random();
 57         return(Min+Math.round(Rand * Range));
 58     }
 59     function RandomReal(Min,Max){
 60         return Min+(Max-Min)*Math.random();
 61     }
 62     function abs(W){return W<=0?-W:W;}
 63     function drawtail(px,py,an){
 64         an=Math.atan(an);
 65         for (var i=0;i<10;i++){
 66             var X,Y;
 67             Y=Math.sqrt(RandomReal(0,lline*lline));
 68             X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
 69             Y=lline-Y;
 70             X+=10;
 71             el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
 72         }
 73     }
 74     function drawstar(px,py,ti){
 75         if (ti==1) el.drawImage(img1,px,py,20,20);else
 76         if (ti==2) el.drawImage(img2,px,py,20,20);else
 77         if (ti==3) el.drawImage(img3,px,py,20,20);else
 78         if (ti==4) el.drawImage(img4,px,py,20,20);
 79     }
 80     function drawline(sx,sy,px,py){
 81         el.beginPath();
 82         el.moveTo(sx,sy);
 83         el.lineTo(px,py);
 84         el.stroke();
 85         el.closePath();
 86     }
 87     function dis(sx,sy,px,py){
 88         return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
 89     }
 90     function work(timestamp){
 91         if (RandomNum(0,5)==0){
 92             x.push(RandomNum(0,W));
 93             y.push(RandomNum(0,H));
 94             t.push(0);
 95             TT.push(RandomNum(3,10));
 96             speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
 97             angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
 98             for (;;){
 99                 if (Math.random()<=0.7) y[num]=0;else{
100                     y[num]%=200;
101                     if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
102                 }
103                 var i;
104                 for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
105                 if (i==num) break;
106                 x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
107             }
108             num++;
109         }
110         el.clearRect(0,0,W,H);
111         el.fillStyle="#7B68EE";
112         var tmp;
113         for (var i=0;i<num;i++)
114         for (var j=i+1;j<num;j++)
115         if (dis(x[i],y[i],x[j],y[j])<20){
116             tmp=speed[i];
117             speed[i]=speed[j];
118             speed[j]=tmp;
119             
120             tmp=angle[i];
121             angle[i]=angle[j];
122             angle[j]=tmp;
123         }
124         for (var i=0;i<num;i++){
125             //el.fillRect(x[i],y[i],10,10);
126             drawtail(x[i],y[i],angle[i]);
127             drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
128             y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
129             t[i]++;
130             if (y[i]>=H||x[i]<0||x[i]>=W){
131                 num--;
132                 x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
133                 x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
134                 i--;
135             }
136         }
137         timer=requestAnimationFrame(work);
138     }
139     timer=requestAnimationFrame(work);
140     var sta=1;
141     function control(){
142         if (sta==1){
143             cancelAnimationFrame(timer);
144             ca.style.opacity="0";
145             sta=0;
146         }else{
147             timer=requestAnimationFrame(work);
148             ca.style.opacity="1";
149             sta=1;
150         }
151     }
152     
153     
154     function ShowTab(){
155         dx=document.getElementById("MagicArray");
156         if (dx.style.width=="200px"){
157             dx.style.width="0px";
158             dx.style.height="0px";
159             dx.style.bottom="100px";
160             dx.style.right="100px";
161             dx.style.transform="rotate(0deg)";
162         }else{
163             dx.style.width="200px";
164             dx.style.height="200px";
165             dx.style.bottom="0px";
166             dx.style.right="0px";
167             dx.style.transform="rotate(180deg)";
168         }
169     
170         dy=document.getElementsByName("Tab");
171         for (var i=0;i<y.length;i++){
172             dx=dy[i];
173             if (dx.style.fontSize=="15px"){
174                 dx.style.fontSize="0px";
175                 dx.style.transitionDelay="0s";
176             }else{
177                 dx.style.fontSize="15px";
178                 dx.style.transitionDelay="0.8s";
179             }
180         }
181     }
182     function ShowPicture(){
183         dx=document.getElementById("main");
184         if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
185     }
186     function ChangePicture(){
187         dx=document.body;
188         dy=RandomNum(0,14);
189         if (dy==0){
190             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
191             dx.style.backgroundSize="cover";
192         }else if (dy==1){
193             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
194             dx.style.backgroundSize="cover";
195         }else if (dy==2){
196             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
197             dx.style.backgroundSize="cover";
198         }else if (dy==3){
199             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
200             dx.style.backgroundSize="cover";
201         }else if (dy==4){
202             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
203             dx.style.backgroundSize="cover";
204         }else if (dy==5){
205             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
206             dx.style.backgroundSize="cover";
207         }else if (dy==6){
208             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
209             dx.style.backgroundSize="cover";
210         }else if (dy==7){
211             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
212             dx.style.backgroundSize="cover";
213         }else if (dy==8){
214             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
215             dx.style.backgroundSize="cover";
216         }else if (dy==9){
217             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
218             dx.style.backgroundSize="cover";
219         }else if (dy==10){
220             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
221             dx.style.backgroundSize="cover";
222         }else if (dy==11){
223             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
224             dx.style.backgroundSize="cover";
225         }else if (dy==12){
226             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
227             dx.style.backgroundSize="cover";
228         }else if (dy==13){
229             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
230             dx.style.backgroundSize="cover";
231         }else if (dy==14){
232             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
233             dx.style.backgroundSize="cover";
234         }
235     }
236     ChangePicture();
237 </script>
238 
239 </body>
240 </html>

 

  

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
|
5月前
|
存储 Shell 开发工具
博客添加评论功能及定制化样式
博客添加评论功能及定制化样式
|
5月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
48 0
|
Web App开发 前端开发 JavaScript
如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版
如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版
|
Web App开发 JSON 前端开发
授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版
授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版
|
前端开发
前端学习案例-自定义navLink&自定义导航1
前端学习案例-自定义navLink&自定义导航1
73 0
前端学习案例-自定义navLink&自定义导航1
|
数据处理 C#
基于C#的ArcEngine二次开发39:GP工具的使用--界面、参数及示例代码
基于C#的ArcEngine二次开发39:GP工具的使用--界面、参数及示例代码
基于C#的ArcEngine二次开发39:GP工具的使用--界面、参数及示例代码
|
数据采集 搜索推荐 Shell
Hexo博客功能扩展 - 菜单,SEO以及作者信息
Hexo博客功能扩展 - 菜单,SEO以及作者信息
205 0
自定义博客样式
自定义博客样式 用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。 有一些问题没解决,还有些功能没实现。 模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。
1080 0