CSS，HTML页面定制

  1 /*simplememory*/
  2 #google_ad_c1, #google_ad_c2 {display:none;}
  3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter        
  4      table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
  5 font-size: 14px!important;
  6 }
  7 #home {
  8 opacity: 0.60;
  9 margin: 0 auto;
 10 width: 85%;
 11 min-width: 900px;
 12 background-color: #fff;
 13 padding: 30px;
 14 margin-top: 30px;
 15 margin-bottom: 50px;
 16 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 17 }
 18 #blogTitle h1 {
 19 font-size: 30px;
 20 font-weight: bold;
 21 font-family: "Comic Sans MS";
 22 line-height: 1.5em;
 23 margin-top: 20px;
 24 color: #515151;
 25 }
 26 #navList a:hover {
 27 color: #4C9ED9;
 28 text-decoration: none;
 29 }
 30 #navList a {
 31 display: block;
 32 width: 5em;
 33 height: 22px;
 34 float: left;
 35 text-align: center;
 36 padding-top: 18px;
 37 }
 38 #navigator {
 39 font-size: 15px;
 40 border-bottom: 1px solid #ededed;
 41 border-top: 1px solid #ededed;
 42 height: 50px;
 43 clear: both;
 44 margin-top: 25px;
 45 }
 46 .catListTitle {
 47 margin-top: 21px;
 48 margin-bottom: 10.5px;
 49 text-align: left;
 50 border-left: 10px solid rgba(82, 168, 236, 0.8);
 51 padding: 10px 0 14px 10px;
 52 background-color: #f5f5f5;
 53 }
 54 #ad_under_post_holder #google_ad_c1,#google_ad_c2{  
 55 display: none !important;
 56 }
 57 body {
 58 color: #000;
 59 background: url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg
 60 ) fixed;
 61 background-size: 1300px;
 62 background-repeat: no-repeat;
 63 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 64 font-size: 12px;
 65 min-height: 90%;
 66 //   background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
 67 background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
 68 //background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
 69 //background-size:cover;/* 将背景图片等比缩放填满整个容器 */
 70 }
 71 #topics .postTitle {
 72 border: 0px;
 73 font-size: 200%;
 74 font-weight: bold;
 75 float: left;
 76 line-height: 1.5;
 77 width: 100%;
 78 padding-left: 5px;
 79 }
 80 
 81 
 82 div.commentform p{
 83 margin-bottom:10px;
 84 }
 85 .comment_btn {
 86 padding: 5px 10px;
 87 height: 35px;
 88 width: 90px;
 89 border: 0 none;
 90 border-radius: 5px;
 91 background: #ddd;
 92 color: #999;
 93 cursor:pointer;
 94 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
 95 text-shadow: 0 0 1px #fff;
 96 display: inline !important;
 97 }
 98 .comment_btn:hover{
 99 padding: 5px 10px;
100 height: 35px;
101 width: 90px;
102 border: 0 none;
103 border-radius: 5px;
104 background: #258fb8;
105 color: white;
106 cursor:pointer;
107 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
108 text-shadow: 0 0 1px #fff;
109 display: inline !important;
110 }
111 #commentform_title {
112 background-image:none;
113 background-repeat:no-repeat;
114 margin-bottom:10px;
115 padding:0;
116 font-size:24px;
117 }
118 #commentbox_opt,#commentbox_opt + p {
119 text-align:center;
120 }
121 .commentbox_title {
122 width: 100%;
123 }
124 #tbCommentBody {
125 font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
126 margin-top:10px;
127 max-width:100%;
128 min-width:100%;
129 background:white;
130 color:#333;
131 border:2px solid #fff;
132 box-shadow:inset 0 0 8px #aaa;
133 // padding:10px;
134 height:250px;
135 font-size:14px;
136 min-height:120px;
137 }
138 .feedbackItem {
139 font-size:14px;
140 line-height:24px;
141 margin:10px 0;
142 padding:20px;
143 background:#F2F2F2;
144 box-shadow:0 0 5px #aaa;
145 }
146 .feedbackListSubtitle {
147 font-weight:normal;
148 }
149 
150 #blog-comments-placeholder, #comment_form {
151 padding: 20px;
152 background: #fff;
153 -webkit-box-shadow: 1px 2px 3px #ddd;
154 box-shadow: 1px 2px 3px #ddd;
155 margin-bottom: 50px;
156 }
157 .feedback_area_title {
158 margin-bottom: 15px;
159 font-size: 1.8em;
160 }
161 .feedbackItem {
162 border-bottom: 1px solid #CCC;
163 margin-bottom: 10px;
164 padding: 5px;
165 background: rgb(248, 248, 248);
166 }
167 .color_shine {background: rgb(226, 242, 255);}
168 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
169 #comment_form .title {
170 font-weight: normal;
171 margin-bottom: 15px;
172 }

