zoukankan html css js c++ java

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);}

诡异

查看全文

相关阅读:
mojo 接口示例
 MojoliciousLite: 实时的web框架概述
 接口返回json
centos 6.7 perl 版本 This is perl 5, version 22 安装DBI DBD
centos 6.7 perl 5.22 安装DBD 需要使用老的perl版本
 商业智能改变汽车行业
 商业智能改变汽车行业
 读MBA经历回顾（上）目的决定手段——北漂18年（48）
perl 升级到5.20版本
 Group Commit of Binary Log

原文地址：https://www.cnblogs.com/Shy-key/p/7683388.html