CSS，HTML页面定制
/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter
table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
opacity: 0.60;
margin: 0 auto;
width: 85%;
min-width: 900px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{
display: none !important;
}
body {
color: #000;
background: url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg
) fixed;
background-size: 1300px;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 90%;
// background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
//background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
//background-size:cover;/* 将背景图片等比缩放填满整个容器 */
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
} div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
} #blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}
可调高度，改透明度
/*darkgreentrip*/
#home {
opacity: 0.90;
margin: 0 auto;
width: 85%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg') fixed no-repeat;
background-position: 50% 5%;
// background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
// background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
// background-size:cover;/* 将背景图片等比缩放填满整个容器 */
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
} .day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
} .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
} .CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(33, 160, 139, 0.9);
} #topics{
background: rgba(255, 255, 255, 0.5);
} .c_ad_block{
display: none;
} #tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
} #q{background: rgba(255, 255, 255, 0);} .CalNextPrev{background: rgba(255, 255, 255, 0);}
简约
<!DOCTYPE html>
<html>
<body> <style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style> <script>
function GetRandomNum(Min,Max){
var Range=Max-Min;
var Rand=Math.random();
return(Min+Math.round(Rand * Range));
}
function ShowTab(){
x=document.getElementById("MagicArray");
if (x.style.width=="200px"){
x.style.width="0px";
x.style.height="0px";
x.style.bottom="100px";
x.style.right="100px";
x.style.transform="rotate(0deg)";
}else{
x.style.width="200px";
x.style.height="200px";
x.style.bottom="0px";
x.style.right="0px";
x.style.transform="rotate(180deg)";
} y=document.getElementsByName("Tab");
for (var i=0;i<y.length;i++){
x=y[i];
if (x.style.fontSize=="15px"){
x.style.fontSize="0px";
x.style.transitionDelay="0s";
}else{
x.style.fontSize="15px";
x.style.transitionDelay="0.8s";
}
}
}
function ShowPicture(){
x=document.getElementById("main");
x.style.opacity=0.9-x.style.opacity;
}
function ChangePicture(){
x=document.body;
y=GetRandomNum(0,14);
if (y==0){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==1){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==2){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==3){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==4){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==5){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==6){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==7){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==8){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==9){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==10){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==11){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==12){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==13){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==14){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}
} </script> </body>
</html>
<!DOCTYPE html>
<html>
<body> <style>
#Canvas{
position:fixed;
top:0px;
left:0px;
}
</style> <canvas id="Canvas"></canvas> <script>
window.requestAnimFrame=
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback){window.setTimeout(callback, 1000/10);};
var W=document.body.scrollWidth,H=document.body.scrollHeight;
var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
ca.width=W;ca.height=H;
img1.src="http://fq.wc.lt//up/1504690030.png";
img2.src="http://fq.wc.lt//up/1504690047.png";
img3.src="http://fq.wc.lt//up/1504690062.png";
img4.src="http://fq.wc.lt//up/1504690077.png"; function RandomNum(Min,Max){
var Range=Max-Min;
var Rand=Math.random();
return(Min+Math.round(Rand * Range));
}
function RandomReal(Min,Max){
return Min+(Max-Min)*Math.random();
}
function abs(W){return W<=0?-W:W;}
function drawtail(px,py,an){
an=Math.atan(an);
for (var i=0;i<10;i++){
var X,Y;
Y=Math.sqrt(RandomReal(0,lline*lline));
X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
Y=lline-Y;
X+=10;
el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
}
}
function drawstar(px,py,ti){
if (ti==1) el.drawImage(img1,px,py,20,20);else
if (ti==2) el.drawImage(img2,px,py,20,20);else
if (ti==3) el.drawImage(img3,px,py,20,20);else
if (ti==4) el.drawImage(img4,px,py,20,20);
}
function drawline(sx,sy,px,py){
el.beginPath();
el.moveTo(sx,sy);
el.lineTo(px,py);
el.stroke();
el.closePath();
}
function dis(sx,sy,px,py){
return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
}
function work(timestamp){
if (RandomNum(0,5)==0){
x.push(RandomNum(0,W));
y.push(RandomNum(0,H));
t.push(0);
TT.push(RandomNum(3,10));
speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
for (;;){
if (Math.random()<=0.7) y[num]=0;else{
y[num]%=200;
if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
}
var i;
for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
if (i==num) break;
x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
}
num++;
}
el.clearRect(0,0,W,H);
el.fillStyle="#7B68EE";
var tmp;
for (var i=0;i<num;i++)
for (var j=i+1;j<num;j++)
if (dis(x[i],y[i],x[j],y[j])<20){
tmp=speed[i];
speed[i]=speed[j];
speed[j]=tmp; tmp=angle[i];
angle[i]=angle[j];
angle[j]=tmp;
}
for (var i=0;i<num;i++){
//el.fillRect(x[i],y[i],10,10);
drawtail(x[i],y[i],angle[i]);
drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
t[i]++;
if (y[i]>=H||x[i]<0||x[i]>=W){
num--;
x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
i--;
}
}
timer=requestAnimationFrame(work);
}
timer=requestAnimationFrame(work);
var sta=1;
function control(){
if (sta==1){
cancelAnimationFrame(timer);
ca.style.opacity="0";
sta=0;
}else{
timer=requestAnimationFrame(work);
ca.style.opacity="1";
sta=1;
}
} function ShowTab(){
dx=document.getElementById("MagicArray");
if (dx.style.width=="200px"){
dx.style.width="0px";
dx.style.height="0px";
dx.style.bottom="100px";
dx.style.right="100px";
dx.style.transform="rotate(0deg)";
}else{
dx.style.width="200px";
dx.style.height="200px";
dx.style.bottom="0px";
dx.style.right="0px";
dx.style.transform="rotate(180deg)";
} dy=document.getElementsByName("Tab");
for (var i=0;i<y.length;i++){
dx=dy[i];
if (dx.style.fontSize=="15px"){
dx.style.fontSize="0px";
dx.style.transitionDelay="0s";
}else{
dx.style.fontSize="15px";
dx.style.transitionDelay="0.8s";
}
}
}
function ShowPicture(){
dx=document.getElementById("main");
if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
}
function ChangePicture(){
dx=document.body;
dy=RandomNum(0,14);
if (dy==0){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==1){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==2){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==3){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==4){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==5){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==6){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==7){
dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==8){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==9){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==10){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==11){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==12){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==13){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==14){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}
}
ChangePicture();
</script> </body>
</html>
可随即图片的页首
<div class="scrollBtn" id="scrollBtn">
<ul class="clearfix">
<li class="sB-goTop" id="goTop" style="display: list-item;">
<a href="#top" title="回顶部">
</a>
</li>
</ul>
</div>
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList() {
var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
if (jquery_h3_list.length > 0) {
var content = '';
content += '<div id="navCategory" style="border-radius: 10px;background-color: #ECECEC;padding:10px;margin-bottom: 12px;">';
content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>';
content += '<ul>';
for (var i = 0; i < jquery_h3_list.length; i++) {
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>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if ($('#cnblogs_post_body').length != 0) {
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
} GenerateContentList();
</script> <!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->
目录索引，页脚
<!DOCTYPE html>
<html>
<body> <style>
#Canvas{
position:fixed;
top:0px;
left:0px;
}
</style> <canvas id="Canvas"></canvas> <script>
window.requestAnimFrame=
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback){window.setTimeout(callback, 1000/10);};
var W=document.body.scrollWidth,H=document.body.scrollHeight;
var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
ca.width=W;ca.height=H;
img1.src="http://fq.wc.lt//up/1504690030.png";
img2.src="http://fq.wc.lt//up/1504690047.png";
img3.src="http://fq.wc.lt//up/1504690062.png";
img4.src="http://fq.wc.lt//up/1504690077.png"; function RandomNum(Min,Max){
var Range=Max-Min;
var Rand=Math.random();
return(Min+Math.round(Rand * Range));
}
function RandomReal(Min,Max){
return Min+(Max-Min)*Math.random();
}
function abs(W){return W<=0?-W:W;}
function drawtail(px,py,an){
an=Math.atan(an);
for (var i=0;i<10;i++){
var X,Y;
Y=Math.sqrt(RandomReal(0,lline*lline));
X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
Y=lline-Y;
X+=10;
el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
}
}
function drawstar(px,py,ti){
if (ti==1) el.drawImage(img1,px,py,20,20);else
if (ti==2) el.drawImage(img2,px,py,20,20);else
if (ti==3) el.drawImage(img3,px,py,20,20);else
if (ti==4) el.drawImage(img4,px,py,20,20);
}
function drawline(sx,sy,px,py){
el.beginPath();
el.moveTo(sx,sy);
el.lineTo(px,py);
el.stroke();
el.closePath();
}
function dis(sx,sy,px,py){
return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
}
function work(timestamp){
if (RandomNum(0,5)==0){
x.push(RandomNum(0,W));
y.push(RandomNum(0,H));
t.push(0);
TT.push(RandomNum(3,10));
speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
for (;;){
if (Math.random()<=0.7) y[num]=0;else{
y[num]%=200;
if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
}
var i;
for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
if (i==num) break;
x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
}
num++;
}
el.clearRect(0,0,W,H);
el.fillStyle="#7B68EE";
var tmp;
for (var i=0;i<num;i++)
for (var j=i+1;j<num;j++)
if (dis(x[i],y[i],x[j],y[j])<20){
tmp=speed[i];
speed[i]=speed[j];
speed[j]=tmp; tmp=angle[i];
angle[i]=angle[j];
angle[j]=tmp;
}
for (var i=0;i<num;i++){
//el.fillRect(x[i],y[i],10,10);
drawtail(x[i],y[i],angle[i]);
drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
t[i]++;
if (y[i]>=H||x[i]<0||x[i]>=W){
num--;
x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
i--;
}
}
timer=requestAnimationFrame(work);
}
timer=requestAnimationFrame(work);
var sta=1;
function control(){
if (sta==1){
cancelAnimationFrame(timer);
ca.style.opacity="0";
sta=0;
}else{
timer=requestAnimationFrame(work);
ca.style.opacity="1";
sta=1;
}
} function ShowTab(){
dx=document.getElementById("MagicArray");
if (dx.style.width=="200px"){
dx.style.width="0px";
dx.style.height="0px";
dx.style.bottom="100px";
dx.style.right="100px";
dx.style.transform="rotate(0deg)";
}else{
dx.style.width="200px";
dx.style.height="200px";
dx.style.bottom="0px";
dx.style.right="0px";
dx.style.transform="rotate(180deg)";
} dy=document.getElementsByName("Tab");
for (var i=0;i<y.length;i++){
dx=dy[i];
if (dx.style.fontSize=="15px"){
dx.style.fontSize="0px";
dx.style.transitionDelay="0s";
}else{
dx.style.fontSize="15px";
dx.style.transitionDelay="0.8s";
}
}
}
function ShowPicture(){
dx=document.getElementById("main");
if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
}
function ChangePicture(){
dx=document.body;
dy=RandomNum(0,7);
if (dy==0){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==1){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_190932u7s1ndu3um7dur47.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==2){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_191141bm7fmzff3fvm9fzu.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==3){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_110904120936533b0dc7f4b090.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==4){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_Danbo_Danboard_photo_201538.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==5){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_enterdesk.com-1727B07CFD1D7233FEDC3A45CC02852C.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==6){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_t01c972d25e375a6dcd.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==7){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_191108nphe2sphtszdb9pk%20(1).jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}/*else if (dy==8){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==9){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==10){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==11){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==12){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==13){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==14){
dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}*/
}
ChangePicture();
</script> </body>
</html>
页首，较正常
/*darkgreentrip*/
#home {
opacity: 0.90;
margin: 0 auto;
width: 85%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Shy-key/1088995/o_2.jpg') fixed no-repeat;
background-position: 50% 5%;
// background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:1450px 800px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
// background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
// background-size:cover;/* 将背景图片等比缩放填满整个容器 */
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
} .day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
} .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
} .CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(33, 160, 139, 0.9);
} #topics{
background: rgba(255, 255, 255, 0.5);
} .c_ad_block{
display: none;
} #tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
} #q{background: rgba(255, 255, 255, 0);} .CalNextPrev{background: rgba(255, 255, 255, 0);}
诡异
CSS，HTML页面定制的更多相关文章
- 我的页面定制CSS代码（SimpleGamboge皮肤）
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
- 页面定制CSS代码初探（一）：页面变宽 文本自动换行 图片按比缩放
初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...
- 不懂CSS也能定制博客界面!
之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
- Flex中使用CSS控制页面样式
Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- CSS排版页面
创建CSS文件如下: @charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; border:0px; } ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
随机推荐
- mysql Access denied for user 'root'@'localhost'问题解决
问题描述: 系统安装mysql的过程中,没有提示配置用户名和密码相关的信息,安装完毕后,登录报错. 表现现象为: mysql -u root -p [输入root密码] 界面提示: ERROR 169 ...
- linux socket c/s上传文件
这是上传文件的一个示例,可以参照自行修改成下载或者其它功能. 在上传时,需要先将文件名传到服务器端,这是采用一个结构体,包含文件名及文件名长度(可以用于校验),防止文件名乱码. client #inc ...
- JavaWeb笔记（八）JQuery
三个版本 1.x:兼容 ie678,使用最为广泛的,官方只做BUG维护, 功能不再新增.因此一般项目来说,使用1.x版本就可以了 最终版本:1.12.4 2.x:不兼容ie678,很少有人使用,官方只 ...
- 关于jdk与jre的区别
JDK:Java Development Kit JRE顾名思义是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言编写的程序运行所需要的软件环境,是提供给想运行java程 ...
- sqlalchemy presto 时间比较
大数据统计时,需要计算开仓订单减掉经纪商时间差,等于n 小时 或 星期几的订单. presto sql语句如下: select sum(profit) from t_table where open_ ...
- P2294 [HNOI2005]狡猾的商人
题目描述 输入输出格式 输入格式: 从文件input.txt中读入数据,文件第一行为一个正整数w,其中w < 100,表示有w组数据,即w个账本,需要你判断.每组数据的第一行为两个正整数n和m, ...
- [HNOI2015][bzoj4009] 接水果 [整体二分+扫描线]
题面 传送门 思路 本题其实有在线做法......但是太难写了,退而求其次写了离线 基本思路就是,考虑一个盘子以及它能接到的所有水果 可以发现,这个水果的端点一定在这个盘子两端的"子树&qu ...
- BZOJ 1208 [HNOI2004]宠物收养所 | SPlay模板题
题目: 洛谷也能评 题解: 记录一下当前树维护是宠物还是人,用Splay维护插入和删除. 对于任何一次询问操作都求一下value的前驱和后继(这里前驱和后继是可以和value相等的),比较哪个差值绝对 ...
- 雅礼集训 Day3 T2 v 解题报告
v 题目背景 \(\frac 14\)遇到了一道水题,又完全不会做,于是去请教小\(\text{D}\).小\(\text{D}\)看了\(0.607\)眼就切掉了这题,嘲讽了\(\frac 14\) ...
- 命令__cp、scp（Secure Copy）
cp命令:区别:硬链接原文件&链接文件公用一个inode号,说明他们是同一个文件,而软链接原文件&链接文件拥有不同的inode号,表明他们是两个不同的文件: 在文件属性上软链接明确写出 ...