可调高度，改透明度

  1 /*darkgreentrip*/
  2 #home {
  3     opacity: 0.90;
  4     margin: 0 auto;
  5     width: 85%;/*原始65*/
  6     min-width: 980px;/*页面顶部的宽度*/
  7     background-color: rgba(245, 245, 245, 0.7);
  8     padding: 30px;
  9     margin-top: 50px;
 10     margin-bottom: 50px;
 11     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 12 }
 13 body {
 14     background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg') fixed no-repeat;
 15     background-position: 50% 5%; 
 16 //  background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
 17     background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
 18 //  background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
 19 //  background-size:cover;/* 将背景图片等比缩放填满整个容器 */
 20 }
 21 #blogTitle {
 22     height: 100px;  /*高度*/
 23     clear: both;
 24     background-color: rgba(245, 245, 245, 0);
 25 }
 26 #blogTitle h1 {
 27     font-size: 36px;
 28     font-weight: bold;
 29     line-height: 1.8em;/*原始 1.6em*/
 30     margin-top: 10px;/*原始 15px */
 31     color: #548B54;
 32 }
 33 #blogTitle h2 {
 34     font-weight: normal;
 35     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
 36     line-height: 1.8;
 37     color: #111;
 38     font-weight: bold;
 39     text-align: right;
 40     float: right; 
 41 }
 42 #navigator{
 43     background-color: rgba(33, 160, 139, 0.9);
 44 }
 45 #navList a:link, #navList a:visited, #navList a:active{
 46     color: #eee;
 47     font-size: 18px;
 48     font-weight: bold;
 49 }
 50 .blogStats{
 51     color: #eee;
 52 }
 53 .postTitle {
 54     border-left: 8px solid rgba(33, 160, 139, 0.68);
 55     margin-left: 10px;
 56     margin-bottom: 10px;
 57     font-size: 20px;
 58     float: right;
 59     width: 100%;
 60     clear: both;
 61 }
 62 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 63     color: #21759b;
 64     transition: all 0.4s linear 0s;
 65 }
 66 .postTitle a:hover {
 67     margin-left: 30px;
 68     color: #0f3647;
 69     text-decoration: none;
 70 }
 71 .postCon {
 72     float: right;
 73     line-height: 1.5em;
 74     width: 100%;
 75     clear: both;
 76     padding: 10px 0;
 77 }
 78 
 79 .day .postTitle a {
 80     padding-left: 10px;
 81 }
 82 .day {
 83     background: rgba(255, 255, 255, 0.5);
 84 }
 85 /*文章附加信息*/
 86 .postDesc {   
 87     background: url(images/posted_time.png) no-repeat 0 1px;
 88     color: #757575;
 89     float: left;
 90     width: 100%;
 91     clear: both;
 92     text-align: left;     
 93     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 94     font-size: 13px;
 95     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
 96     margin-top: 20px;
 97     line-height: 1.8;
 98     padding-bottom: 35px;
 99 }
100 
101 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
102 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
103 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
104 {
105     background: rgba(255, 255, 255, 0.5);
106     margin-bottom: 35px;
107     word-wrap: break-word;
108 }
109 
110 .CalTitle{
111     background: rgba(255, 255, 255, 0);
112 }
113 .catListTitle{
114     background-color: rgba(33, 160, 139, 0.9);
115 }
116 
117 #topics{
118     background: rgba(255, 255, 255, 0.5);
119 }
120 
121 .c_ad_block{
122     display: none;
123 }
124 
125 #tbCommentBody{
126     width: 100%;
127     height: 200px;
128     background: rgba(255, 255, 255, 0.5);
129 }
130 
131 #q{background: rgba(255, 255, 255, 0);}
132 
133 .CalNextPrev{background: rgba(255, 255, 255, 0);}

