博客园自定义页面风格设计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园自定义页面风格设计相关的知识，希望对你有一定的参考价值。
最近好多人问我博客的页面设计模版，时间挺紧张的，赶着搞策划和学习。。。趁着现在放假写写吧~~~
全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用Simple Memory，可以自适应，方便我们进行页面CSS定制
论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ
①拥有自己的CSS代码
我自己是完全禁用掉了模板CSS
然后会发现，blog干净得很，一点样式都没有。
对于我们这种小白来说，从头到尾自己写一份完整的CSS代码是不现实的，这时候我们需要一份代码模板，拿模板来改就比较容易了。
网上会有一些人把自己的CSS代码公开出来，当然实际上你浏览别人的blog的时候，（对于Chrome浏览器）轻按F12，你可以在style那个小栏里找到该网页的CSS代码链接，或者似乎可以写个爬虫啥的来获取，下面是我写的Python爬虫代码，轻松获取~~~
1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 import urllib2 4 resp=urllib2.urlopen(‘http://www.cnblogs.com/ECJTUACM-873284962/‘) 5 html=resp.read() 6 print html
我之前的CSS代码：
1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205424 url(‘https://i.loli.net/2017/08/15/59923c58cc40f.jpg‘) no-repeat top center fixed; 8 min-width:1200px; 9 } 10 #home { 11 opacity: 0.95; 12 filter: alpha(opacity=95); 13 box-shadow:0 0 10px #000; 14 margin:40px auto; 15 width:1200px; 16 background:#fff; 17 overflow:auto; 18 border:solid 1px #fff; 19 } 20 /*段落*/ 21 .postBody p,.postCon p { 22 margin:7px 0; 23 line-height:24px; 24 } 25 h1 { 26 margin:0; 27 } 28 h3 { 29 font-size:15px; 30 font-weight:bold; 31 } 32 /*超链接*/ 33 a { 34 color:#464646; 35 text-decoration:none; 36 } 37 a:hover { 38 text-decoration:underline; 39 } 40 a:visited,a:hover { 41 color:#464646; 42 } 43 ul { 44 list-style:none; 45 margin:0; 46 padding:0; 47 } 48 image { 49 border:none; 50 } 51 #header { 52 padding:20px; 53 } 54 /*博客标题*/ 55 #blogTitle,#blogTitle a { 56 font-weight:bold; 57 color:#666; 58 } 59 #blogTitle .title { 60 margin-top:10px; 61 height:100px; 62 line-height:100px; 63 font-size:36px; 64 padding-left:120px; 65 background:#fff url(‘https://i.loli.net/2017/08/02/598187babf39e.gif‘) no-repeat; 66 } 67 .headermaintitle { 68 }#blogTitle,#blogTitle a:hover { 69 text-decoration:none; 70 } 71 /*子标题*/ 72 .subtitle { 73 padding-left:30px; 74 font-size:14px; 75 color:#999; 76 font-weight:normal; 77 margin:10px 0; 78 } 79 /*导航栏*/ 80 #navigator { 81 font-size:16px; 82 height:48px; 83 background:#FFAAD5; 84 text-align:center; 85 margin-top:20px; 86 margin-bottom:20px; 87 } 88 #navList li { 89 margin:0; 90 line-height:48px; 91 display:inline-block; 92 float:left; 93 } 94 #navList li:hover { 95 background:#6DA47D; 96 } 97 #navList li a { 98 padding:0 30px; 99 text-decoration:none; 100 line-height:48px; 101 border:0; 102 color:#fff; 103 display:-moz-inline-box; 104 display:inline-block; 105 } 106 .blogStats { 107 height:48px; 108 color:#fff; 109 line-height:48px; 110 } 111 #main { 112 padding:20px; 113 } 114 /*左边*/ 115 #sideBarMain { 116 padding:0 10px 0 0; 117 background:#fff; 118 margin:0 0 20px 0; 119 width:190px; 120 font-size:12px; 121 line-height:22px; 122 } 123 #sideBarMain a { 124 color:#666; 125 } 126 #leftcontentcontainer { 127 color:#666; 128 } 129 .newsItem { 130 color:#666; 131 } 132 /*公告*/ 133 #profile_block { 134 margin-top:0px; 135 line-height:24px; 136 text-align:left; 137 } 138 /*主面板*/ 139 #mainContent { 140 margin-top:0px; 141 padding-top:0px; 142 padding-right:0px; 143 background:#fff; 144 padding-bottom:0px; 145 float:right; 146 width:960px; 147 padding-left:0px; 148 } 149 /*每日文章列表*/ 150 .day { 151 background:#fff; 152 padding:0; 153 margin:0 0 20px 0; 154 } 155 /*博客标题*/ 156 .postTitle a { 157 color:#464646; 158 } 159 .postTitle { 160 padding-bottom:10px; 161 font-size:20px; 162 font-weight:bold; 163 color:#464646; 164 background:url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px; 165 padding-left:30px; 166 } 167 .dayTitle { 168 display:none; 169 } 170 /*摘要*/ 171 .c_b_p_desc { 172 padding:10px; 173 line-height:24px; 174 color:#888; 175 } 176 .c_b_p_desc a { 177 color:#888; 178 } 179 .c_b_p_desc a:hover { 180 text-decoration:none; 181 border-bottom-width:1px; 182 border-bottom-style:dotted; 183 } 184 /*右侧图片*/ 185 .desc_img { 186 margin-left:10px; 187 border:solid 1px #fff; 188 box-shadow:0 0 10px #aaa; 189 } 190 /*博文页*/ 191 #topics .post { 192 background:#fff; 193 } 194 .postCon { 195 padding:10px 20px 0 20px; 196 } 197 .postDesc { 198 margin:0 30px; 199 margin-bottom:2px; 200 padding:8px 0px; 201 font-size:12px; 202 color:#aaa; 203 background:#fff; 204 text-align:right; 205 } 206 .postDesc a { 207 color:#AAA; 208 } 209 .postBody { 210 padding:0; 211 } 212 /*google搜索框*/ 213 #google_q,#q { 214 height:22px; 215 width:120px; 216 border:solid 1px #ccc; 217 box-shadow:inset 0 0 3px #ddd; 218 border-radius:4px; 219 } 220 /*搜索按钮*/ 221 .btn_my_zzk { 222 font-family:‘Microsoft Yahei‘; 223 border:none; 224 height:26px; 225 width:60px; 226 padding:1px; 227 font-size:14px; 228 cursor:pointer; 229 position:relative; 230 vertical-align:middle; 231 display:inline-block; 232 background:#FFAAD5; 233 border-radius:4px; 234 color:#fff; 235 } 236 .btn_my_zzk:hover { 237 background:#6DA47D; 238 } 239 /*评论按钮*/ 240 241 #btn_comment_submit { 242 border:none; 243 height:48px; 244 width:120px; 245 } 246 /*评论按钮*/ 247 .comment_btn { 248 font-family:‘Microsoft Yahei‘; 249 border:none; 250 height:48px; 251 width:120px; 252 font-size:18px; 253 cursor:pointer; 254 position:relative; 255 vertical-align:middle; 256 display:inline-block; 257 background:#FFAAD5; 258 color:#fff; 259 } 260 #btn_comment_submit:hover { 261 background:#6DA47D; 262 } 263 /*评论标题*/ 264 .feedback_area_title { 265 padding:10px; 266 font-size:24px; 267 font-weight:bold; 268 color:#55895B; 269 border-bottom:solid 6px #FFAAD5; 270 } 271 .feedbackListSubtitle { 272 font-size:12px; 273 color:#888; 274 } 275 .feedbackListSubtitle a { 276 color:#888; 277 } 278 .comment_quote { 279 background:#FCFAAC; 280 padding:15px; 281 border:1px solid #CCC; 282 } 283 #commentform_title { 284 color:#55895B; 285 background-image:none; 286 background-repeat:no-repeat; 287 margin-bottom:10px; 288 padding:10px 20px 10px 10px; 289 font-size:24px; 290 font-weight:bold; 291 border-bottom:solid 6px #55895B; 292 } 293 /*评论框*/ 294 #comment_form { 295 margin:10px 0; 296 padding:0; 297 } 298 .commentform { 299 margin:10px 0; 300 padding:10px 20px; 301 background:#fff; 302 } 303 /*评论输入域*/ 304 #tbCommentBody { 305 font-family:‘MIcrosoft Yahei‘; 306 margin-top:10px; 307 width:940px; 308 max-width:940px; 309 min-width:940px; 310 background:white; 311 color:#333; 312 border:2px solid #fff; 313 box-shadow:inset 0 0 8px #aaa; 314 padding:10px; 315 height:120px; 316 font-size:14px; 317 min-height:120px; 318 } 319 /*评论条目*/ 320 .feedbackItem { 321 font-size:14px; 322 line-height:24px; 323 margin:10px 0; 324 padding:20px; 325 background:#F2F2F2; 326 box-shadow:0 0 5px #aaa; 327 } 328 .feedbackListSubtitle { 329 font-weight:normal; 330 } 331 /*分类页*/ 332 .entrylist { 333 padding:10px 20px; 334 background:#fff; 335 } 336 .entrylistItem { 337 margin:10px 0; 338 padding:10px; 339 } 340 .entrylistPosttitle { 341 font-size:18px; 342 font-weight:bold; 343 background:url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif‘) no-repeat 0 3px; 344 padding-left:30px; 345 } 346 .entrylistPostSummary { 347 padding:10px; 348 } 349 .entrylistItemPostDesc { 350 font-size:12px; 351 color:#999; 352 padding-left:40px; 353 } 354 /*尾部*/ 355 #footer { 356 font-size:12px; 357 margin:20px; 358 padding:12px; 359 text-align:center; 360 background:#FFAAD5; 361 color:#DDD; 362 font-size:14px; 363 } 364 /*文章内图片*/ 365 #cnblogs_post_body p img { 366 margin:10px; 367 } 368 /*顶一下*/ 369 .diggnum { 370 font-size:28px; 371 color:#FFFFFF; 372 font-family:‘Microsoft Yahei‘; 373 } 374 #div_digg .diggnum { 375 line-height:100px; 376 } 377 .diggit { 378 float:left; 379 width:340px; 380 height:256px; 381 background:url(‘http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif‘) no-repeat; 382 background-position:0 0; 383 text-align:center; 384 cursor:pointer; 385 } 386 .diggit:hover { 387 background-position:-128px 0; 388 } 389 /*踩一下（园友反映，这个有点“邪恶”，呵呵，其实是我没来得及设计这个背景图片，就暂时把它隐藏了……可以去掉这句话）*/ 390 .buryit { 391 display:none; 392 } 393 .diggword { 394 display:none; 395 } 396 /*green_channel*/ 397 #green_channel { 398 text:align:right; 399 background:#6DA47D; 400 padding-left:20px; 401 font-weight:normal; 402 font-size:15px; 403 width:920px; 404 border:none; 405 color:#fff; 406 padding:20px; 407 border-radius:4px; 408 } 409 /*最新评论*/ 410 #myposts .PostList { 411 font-size:14px; 412 line-height:24px; 413 margin:10px 0; 414 padding:20px; 415 background:#F2F2F2; 416 box-shadow:0 0 5px #aaa; 417 } 418 #myposts .postTitl2 a { 419 color:#6DA47D; 420 } 421 #ZjmainstayCnblogsSWFTags{ 422 overflow: visible; 423 position: absolute; 424 right: 10px; 425 top: 735px; 426 width: 160px; 427 z-index: 10000; 428 } 429 body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 430 A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 431 432 #MagicArray{ 433 /* Firefox 4 */ 434 -moz-transition-property:width height bottom right; 435 -moz-transition-duration:1s; 436 437 /* Safari and Chrome */ 438 -webkit-transition-property:width height bottom right; 439 -webkit-transition-duration:1s; 440 441 /* Opera */ 442 -o-transition-property:width height bottom right; 443 -o-transition-duration:1s; 444 445 position: fixed; 446 bottom:107px; 447 right: 108px; 448 width: 0px; 449 height: 0px; 450 text-align: center; 451 z-index:2; 452 }
我现在的CSS代码，大部分参考我的挚友swm_sxt(大神)
下面贴出现在的CSS源码：
1 #site_nav_under { 2 display: none; 3 } 4 .c_ad_block, .ad_text_commentbox { 5 display: none; 6 margin: 0; 7 padding: 0; 8 } 9 #ad_under_google { 10 height: 0; 11 overflow: hidden; 12 } 13 #ad_under_google a { 14 display: none; 15 } 16 17 18 @charset "utf-8"; 19 /* CSS Document */ 20 21 /************************************************** 22 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。 23 如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是 24 你不能删除这些样式。 25 **************************************************/ 26 #EntryTag { 27 margin-top: 20px; 28 font-size: 9pt; 29 color: gray; 30 } 31 .topicListFooter { 32 text-align: right; 33 margin-right: 10px; 34 margin-top: 10px; 35 } 36 #divRefreshComments{ 37 text-align: right; 38 margin-right: 10px; 39 margin-bottom: 5px; 40 font-size: 9pt; 41 } 42 /*****第一部分结束*******************************/ 43 44 /************************************************** 45 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你 46 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤 47 模板所有页面的变化。因为它们是全局的。 48 **************************************************/ 49 * { 50 margin: 0; 51 padding: 0; 52 } 53 html { 54 height: 100%; 55 } 56 body { 57 background:url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed; 58 background-size:cover; 59 color:#000; 60 font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif"; 61 font-size: 15px; 62 min-height: 101%; 63 width:75em; 64 margin-left:auto; 65 margin-right:auto; 66 z-index:0; 67 } 68 69 #Uleft, #Uright,#Dleft, #Dright{ 70 /* Firefox 4 */ 71 -moz-transition-property:top; 72 -moz-transition-duration:1s; 73 74 /* Safari and Chrome */ 75 -webkit-transition-property:top; 76 -webkit-transition-duration:1s; 77 78 /* Opera */ 79 -o-transition-property:top; 80 -o-transition-duration:1s; 81 position: fixed; 82 width: 80px; 83 height: 80px; 84 line-height: 500px; 85 text-align: center; 86 z-index:1; 87 } 88 #Uleft{ 89 width: 80px; 90 height: 80px; 91 top:-60px; 92 left: 50px; 93 } 94 #Uright{ 95 width: 110px; 96 height: 110px; 97 top: -75px; 98 right: 50px; 99 } 100 #Dleft{ 101 bottom:10px; 102 left: 10px; 103 width: 200px; 104 height: 200px; 105 } 106 #Dright{ 107 bottom:-50px; 108 right: 0px; 109 width: 200px; 110 height: 250px; 111 } 112 113 #MagicArray{ 114 /* Firefox 4 */ 115 -moz-transition-property:width height bottom right; 116 -moz-transition-duration:1s; 117 118 /* Safari and Chrome */ 119 -webkit-transition-property:width height bottom right; 120 -webkit-transition-duration:1s; 121 122 /* Opera */ 123 -o-transition-property:width height bottom right; 124 -o-transition-duration:1s; 125 126 position: fixed; 127 bottom:107px; 128 right: 108px; 129 width: 0px; 130 height: 0px; 131 text-align: center; 132 z-index:2; 133 } 134 #Tab1{ 135 -moz-transition-property:fontSize width height; 136 -moz-transition-delay:0.8s; 137 138 -webkit-transition-property:fontSize width height; 139 -webkit-transition-delay:0.8s; 140 141 -o-transition-property:fontSize width height; 142 -o-transition-delay:0.8s; 143 144 color:#8B0A50; 145 position: fixed; 146 font-size: 0px; 147 text-align: center; 148 z-index:3; 149 font-weight:500; 150 text-shadow: 151 -1px 0 #7A67EE, 152 1px #7A67EE, 153 1px 0 #7A67EE, 154 -1px #7A67EE; 155 } 156 157 ::selection{background:#698B22;color:#FFF;} 158 ::-moz-selection{background#698B22;color:#FFF;} 159 body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 160 A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 161 input{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 162 wait{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} 163 input{outline:medium;} 164 /* 165 http://fq.wc.lt//up/1499566113.cur 166 http://fq.wc.lt//up/1499565578.cur 167 http://fq.wc.lt//up/1499564884.cur 168 */ 169 /*鼠标*/ 170 171 table { 172 border-collapse: collapse; 173 border-spacing: 0; 174 } 175 fieldset, img { 176 border: 0; 177 } 178 ul { 179 word-break: break-all; 180 } 181 li { 182 list-style: none; 183 } 184 h1, h2, h3, h4, h5, h6 { 185 font-size: 100%; 186 font-weight: normal; 187 } 188 a:link { 189 color:black; 190 text-decoration:none; 191 } 192 a:visited { 193 color:#111; 194 text-decoration: none; 195 } 196 a:hover { 197 color: #7B68EE; 198 -moz-border-radius: 9px; 199 -khtml-border-radius: 9px; 200 -webkit-border-radius: 9px; 201 border-radius: 9px; 202 transition: all 0.4s linear 0s; 203 } 204 a:active { 205 color: black; 206 text-decoration: none; 207 } 208 .clear { 209 clear: both; 210 } 211 /*****第二部分结束*******************************/ 212 213 /************************************************** 214 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他 215 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮 216 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。 217 **************************************************/ 218 /*****home和头部开始**************************/ 219 #home { 220 margin: 0 auto; 221 width:95%; 222 min-width: 60em; 223 } 224 #header { 225 padding-bottom: 0.4em; 226 margin-top: 0.8em; 227 } 228 #blogTitle { 229 height: 7em; 230 clear: both; 231 border:1px solid #000; 232 -moz-border-radius: 11px; 233 -khtml-border-radius: 11px; 234 -webkit-border-radius: 11px; 235 border-radius: 12px; 236 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 237 text-shadow:1px 1px 1px #e9f3e8 238 } 239 #blogTitle h1 { 240 font-size: 300%; 241 font-weight: bold; 242 margin-left: 1em; 243 margin-top: 0.4em; 244 width: 50%; 245 float: left; 246 } 247 #blogTitle h2 { 248 margin-left: 6em; 249 line-height: 1.5em; 250 width: 50%; 251 float: left; 252 text-shadow:-1px 0 #ddd, 253 1px #ddd, 254 1px 0 #ddd, 255 -1px #ddd; 256 } 257 #blogLogo { 258 float: right; 259 } 260 #navigator { 261 /* background-color: black; 262 height: 30px; 263 clear: both;*/ 264 265 margin-top:0.3em; 266 height: 2em; 267 clear:both; 268 border:1px solid #999; 269 -moz-border-radius: 11px; 270 -khtml-border-radius: 11px; 271 -webkit-border-radius: 11px; 272 border-radius: 11px; 273 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 274 background:#FFF; 275 opacity: 0.60; 276 } 277 #navList { 278 min-height: 1.5em; 279 float: left; 280 } 281 #navList li { 282 float: left; 283 } 284 #navList a { 285 display: block; 286 padding-left:0.5em; 287 padding-right:0.5em; 288 line-height:2em; 289 float: left; 290 text-align: center; 291 border-right: 1px solid #999; 292 } 293 #navList a:link, #navList a:visited, #navList a:active { 294 /* color: #ccc;*/ 295 } 296 #navList a:hover { 297 color: #7B68EE; 298 padding-left:0.8em; 299 padding-right:0.8em; 300 } 301 302 .blogStats { 303 float: right; 304 font-size:0.8em; 305 color: #000; 306 margin-top: 0.9em; 307 margin-right: 0.2em; 308 text-align: right; 309 } 310 /*****home和头部结束**************************/ 311 312 /*****主页文章列表开始**************************/ 313 #main{ 314 width: 100%; 315 min-width: 70em; 316 text-align: left; 317 background:#FFF5EE; 318 opacity: 0.90; 319 } 320 #mainContent .forFlow{ 321 margin-left: 12em; 322 float: none; 323 width: auto; 324 } 325 326 #mainContent { 327 min-height: 18em; 328 padding: 0px 0px 10px 0; 329 *padding-top:10px; 330 -o-text-overflow: ellipsis; 331 text-overflow: ellipsis; 332 overflow: hidden; 333 word-break: break-all; 334 335 float: right; 336 margin-left: -26em; 337 width: 100% 338 } 339 .day { 340 min-height: 10px; 341 _height: 10px; 342 margin-bottom: 20px; 343 padding-bottom: 5px; 344 } 345 .dayTitle { 346 width: 100%; 347 color: #666; 348 349 font-weight: bold; 350 line-height: 1.5em; 351 font-size: 90%; 352 margin-top: 3px; 353 margin-bottom: 10px; 354 clear:both; 355 border-bottom: 2px solid #e9f3e8; 356 text-align:center; 357 358 } 359 .postTitle { 360 font-size: 150%; 361 font-weight: bold; 362 /*border-bottom: 1px solid #9DAAF4;*/ 363 float: right; 364 line-height: 1.5em; 365 width: 100%; 366 clear:both; 367 text-shadow:-3px 3px 3px #999 368 } 369 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 370 color: #000; 371 transition: all 0.4s linear 0s; 372 } 373 .postTitle a:hover { 374 margin-left: 10px; 375 color: #7B68EE; 376 text-decoration: none; 377 text-shadow:-13px 3px 3px #999 378 } 379 .postCon { 380 float: right; 381 line-height: 1.5em; 382 width: 100%; 383 clear:both; 384 padding: 10px 0; 385 } 386 .postDesc { 387 float: right; 388 width: 100%; 389 clear:both; 390 text-align: right; 391 padding-right: 5px; 392 color: #666; 393 margin-top: 5px; 394 } 395 .postDesc a:link, .postDesc a:visited, .postDesc a:active { 396 color: #666; 397 padding-right: 10px; 398 } 399 .postDesc a:hover { 400 color: #7B68EE; 401 text-decoration: none; 402 } 403 .postSeparator { 404 clear: both; 405 height: 1px; 406 border-top: 1px dotted #666; 407 width: 100%; 408 clear:both; 409 float: right; 410 margin: 0 auto 15px auto; 411 } 412 .diggit{ 413 text-align: center; 414 width:50px; 415 height:40px; 416 background:url(http://fq.wc.lt//up/1503755899.png); 417 background-size:100% 100%; 418 } 419 .buryit{ 420 font-size:0px; 421 width:0; 422 height:0; 423 } 424 .burynum{ 425 font-size:0px; 426 width:0; 427 height:0; 428 } 429 /*****主页文章列表结束**************************/ 430 431 /*****侧边栏开始********************************/ 432 #sideBar { 433 width: 14em; 434 min-height: 14em; 435 padding: 0px 0px 0px 5px; 436 float: left; 437 -o-text-overflow: ellipsis; 438 text-overflow: ellipsis; 439 overflow: hidden; 440 word-break: break-all; 441 font-size:0.7em; 442 opacity:0.85; 443 } 444 .counter{ 445 } 446 .notice{ 447 font-size:xx-small; 448 } 449 .btn_my_zzk{ 450 display: inline-block; 451 font-size: 24px; 452 cursor: pointer; 453 text-align: center; 454 text-decoration: none; 455 outline: none; 456 color: #fff; 457 background-color: #a55b97; 458 border: none; 459 border-radius: 15px; 460 box-shadow: 0 4px #999; 461 } 462 .newsItem .catListTitle { 463 display: none; 464 } 465 .newsItem { 466 padding: 15px 0 5px 0px; 467 font-weight:bold; 468 font-size:14px; 469 margin-bottom: 8px; 470 } 471 /**日历控件样式开始**/ 472 #calendar { 473 width: 14em; 474 } 475 #calendar .Cal { 476 width: 100%; 477 line-height: 1.5em; 478 } 479 .Cal {/**日历容器table**/ 480 border: none; 481 color: #111; 482 } 483 #calendar table a:link, #calendar table a:visited, #calendar table a:active { 484 font-weight: bold; 485 } 486 #calendar table a:hover { 487 color: #7B68EE; 488 text-decoration: none; 489 background-color: #7B68EE; 490 } 491 .CalTodayDay{/**今天日期样式**/ 492 color: #EE82EE; 493 } 494 #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/ 495 font-weight: bold; 496 background-color: #7B68EE; 497 } 498 .CalDayHeader{ 499 border-bottom:1px solid #ccc; 500 } 501 .CalTitle{/**日历年月头部样式**/ 502 width:100%; 503 background:#FFF; 504 color:black; 505 border-bottom:1px solid #666; 506 } 507 /**日历控件样式结束**/ 508 .catListTitle { 509 font-weight: bolder; 510 font-family:STCaiyun; 511 color: #B03060; 512 line-height: 2em; 513 font-size: 150%; 514 margin-top: 50px; 515 margin-bottom: 10px; 516 border-bottom: 1px solid #e9f3e8; 517 text-align: center; 518 } 519 .catListComment { 520 line-height: 1.5em; 521 } 522 .divRecentComment { 523 color: #666; 524 margin-bottom:1em; 525 } 526 .c_b_p_link_desc{ 527 color: #666; 528 font-size: 30%; 529 margin-bottom:1.5em; 530 } 531 #sideBarMain ul { 532 line-height: 1.5em; 533 } 534 .catListEssay{ 535 font-weight: bolder; 536 } 537 .catListTag{ 538 font-size: 90%; 539 font-weight: bolder; 540 } 541 .catList{ 542 font-weight: bolder; 543 } 544 .catListFeedback{ 545 font-weight: bolder; 546 } 547 .catListView{ 548 font-weight: bolder; 549 } 550 .recent_comment_title{ 551 font-weight: bolder; 552 } 553 .recent_comment_body{ 554 font-size: 30%; 555 } 556 .recent_comment_author{ 557 color:#666; 558 font-size: 30%; 559 } 560 /*****侧边栏结束********************************/ 561 562 563 /****查看文章页面开始*************************/ 564 #topics { 565 width: 100%; 566 min-height: 18em; 567 padding: 0px 0px 10px 0; 568 float: left; 569 -o-text-overflow: ellipsis; 570 text-overflow: ellipsis; 571 overflow: hidden; 572 word-break: break-all; 573 } 574 #topics .postTitle { 575 font-size: 200%; 576 font-weight: bold; 577 border-bottom: 1px solid #999; 578 float: left; 579 line-height: 1.5em; 580 width: 100%; 581 text-align: center; 582 } 583 .postBody { 584 padding: 5px 2px 5px 5px; 585 line-height: 1.5em; 586 color: #000; 587 border-bottom: 1px solid #8686FF; 588 } 589 #EntryTag { 590 color: #000; 591 } 592 #EntryTag a { 593 margin-left: 5px; 594 } 595 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { 596 color: #000; 597 } 598 #EntryTag a:hover { 599 color: #7B68EE; 600 } 601 #topics .postDesc { 602 float: right; 603 width: 100%; 604 font-size:0.9em; 605 text-align: right; 606 padding-right: 5px; 607 color: #000; 608 margin-top: 5px; 609 } 610 .feedback_area_title { 611 font-weight: bold; 612 margin-top: 20px; 613 border-bottom: 1px solid #8686FF; 614 margin-bottom: 10px; 615 padding-left: 8px; 616 } 617 .louzhu { 618 background:transparent url(‘/images/icoLouZhu.gif‘) no-repeat scroll right top; 619 padding-right:16px; 620 } 621 .layer{ 622 font-family:STFangsong; 623 font-size:15px; 624 padding-left: 8px; 625 } 626 .feedbackListSubtitle { 627 margin-left: 10px; 628 color: #666; 629 font-size:0.9em; 630 } 631 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { 632 font-weight:bold; 633 color: #666; 634 font-weight: normal; 635 } 636 .feedbackListSubtitle a:hover { 637 color: #7B68EE; 638 text-decoration: none; 639 } 640 .feedbackManage { 641 width: 160px; 642 text-align: right; 643 float: right; 644 } 645 .feedbackCon { 646 font-weight:bold; 647 border-bottom: 1px solid #ccc; 648 padding: 15px 18px 20px 50px; 649 min-height: 35px; 650 _height: 35px; 651 margin-bottom: 1em; 652 line-height: 1.5em; 653 width:80%; 654 } 655 #divRefreshComments { 656 text-align: right; 657 margin-bottom: 10px; 658 } 659 .commenttb { 660 width: 320px; 661 } 662 .cnblogs_code{ 663 } 664 .comment_actions{ 665 margin-right:30px; 666 font-size:16px; 667 font-family:STFangsong; 668 } 669 .comment_digg{ 670 font-weight:bold; 671 margin-right:10px; 672 font-size:15px; 673 font-family:STXinwei; 674 } 675 .comment_bury{ 676 font-weight:bold; 677 margin-right:10px; 678 font-size:15px; 679 font-family:STXinwei; 680 } 681 /****查看文章页面结束************************ 682 683 /****列表页面开始******************************/ 684 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/ 685 font-size: 110%; 686 font-weight: bold; 687 border-bottom: 1px solid #8686FF; 688 text-align: right; 689 padding-bottom: 3px; 690 padding-right: 10px; 691 } 692 693 .entrylistDescription { 694 color: #666; 695 text-align: right; 696 padding-top: 5px; 697 padding-bottom: 5px; 698 padding-right: 10px; 699 margin-bottom: 10px; 700 } 701 .entrylistItem { 702 min-height: 20px; 703 _height: 20px; 704 margin-bottom: 30px; 705 padding-bottom: 5px; 706 width: 100%; 707 } 708 .entrylistPosttitle { 709 font-size: 110%; 710 font-weight: bold; 711 border-bottom: 1px solid #666; 712 line-height: 1.5em; 713 width: 100%; 714 padding-left: 5px; 715 } 716 .entrylistPosttitle a:hover { 717 text-decoration: none; 718 } 719 .entrylistPostSummary { 720 margin-top: 5px; 721 padding-left: 5px; 722 margin-bottom: 5px; 723 } 724 .entrylistItemPostDesc { 725 padding-left: 50px; 726 text-align: right; 727 color: #666; 728 } 729 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { 730 color: #666; 731 } 732 .entrylistItemPostDesc a:hover { 733 color: #7B68EE; 734 } 735 .entrylist .postSeparator { 736 clear: both; 737 width: 100%; 738 font-size: 0; 739 line-height: 0; 740 margin: 0; 741 padding: 0; 742 height: 0; 743 border: none; 744 } 745 746 .pager { 747 text-align: right; 748 margin-right: 10px; 749 } 750 .PostList { 751 border-bottom: 1px solid #ccc; 752 clear: both; 753 min-height: 1.5em; 754 _height: 1.5em; 755 padding-top: 10px; 756 padding-left: 5px; 757 padding-right: 5px; 758 margin-bottom: 5px; 759 } 760 .postTitl2 { 761 float: left; 762 font-size:0.9em; 763 color: #666; 764 } 765 .postDesc2 { 766 color: #666; 767 float: right; 768 margin-right: ; 769 font-size:0.9em; 770 } 771 .postText2 { 772 clear: both; 773 774 } 775 .pfl_feedback_area_title { 776 text-align: right; 777 line-height: 1.5em; 778 font-weight: bold; 779 border-bottom: 1px solid #666; 780 margin-bottom: 10px; 781 } 782 .pfl_feedbackItem { 783 border-bottom: 1px solid black; 784 margin-bottom: 20px; 785 } 786 .pfl_feedbacksubtitle { 787 width: 100%; 788 border-bottom: 1px dotted #666; 789 height: 1.5em; 790 } 791 .pfl_feedbackname { 792 float: left; 793 } 794 .pfl_feedbackManage { 795 float: right; 796 } 797 .pfl_feedbackCon { 798 color: black; 799 padding-top: 5px; 800 padding-bottom: 5px; 801 } 802 .pfl_feedbackAnswer { 803 color: #F40; 804 text-indent: 2em; 805 } 806 .tdSentMessage { 807 text-align: right; 808 } 809 .errorMessage { 810 width: 300px; 811 float: left; 812 } 813 814 /****列表页面结束******************************/*/ 815 /****相册页面开始******************************/ 816 .divPhoto { 817 border: 1px solid #ccc; 818 padding: 2px; 819 margin-right: 10px; 820 } 821 822 .thumbDescription { 823 color: #666; 824 text-align: right; 825 padding-top: 5px; 826 padding-bottom: 5px; 827 padding-right: 10px; 828 margin-bottom: 10px; 829 } 830 /****相册页面结束******************************/ 831 832 833 /*****留言页面开始*****************************/ 834 #footer { 835 text-align: center; 836 min-height: 15px; 837 _height: 15px; 838 border-top: 1px solid black; 839 margin-top: 10px; 840 padding-top: 10px; 841 margin-bottom: 10px; 842 } 843 /*留言查看页面的个人信息*/ 844 .personInfo { 845 margin-bottom: 20px; 846 } 847 /*留言分页区域*/ 848 .pages { 849 text-align: right; 850 } 851 /*****留言页面结束*****************************/ 852 /*****第三部分结束*******************************/ 853 854 /************************************************** 855 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如： 856 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面 857 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。 858 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话， 859 并不能保证所有的文章都适合。 860 **************************************************/ 861 /*文章内部常用标签格式*/ 862 .postBody { 863 line-height: 1.5em; 864 } 865 .postBody p,.postCon p{ 866 text-indent: 2em; 867 margin: 0 auto 1em auto; 868 } 869 .postBody h2{ 870 font-size: 150%; 871 margin: 15px auto 2px auto; 872 font-weight:bold; 873 } 874 .postBody h3 { 875 font-size: 120%; 876 margin: 15px auto 2px auto; 877 font-weight:bold; 878 } 879 .postBody h4{ 880 font-size:110%; 881 margin:15px auto 2px auto; 882 font-weight:bold; 883 color:#333; 884 } 885 886 .postBody h5{ 887 font-size:100%; 888 margin:15px auto 2px auto; 889 font-weight:bold; 890 color:#333; 891 } 892 893 .postBody a:link,.postBody a:visited,.postBody a:active{ 894 text-decoration:none; 895 } 896 .postCon a:link,.postCon a:visited,.postCon a:active{ 897 text-decoration:none; 898 } 899 .postBody ul,.postCon ul{ 900 margin-left:2em; 901 } 902 903 .postBody li,.postCon li{ 904 list-style-type:disc; 905 margin-bottom:1em; 906 } 907 908 .postBody blockquote{ 909 background:url(‘/images/comment.gif‘) no-repeat 25px 0px; 910 padding:10px 60px 5px 60px; 911 min-height:35px; 912 _height:35px; 913 line-height:1.6em; 914 color:#333; 915 } 916 /*****第四部分结束*******************************/
当初我也是拿别人代码当模板来改的，不过现在可能有点面目全非了。
那么现在，我们可以把这份别人的模板改成自己的风格，基本上CSS代码里参数的命名都是按元素的英文命名的，挺好认的，或者你可以把这个参数改改，看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时，你可以寻找一下这个元素在html代码里面的位置（在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素），看一下这个元素的id和class的名字是啥，在CSS代码里找找就行了。
界面的颜色除了有black、white这类设定好的颜色之外，你可以找一个RGB颜色对照表，想要啥就丢啥。
遇到有啥不会调的参数，基本搜一下“CSS+参数名字”就有详细介绍，毕竟这东西网上教程很多。
比方说延迟变换可以用transition-property来做，而文字阴影效果是text-shadow，这些都是我自己在做的时候折腾了好一会的。
Chrome（我不知道其他浏览器能不能）有个好处是你修改了个参数，他会立刻应用变换，这样就可以调到舒心再贴进自定义CSS代码里。
还有就是你最好把CSS代码备份一下，不然要是误删了就GG，博主亲身体验T_T。
这期间你可能需要一些好看的图片什么的，我自己资源是P站找的（Pixiv），一些比较普通的就百度图片吧，然后开个画图，开个Photoshop自己改改就能用了，图床直接用博客园就行了（开个不发布的随笔就能存图了，图片上右键可以获得图片链接地址）。
这时候自己的blog已经比较好看了是不是啊？
②修改鼠标图案
把这个放在第二是我按自己的操作顺序来的。
没啥特别要说的，就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站，这里推荐小白的文件床（http://fq.wc.lt/）或者是sm.ms(https://sm.ms/)，不知道是哪位大神弄的，太良心了。
body{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;} A{cursor:url(‘http://fq.wc.lt//up/1499563659.cur‘),auto;}
③公告栏的设置
折腾了一段时间以后应该对html也有了一定的了解，首先在博客园管理的设置页中把JS代码权限申请了，批准挺快的，然后就可以为所欲为了（雾）……
首先你可以在侧边栏加点计数器，加点flash动画什么的，这些一般是找别人做好的，链过来或者抄过来就行。
要搞js的话建议在网上找个教程看看，看它个把小时就基本能拿来用用了（其实跟c++挺像的，应该说java跟c++比较像吧），以后遇到不会的回去查查就行。
我拿js做的大概就是加了一些小挂件，比方说左上角的西瓜是获取main元素之后把opacity（透明度）调到0就行，结合一下onmouseover、onmouseout什么的就能做出浮动效果，还是很赞的。
尝试着做个推荐按钮，一直做不成，估计是被过滤了。发邮件去问博客园那边也是这是禁止的。
目录我大多数还是参考swm_sxt，做的太良心了，perfect！
我的公告栏代码：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div class="head_img"><img width="160" height="160" alt="我的头像" src="https://i.loli.net/2017/08/02/598187babf39e.gif" class="img_avatar"><div> 6 7 <p>做题做得心累的时候</p> 8 <p>就看看背景吧</p> 9 <p>想看背景的时候</p> 10 <p>请点击左上角西瓜一枚</p> 11 <p>右上角月亮有彩蛋</p> 12 <p>蒟蒻一枚，有事您Q我～</p> 13 <p>ECJTU的一个挣扎的ACMer</p> 14 <p>我的QQ在这哦！873284962～</p> 15 <p>我的微信在这哦！nzf6698【加好友请注明姓名和来源哦，谢谢各位支持^-^】～</p> 16 <p>喵~允许我卖一个萌~~~~</p> 17 <p>热爱交友！orz</p> 18 <p>希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦</p> 19 <p>非常乐意互换友链呐，~o( =∩ω∩= )喵~~~~</p> 20 <p>有事您Q我，我一直在哦~：</p><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=873284962&site=qq&menu=yes"> 21 <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:873284962:41 &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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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 "http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg", 20 "http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg", 21 "http://images.cnitblog.com/blog/708426/201501/100602118284450.jpg"], 22 scale: 128 / 36, 23 border: true, 24 delay: 2200, 25 x: 10, 26 y: 3 27 }); 28 29 30 function makeOpen(url){ 31 return eval(‘wind‘ + ‘ow.o‘ + ‘pen("‘+url+‘")‘); 32 } 33 </script> 34 35 <script type="text/x-mathjax-config"> 36 MathJax.Hub.Config({tex2jax: {inlineMath: [[‘$‘,‘$‘], [‘\\\\(‘,‘\\\\)‘]]}}); 37 </script> 38 <script type="text/javascript" 39 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 40 </script> 41 <a href="https://github.com/Jackson0714" target="_blank"> 42 <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" > 43 </a> 44 <style type="text/css"> 45 .Abstract 46 { 47 padding: 15px; 48 border: dotted 2px #999; 49 color: #999; 50 font-family: ‘Microsoft Yahei‘; 51 border-radius: 4px; 52 } 53 54 .First 55 { 56 margin: 10px 0; 57 font-family: ‘Microsoft Yahei‘; 58 text-align: left; 59 padding: 6px 20px; 60 color: #fff; 61 background: #55895B; 62 font-size: 20px; 63 border-radius: 4px; 64 clear: both; 65 } 66 67 68 .Second 69 { 70 margin: 10px 0; 71 font-family: ‘Microsoft Yahei‘; 72 padding: 6px 20px; 73 background: #93C8A2; 74 color: #fff; 75 font-size: 18px; 76 border-radius: 4px; 77 clear: both; 78 } 79 80 81 .Third 82 { 83 margin: 10px 0; 84 padding: 6px 20px; 85 font-family: ‘Microsoft Yahei‘; 86 margin: 15px 0; 87 font-size: 16px; 88 color: fff; 89 background: #C6EFD2; 90 color: #999; 91 border-radius: 4px; 92 clear: both; 93 } 94 .note 95 { 96 margin: 10px 0; 97 padding: 15px 20px 15px 60px; 98 background: #FCFAA9 url(‘http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png‘) no-repeat 20px 0; 99 font-size: 15px; 100 font-family: ‘Microsoft Yahei‘; 101 box-shadow: 0 0 8px #aaa; 102 clear: both; 103 } 104 105 .demo 106 { 107 text-align: left; 108 padding: 6px 20px; 109 overflow: auto; 110 border-radius: 4px; 111 background: orange; 112 color: #fff; 113 font-size: 16px; 114 clear: both; 115 } 116 117 .cnblogs_Highlighter 118 { 119 border: solid 1px #ccc; 120 clear: both; 121 } 122 123 .cnblogs_code 124 { 125 background: #EFFFF4; 126 border: solid 0px #939393; 127 font-size: 14px; 128 clear: both; 129 padding: 10px 20px; 130 } 131 .cnblogs_code pre 132 { 133 font-size: 14px; 134 } 135 .cnblogs_code span 136 { 137 font-family: Courier New; 138 font-size: 14px; 139 } 140 </style>
我现在的页脚：
1 <div class="fixedIndexs" style="position: fixed;opacity:0.5;bottom:300px;display: none"></div> 2 <script language="javascript" type="text/javascript"> 3 var fixedIndexs=$(‘.fixedIndexs‘); 4 var hs = $(‘#cnblogs_post_body h2‘); 5 function openorclose(a) { 6 $("#indexs").slideToggle("fast"); 7 var text=$(a).text(); 8 if(text==‘[-]‘){ 9 $(a).text("[+]"); 10 return; 11 } 12 $(a).text("[-]"); 13 } 14 function createIndexs(){ 15 var indexs_container=$(‘<div style="border:solid 1px #ccc; background:#CD6889;width:200px;padding:4px 10px;"></div>‘); 16 var indexs_controller=$(‘<p style="text-align:right;margin:10;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>‘); 17 var indexs=$(‘<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>‘); 18 indexs_container.append(indexs_controller).append(indexs); 19 $.each(hs,function(i,h){ 20 $(h).before(‘<a name="index_‘+i+‘"></a>‘); 21 indexs.append(‘<li style="list-style:decimal"><a href="#index_‘+i+‘" id="active_‘+i+‘">‘+$(h).text()+‘</a></li>‘); 22 }); 23 if(hs.length!=0){ 24 fixedIndexs.append(indexs_container); 25 //get home div right offset 26 fixedIndexs.css(‘right‘,30+‘px‘); 27 } 28 } 29 createIndexs(); 30 fixedIndexs.hide(); 31 </script>
之前也有写过页脚，不过不是很好看，不过就是加了些链接，然后多介绍了下自己
我也把它贴出来吧~~~
1 <div id="ECJTUACM-873284962CnblogsSWFTags"></div> 2 <div class="cnblogs_Highlighter"> 3 <div style="text-align:left; margin:0 17px; ling-height:24px;"> 4 <p style="color:#2a6496; padding:15px;"><i class="fa fa-pencil fa-5x fa-spin"></i></p> 5 <p><a target="_blank" href="http://www.cnblogs.com/ECJTUACM-873284962/">ACM竞赛&数学建模竞赛</a> - 创建于 2017年2月2日</p> 6 <p><i class="fa fa-hand-o-right"></i> 这是一位ACM爱好者&数学爱好者的个人站，内容主要是算法&数据结构&数学研究的技术文章，大部分来自学习，部分来源于网络,希望对大家有所帮助。</p> 7 <p>致力于ACM算法研究工作，喜爱交友，关注互联网前沿技术与趋势。</p> <br /><p> <a target="_blank" href="http://fontawesome.io/">Font Awesome</a> | 8 <a target="_blank" href="https://github.com/aFarkas/html5shiv">Respond.js</a> | 9 <a target="_blank" href="http://www.bootcss.com/">Bootstrap中文网</a> </p> </div> 10 11 <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"1","bdPos":"right","bdTop":"120"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src=‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘+~(-new Date()/36e5)];</script> 12 </div>
④关于CSS动画特效
很多人对我的图片动画特效感兴趣，我今天把页面风格调整了下，所以那个动画特效我就没有加上去了，似乎有些不兼容的特点~~~我还在努力的调整QAQ
大概只要把我的这段CSS代码中三个图片换成你想要的风格就好了，感谢Candy?大神~~~
1 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/bootstrap.min.css"> 2 <script src="http://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script> 3 <script src="http://files.cnblogs.com/files/candy99/bootstrap.min.js"></script> 4 <script src="http://files.cnblogs.com/files/candy99/bootbox.min.js"></script> 5 <link rel="stylesheet" href="http://files.cnblogs.com/files/candy99/slider.min.css"> 6 <div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;"> 7 <div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg"); 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("http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg"); 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 "http://images.cnitblog.com/blog/708426/201501/080209549216360.jpg", 15 "http://images.cnitblog.com/blog/708426/201501/100557406251638.jpg", 16 "http://images.cnitblog.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>
以上是关于博客园自定义页面风格设计的主要内容，如果未能解决你的问题，请参考以下文章