zoukankan      html  css  js  c++  java
  • 博客园自定义页面风格设计

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

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

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

    ①拥有自己的CSS代码

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

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

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

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

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

    我之前的CSS代码:

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

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

    下面贴出现在的CSS源码:

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

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

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

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

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

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

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

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

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

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

    ②修改鼠标图案

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

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

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

    ③公告栏的设置

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

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

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

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

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

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

    我的公告栏代码:

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

    关于背景音乐

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

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

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

    我现在的页首:

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

    我之前的页首:

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

    我现在的页脚:

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

    ⑤用Canvas和requestAnimFrame做动画特效

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

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

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

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

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

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

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

      

  • 相关阅读:
    django实例(1)
    django笔记补充
    django笔记
    Docker自学纪实(六)搭建docker私有仓库
    Docker自学纪实(四)搭建LNMP部署wordpress
    Docker自学纪实(三)Docker容器数据持久化
    Docker自学纪实(二)Docker基本操作
    Docker自学纪实(一)Docker介绍
    CentOS 7.4 基于LNMP搭建wordpress
    CentOS7安装配置VSFTP
  • 原文地址:https://www.cnblogs.com/ECJTUACM-873284962/p/7628894.html
Copyright © 2011-2022 走看看