简约

  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 <script>
 10 function GetRandomNum(Min,Max){
 11     var Range=Max-Min;
 12     var Rand=Math.random();
 13     return(Min+Math.round(Rand * Range));
 14 }
 15 function ShowTab(){
 16     x=document.getElementById("MagicArray");
 17     if (x.style.width=="200px"){
 18         x.style.width="0px";
 19         x.style.height="0px";
 20         x.style.bottom="100px";
 21         x.style.right="100px";
 22         x.style.transform="rotate(0deg)";
 23     }else{
 24         x.style.width="200px";
 25         x.style.height="200px";
 26         x.style.bottom="0px";
 27         x.style.right="0px";
 28         x.style.transform="rotate(180deg)";
 29     }
 30     
 31     y=document.getElementsByName("Tab");
 32     for (var i=0;i<y.length;i++){
 33         x=y[i];
 34         if (x.style.fontSize=="15px"){
 35             x.style.fontSize="0px";
 36             x.style.transitionDelay="0s";
 37         }else{
 38             x.style.fontSize="15px";
 39             x.style.transitionDelay="0.8s";
 40         }
 41     }
 42 }
 43 function ShowPicture(){
 44     x=document.getElementById("main");
 45     x.style.opacity=0.9-x.style.opacity;
 46 }
 47 function ChangePicture(){
 48     x=document.body;
 49     y=GetRandomNum(0,14);
 50     if (y==0){
 51         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
 52         x.style.backgroundSize="cover";
 53     }else if (y==1){
 54         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
 55         x.style.backgroundSize="cover";
 56     }else if (y==2){
 57         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
 58         x.style.backgroundSize="cover";
 59     }else if (y==3){
 60         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
 61         x.style.backgroundSize="cover";
 62     }else if (y==4){
 63         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
 64         x.style.backgroundSize="cover";
 65     }else if (y==5){
 66         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
 67         x.style.backgroundSize="cover";
 68     }else if (y==6){
 69         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
 70         x.style.backgroundSize="cover";
 71     }else if (y==7){
 72         x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
 73         x.style.backgroundSize="cover";
 74     }else if (y==8){
 75         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
 76         x.style.backgroundSize="cover";
 77     }else if (y==9){
 78         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
 79         x.style.backgroundSize="cover";
 80     }else if (y==10){
 81         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
 82         x.style.backgroundSize="cover";
 83     }else if (y==11){
 84         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
 85         x.style.backgroundSize="cover";
 86     }else if (y==12){
 87         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
 88         x.style.backgroundSize="cover";
 89     }else if (y==13){
 90         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
 91         x.style.backgroundSize="cover";
 92     }else if (y==14){
 93         x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
 94         x.style.backgroundSize="cover";
 95     }
 96 }
 97 
 98 </script>
 99 
