博客园自定义页面风格设计详解编程语言

2021年7月19日 11:59 • 编程笔记

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

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

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><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>

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/11869.html

c go java php python xml