100 
101 </body>
102 </html>
103 <!DOCTYPE html>
104 <html>
105 <body>
106 
107 
108 <style>
109 #Canvas{
110     position:fixed;
111     top:0px;
112     left:0px;
113 }
114 </style>
115 
116 <canvas id="Canvas"></canvas>
117 
118 <script>
119     window.requestAnimFrame=
120         window.requestAnimationFrame||
121         window.webkitRequestAnimationFrame||
122         window.mozRequestAnimationFrame||
123         window.oRequestAnimationFrame||
124         window.msRequestAnimationFrame||
125         function(callback){window.setTimeout(callback, 1000/10);};
126     var W=document.body.scrollWidth,H=document.body.scrollHeight;
127     var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
128     var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
129     var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
130     var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
131     ca.width=W;ca.height=H;
132     img1.src="http://fq.wc.lt//up/1504690030.png";
133     img2.src="http://fq.wc.lt//up/1504690047.png";
134     img3.src="http://fq.wc.lt//up/1504690062.png";
135     img4.src="http://fq.wc.lt//up/1504690077.png";
136     
137     function RandomNum(Min,Max){
138         var Range=Max-Min;
139         var Rand=Math.random();
140         return(Min+Math.round(Rand * Range));
141     }
142     function RandomReal(Min,Max){
143         return Min+(Max-Min)*Math.random();
144     }
145     function abs(W){return W<=0?-W:W;}
146     function drawtail(px,py,an){
147         an=Math.atan(an);
148         for (var i=0;i<10;i++){
149             var X,Y;
150             Y=Math.sqrt(RandomReal(0,lline*lline));
151             X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
152             Y=lline-Y;
153             X+=10;
154             el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
155         }
156     }
157     function drawstar(px,py,ti){
158         if (ti==1) el.drawImage(img1,px,py,20,20);else
159         if (ti==2) el.drawImage(img2,px,py,20,20);else
160         if (ti==3) el.drawImage(img3,px,py,20,20);else
161         if (ti==4) el.drawImage(img4,px,py,20,20);
162     }
163     function drawline(sx,sy,px,py){
164         el.beginPath();
165         el.moveTo(sx,sy);
166         el.lineTo(px,py);
167         el.stroke();
168         el.closePath();
169     }
170     function dis(sx,sy,px,py){
171         return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
172     }
173     function work(timestamp){
174         if (RandomNum(0,5)==0){
175             x.push(RandomNum(0,W));
176             y.push(RandomNum(0,H));
177             t.push(0);
178             TT.push(RandomNum(3,10));
179             speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
180             angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
181             for (;;){
182                 if (Math.random()<=0.7) y[num]=0;else{
183                     y[num]%=200;
184                     if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
185                 }
186                 var i;
187                 for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
188                 if (i==num) break;
189                 x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
190             }
191             num++;
192         }
193         el.clearRect(0,0,W,H);
194         el.fillStyle="#7B68EE";
195         var tmp;
196         for (var i=0;i<num;i++)
197         for (var j=i+1;j<num;j++)
198         if (dis(x[i],y[i],x[j],y[j])<20){
199             tmp=speed[i];
200             speed[i]=speed[j];
201             speed[j]=tmp;
202             
203             tmp=angle[i];
204             angle[i]=angle[j];
205             angle[j]=tmp;
206         }
207         for (var i=0;i<num;i++){
208             //el.fillRect(x[i],y[i],10,10);
209             drawtail(x[i],y[i],angle[i]);
210             drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
211             y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
212             t[i]++;
213             if (y[i]>=H||x[i]<0||x[i]>=W){
214                 num--;
215                 x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
216                 x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
217                 i--;
218             }
219         }
220         timer=requestAnimationFrame(work);
221     }
222     timer=requestAnimationFrame(work);
223     var sta=1;
224     function control(){
225         if (sta==1){
226             cancelAnimationFrame(timer);
227             ca.style.opacity="0";
228             sta=0;
229         }else{
230             timer=requestAnimationFrame(work);
231             ca.style.opacity="1";
232             sta=1;
233         }
234     }
235     
236     
237     function ShowTab(){
238         dx=document.getElementById("MagicArray");
239         if (dx.style.width=="200px"){
240             dx.style.width="0px";
241             dx.style.height="0px";
242             dx.style.bottom="100px";
243             dx.style.right="100px";
244             dx.style.transform="rotate(0deg)";
245         }else{
246             dx.style.width="200px";
247             dx.style.height="200px";
248             dx.style.bottom="0px";
249             dx.style.right="0px";
250             dx.style.transform="rotate(180deg)";
251         }
252     
253         dy=document.getElementsByName("Tab");
254         for (var i=0;i<y.length;i++){
255             dx=dy[i];
256             if (dx.style.fontSize=="15px"){
257                 dx.style.fontSize="0px";
258                 dx.style.transitionDelay="0s";
259             }else{
260                 dx.style.fontSize="15px";
261                 dx.style.transitionDelay="0.8s";
262             }
263         }
264     }
265     function ShowPicture(){
266         dx=document.getElementById("main");
267         if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
268     }
269     function ChangePicture(){
270         dx=document.body;
271         dy=RandomNum(0,14);
272         if (dy==0){
273             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
274             dx.style.backgroundSize="cover";
275         }else if (dy==1){
276             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
277             dx.style.backgroundSize="cover";
278         }else if (dy==2){
279             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
280             dx.style.backgroundSize="cover";
281         }else if (dy==3){
282             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
283             dx.style.backgroundSize="cover";
284         }else if (dy==4){
285             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
286             dx.style.backgroundSize="cover";
287         }else if (dy==5){
288             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
289             dx.style.backgroundSize="cover";
290         }else if (dy==6){
291             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
292             dx.style.backgroundSize="cover";
293         }else if (dy==7){
294             dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
295             dx.style.backgroundSize="cover";
296         }else if (dy==8){
297             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
298             dx.style.backgroundSize="cover";
299         }else if (dy==9){
300             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
301             dx.style.backgroundSize="cover";
302         }else if (dy==10){
303             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
304             dx.style.backgroundSize="cover";
305         }else if (dy==11){
306             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
307             dx.style.backgroundSize="cover";
308         }else if (dy==12){
309             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
310             dx.style.backgroundSize="cover";
311         }else if (dy==13){
312             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
313             dx.style.backgroundSize="cover";
314         }else if (dy==14){
315             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
316             dx.style.backgroundSize="cover";
317         }
318     }
319     ChangePicture();
320 </script>
321 
322 
323 </body>
324 </html>

可随即图片的页首

 1 <div class="scrollBtn" id="scrollBtn">
 2     <ul class="clearfix">
 3         <li class="sB-goTop" id="goTop" style="display: list-item;">
 4             <a href="#top" title="回顶部">
 5             </a>
 6         </li>
 7     </ul>
 8 </div>
 9 <script language="javascript" type="text/javascript">
10   //生成目录索引列表
11 function GenerateContentList() {
12     var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
13     if (jquery_h3_list.length > 0) {
14         var content = '';
15         content += '<div id="navCategory" style="border-radius: 10px;background-color: #ECECEC;padding:10px;margin-bottom: 12px;">';
16         content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>';
17         content += '<ul>';
18         for (var i = 0; i < jquery_h3_list.length; i++) {
19             var go_to_top = '<div style="text-align: right;    text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '" style="border-bottom: none;"></a></div>';
20             $(jquery_h3_list[i]).before(go_to_top);
21             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
22             content += li_content;
23         }
24         content += '</ul>';
25         content += '</div>';
26         if ($('#cnblogs_post_body').length != 0) {
27             $($('#cnblogs_post_body')[0]).prepend(content);
28         }
29     }
30 } GenerateContentList();
31 </script>
32 
33 <!-- JiaThis Button BEGIN -->
34 <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
35 <!-- JiaThis Button END -->

目录索引，页脚

  1 <!DOCTYPE html>
  2 <html>
  3 <body>
  4 
  5 
  6 <style>
  7 #Canvas{
  8     position:fixed;
  9     top:0px;
 10     left:0px;
 11 }
 12 </style>
 13 
 14 <canvas id="Canvas"></canvas>
 15 
 16 <script>
 17     window.requestAnimFrame=
 18         window.requestAnimationFrame||
 19         window.webkitRequestAnimationFrame||
 20         window.mozRequestAnimationFrame||
 21         window.oRequestAnimationFrame||
 22         window.msRequestAnimationFrame||
 23         function(callback){window.setTimeout(callback, 1000/10);};
 24     var W=document.body.scrollWidth,H=document.body.scrollHeight;
 25     var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
 26     var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
 27     var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
 28     var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
 29     ca.width=W;ca.height=H;
 30     img1.src="http://fq.wc.lt//up/1504690030.png";
 31     img2.src="http://fq.wc.lt//up/1504690047.png";
 32     img3.src="http://fq.wc.lt//up/1504690062.png";
 33     img4.src="http://fq.wc.lt//up/1504690077.png";
 34     
 35     function RandomNum(Min,Max){
 36         var Range=Max-Min;
 37         var Rand=Math.random();
 38         return(Min+Math.round(Rand * Range));
 39     }
 40     function RandomReal(Min,Max){
 41         return Min+(Max-Min)*Math.random();
 42     }
 43     function abs(W){return W<=0?-W:W;}
 44     function drawtail(px,py,an){
 45         an=Math.atan(an);
 46         for (var i=0;i<10;i++){
 47             var X,Y;
 48             Y=Math.sqrt(RandomReal(0,lline*lline));
 49             X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
 50             Y=lline-Y;
 51             X+=10;
 52             el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
 53         }
 54     }
 55     function drawstar(px,py,ti){
 56         if (ti==1) el.drawImage(img1,px,py,20,20);else
 57         if (ti==2) el.drawImage(img2,px,py,20,20);else
 58         if (ti==3) el.drawImage(img3,px,py,20,20);else
 59         if (ti==4) el.drawImage(img4,px,py,20,20);
 60     }
 61     function drawline(sx,sy,px,py){
 62         el.beginPath();
 63         el.moveTo(sx,sy);
 64         el.lineTo(px,py);
 65         el.stroke();
 66         el.closePath();
 67     }
 68     function dis(sx,sy,px,py){
 69         return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
 70     }
 71     function work(timestamp){
 72         if (RandomNum(0,5)==0){
 73             x.push(RandomNum(0,W));
 74             y.push(RandomNum(0,H));
 75             t.push(0);
 76             TT.push(RandomNum(3,10));
 77             speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
 78             angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
 79             for (;;){
 80                 if (Math.random()<=0.7) y[num]=0;else{
 81                     y[num]%=200;
 82                     if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
 83                 }
 84                 var i;
 85                 for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
 86                 if (i==num) break;
 87                 x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
 88             }
 89             num++;
 90         }
 91         el.clearRect(0,0,W,H);
 92         el.fillStyle="#7B68EE";
 93         var tmp;
 94         for (var i=0;i<num;i++)
 95         for (var j=i+1;j<num;j++)
 96         if (dis(x[i],y[i],x[j],y[j])<20){
 97             tmp=speed[i];
 98             speed[i]=speed[j];
 99             speed[j]=tmp;
100             
101             tmp=angle[i];
102             angle[i]=angle[j];
103             angle[j]=tmp;
104         }
105         for (var i=0;i<num;i++){
106             //el.fillRect(x[i],y[i],10,10);
107             drawtail(x[i],y[i],angle[i]);
108             drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
109             y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
110             t[i]++;
111             if (y[i]>=H||x[i]<0||x[i]>=W){
112                 num--;
113                 x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
114                 x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
115                 i--;
116             }
117         }
118         timer=requestAnimationFrame(work);
119     }
120     timer=requestAnimationFrame(work);
121     var sta=1;
122     function control(){
123         if (sta==1){
124             cancelAnimationFrame(timer);
125             ca.style.opacity="0";
126             sta=0;
127         }else{
128             timer=requestAnimationFrame(work);
129             ca.style.opacity="1";
130             sta=1;
131         }
132     }
133     
134     
135     function ShowTab(){
136         dx=document.getElementById("MagicArray");
137         if (dx.style.width=="200px"){
138             dx.style.width="0px";
139             dx.style.height="0px";
140             dx.style.bottom="100px";
141             dx.style.right="100px";
142             dx.style.transform="rotate(0deg)";
143         }else{
144             dx.style.width="200px";
145             dx.style.height="200px";
146             dx.style.bottom="0px";
147             dx.style.right="0px";
148             dx.style.transform="rotate(180deg)";
149         }
150     
151         dy=document.getElementsByName("Tab");
152         for (var i=0;i<y.length;i++){
153             dx=dy[i];
154             if (dx.style.fontSize=="15px"){
155                 dx.style.fontSize="0px";
156                 dx.style.transitionDelay="0s";
157             }else{
158                 dx.style.fontSize="15px";
159                 dx.style.transitionDelay="0.8s";
160             }
161         }
162     }
163     function ShowPicture(){
164         dx=document.getElementById("main");
165         if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
166     }
167     function ChangePicture(){
168         dx=document.body;
169         dy=RandomNum(0,7);
170         if (dy==0){
171             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg) no-repeat fixed";
172             dx.style.backgroundSize="cover";
173         }else if (dy==1){
174             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_190932u7s1ndu3um7dur47.jpg) no-repeat fixed";
175             dx.style.backgroundSize="cover";
176         }else if (dy==2){
177             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_191141bm7fmzff3fvm9fzu.jpg) no-repeat fixed";
178             dx.style.backgroundSize="cover";
179         }else if (dy==3){
180             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_110904120936533b0dc7f4b090.jpg) no-repeat fixed";
181             dx.style.backgroundSize="cover";
182         }else if (dy==4){
183             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_Danbo_Danboard_photo_201538.jpg) no-repeat fixed";
184             dx.style.backgroundSize="cover";
185         }else if (dy==5){
186             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_enterdesk.com-1727B07CFD1D7233FEDC3A45CC02852C.jpg) no-repeat fixed";
187             dx.style.backgroundSize="cover";
188         }else if (dy==6){
189             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_t01c972d25e375a6dcd.jpg) no-repeat fixed";
190             dx.style.backgroundSize="cover";
191         }else if (dy==7){
192             dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_191108nphe2sphtszdb9pk%20(1).jpg) no-repeat fixed";
193             dx.style.backgroundSize="cover";
194         }/*else if (dy==8){
195             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
196             dx.style.backgroundSize="cover";
197         }else if (dy==9){
198             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
199             dx.style.backgroundSize="cover";
200         }else if (dy==10){
201             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
202             dx.style.backgroundSize="cover";
203         }else if (dy==11){
204             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
205             dx.style.backgroundSize="cover";
206         }else if (dy==12){
207             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
208             dx.style.backgroundSize="cover";
209         }else if (dy==13){
210             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
211             dx.style.backgroundSize="cover";
212         }else if (dy==14){
213             dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
214             dx.style.backgroundSize="cover";
215         }*/
216     }
217     ChangePicture();
218 </script>
219 
220 
221 </body>
222 </html>

页首，较正常

  1 /*darkgreentrip*/
  2 #home {
  3     opacity: 0.90;
  4     margin: 0 auto;
  5     width: 85%;/*原始65*/
  6     min-width: 980px;/*页面顶部的宽度*/
  7     background-color: rgba(245, 245, 245, 0.7);
  8     padding: 30px;
  9     margin-top: 50px;
 10     margin-bottom: 50px;
 11     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 12 }
 13 body {
 14     background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg') fixed no-repeat;
 15     background-position: 50% 5%; 
 16 //  background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
 17     background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
 18 //  background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
 19 //  background-size:cover;/* 将背景图片等比缩放填满整个容器 */
 20 }
 21 #blogTitle {
 22     height: 100px;  /*高度*/
 23     clear: both;
 24     background-color: rgba(245, 245, 245, 0);
 25 }
 26 #blogTitle h1 {
 27     font-size: 36px;
 28     font-weight: bold;
 29     line-height: 1.8em;/*原始 1.6em*/
 30     margin-top: 10px;/*原始 15px */
 31     color: #548B54;
 32 }
 33 #blogTitle h2 {
 34     font-weight: normal;
 35     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
 36     line-height: 1.8;
 37     color: #111;
 38     font-weight: bold;
 39     text-align: right;
 40     float: right; 
 41 }
 42 #navigator{
 43     background-color: rgba(33, 160, 139, 0.9);
 44 }
 45 #navList a:link, #navList a:visited, #navList a:active{
 46     color: #eee;
 47     font-size: 18px;
 48     font-weight: bold;
 49 }
 50 .blogStats{
 51     color: #eee;
 52 }
 53 .postTitle {
 54     border-left: 8px solid rgba(33, 160, 139, 0.68);
 55     margin-left: 10px;
 56     margin-bottom: 10px;
 57     font-size: 20px;
 58     float: right;
 59     width: 100%;
 60     clear: both;
 61 }
 62 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 63     color: #21759b;
 64     transition: all 0.4s linear 0s;
 65 }
 66 .postTitle a:hover {
 67     margin-left: 30px;
 68     color: #0f3647;
 69     text-decoration: none;
 70 }
 71 .postCon {
 72     float: right;
 73     line-height: 1.5em;
 74     width: 100%;
 75     clear: both;
 76     padding: 10px 0;
 77 }
 78 
 79 .day .postTitle a {
 80     padding-left: 10px;
 81 }
 82 .day {
 83     background: rgba(255, 255, 255, 0.5);
 84 }
 85 /*文章附加信息*/
 86 .postDesc {   
 87     background: url(images/posted_time.png) no-repeat 0 1px;
 88     color: #757575;
 89     float: left;
 90     width: 100%;
 91     clear: both;
 92     text-align: left;     
 93     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 94     font-size: 13px;
 95     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
 96     margin-top: 20px;
 97     line-height: 1.8;
 98     padding-bottom: 35px;
 99 }
100 
101 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
102 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
103 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
104 {
105     background: rgba(255, 255, 255, 0.5);
106     margin-bottom: 35px;
107     word-wrap: break-word;
108 }
109 
110 .CalTitle{
111     background: rgba(255, 255, 255, 0);
112 }
113 .catListTitle{
114     background-color: rgba(33, 160, 139, 0.9);
115 }
116 
117 #topics{
118     background: rgba(255, 255, 255, 0.5);
119 }
120 
121 .c_ad_block{
122     display: none;
123 }
124 
125 #tbCommentBody{
126     width: 100%;
127     height: 200px;
128     background: rgba(255, 255, 255, 0.5);
129 }
130 
131 #q{background: rgba(255, 255, 255, 0);}
132 
133 .CalNextPrev{background: rgba(255, 255, 255, 0);}

诡异