博客园自定义页面风格设计
最近好多人问我博客的页面设计模版，时间挺紧张的，赶着搞策划和学习。。。趁着现在放假写写吧~~~
全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用Simple Memory，可以自适应，方便我们进行页面CSS定制
论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ
①拥有自己的CSS代码
我自己是完全禁用掉了模板CSS
然后会发现，blog干净得很，一点样式都没有。
对于我们这种小白来说，从头到尾自己写一份完整的CSS代码是不现实的，这时候我们需要一份代码模板，拿模板来改就比较容易了。
网上会有一些人把自己的CSS代码公开出来，当然实际上你浏览别人的blog的时候，（对于Chrome浏览器）轻按F12，你可以在style那个小栏里找到该网页的CSS代码链接，或者似乎可以写个爬虫啥的来获取，下面是我写的Python爬虫代码，轻松获取~~~
#!/usr/bin/env python #-*- coding:utf-8 -*- import urllib2 resp=urllib2.urlopen('http://www.cnblogs.com/ECJTUACM-873284962/') html=resp.read() print html
我之前的CSS代码
/*公用*/
body {
font-size:15px;
padding:0;
margin:0;
font-family:"微软雅黑","宋体",Arial;
background:#205424 url('https://i.loli.net/2017/08/15/59923c58cc40f.jpg') no-repeat top center fixed;
min-width:1200px;
}
#home {
opacity: 0.95;
filter: alpha(opacity=95);
box-shadow:0 0 10px #000;
margin:40px auto;
width:1200px;
background:#fff;
overflow:auto;
border:solid 1px #fff;
}
/*段落*/
.postBody p,.postCon p {
margin:7px 0;
line-height:24px;
}
h1 {
margin:0;
}
h3 {
font-size:15px;
font-weight:bold;
}
/*超链接*/
a {
color:#464646;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited,a:hover {
color:#464646;
}
ul {
list-style:none;
margin:0;
padding:0;
}
image {
border:none;
}
#header {
padding:20px;
}
/*博客标题*/
#blogTitle,#blogTitle a {
font-weight:bold;
color:#666;
}
#blogTitle .title {
margin-top:10px;
height:100px;
line-height:100px;
font-size:36px;
padding-left:120px;
background:#fff url('https://i.loli.net/2017/08/02/598187babf39e.gif') no-repeat;
}
.headermaintitle {
}#blogTitle,#blogTitle a:hover {
text-decoration:none;
}
/*子标题*/
.subtitle {
padding-left:30px;
font-size:14px;
color:#999;
font-weight:normal;
margin:10px 0;
}
/*导航栏*/
#navigator {
font-size:16px;
height:48px;
background:#FFAAD5;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
#navList li {
margin:0;
line-height:48px;
display:inline-block;
float:left;
}
#navList li:hover {
background:#6DA47D;
}
#navList li a {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#fff;
display:-moz-inline-box;
display:inline-block;
}
.blogStats {
height:48px;
color:#fff;
line-height:48px;
}
#main {
padding:20px;
}
/*左边*/
#sideBarMain {
padding:0 10px 0 0;
background:#fff;
margin:0 0 20px 0;
width:190px;
font-size:12px;
line-height:22px;
}
#sideBarMain a {
color:#666;
}
#leftcontentcontainer {
color:#666;
}
.newsItem {
color:#666;
}
/*公告*/
#profile_block {
margin-top:0px;
line-height:24px;
text-align:left;
}
/*主面板*/
#mainContent {
margin-top:0px;
padding-top:0px;
padding-right:0px;
background:#fff;
padding-bottom:0px;
float:right;
width:960px;
padding-left:0px;
}
/*每日文章列表*/
.day {
background:#fff;
padding:0;
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
color:#464646;
}
.postTitle {
padding-bottom:10px;
font-size:20px;
font-weight:bold;
color:#464646;
background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
padding-left:30px;
}
.dayTitle {
display:none;
}
/*摘要*/
.c_b_p_desc {
padding:10px;
line-height:24px;
color:#888;
}
.c_b_p_desc a {
color:#888;
}
.c_b_p_desc a:hover {
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:dotted;
}
/*右侧图片*/
.desc_img {
margin-left:10px;
border:solid 1px #fff;
box-shadow:0 0 10px #aaa;
}
/*博文页*/
#topics .post {
background:#fff;
}
.postCon {
padding:10px 20px 0 20px;
}
.postDesc {
margin:0 30px;
margin-bottom:2px;
padding:8px 0px;
font-size:12px;
color:#aaa;
background:#fff;
text-align:right;
}
.postDesc a {
color:#AAA;
}
.postBody {
padding:0;
}
/*google搜索框*/
#google_q,#q {
height:22px;
width:120px;
border:solid 1px #ccc;
box-shadow:inset 0 0 3px #ddd;
border-radius:4px;
}
/*搜索按钮*/
.btn_my_zzk {
font-family:'Microsoft Yahei';
border:none;
height:26px;
width:60px;
padding:1px;
font-size:14px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#FFAAD5;
border-radius:4px;
color:#fff;
}
.btn_my_zzk:hover {
background:#6DA47D;
}
/*评论按钮*/
#btn_comment_submit {
border:none;
height:48px;
width:120px;
}
/*评论按钮*/
.comment_btn {
font-family:'Microsoft Yahei';
border:none;
height:48px;
width:120px;
font-size:18px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#FFAAD5;
color:#fff;
}
#btn_comment_submit:hover {
background:#6DA47D;
}
/*评论标题*/
.feedback_area_title {
padding:10px;
font-size:24px;
font-weight:bold;
color:#55895B;
border-bottom:solid 6px #FFAAD5;
}
.feedbackListSubtitle {
font-size:12px;
color:#888;
}
.feedbackListSubtitle a {
color:#888;
}
.comment_quote {
background:#FCFAAC;
padding:15px;
border:1px solid #CCC;
}
#commentform_title {
color:#55895B;
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:10px 20px 10px 10px;
font-size:24px;
font-weight:bold;
border-bottom:solid 6px #55895B;
}
/*评论框*/
#comment_form {
margin:10px 0;
padding:0;
}
.commentform {
margin:10px 0;
padding:10px 20px;
background:#fff;
}
/*评论输入域*/
#tbCommentBody {
font-family:'MIcrosoft Yahei';
margin-top:10px;
width:940px;
max-width:940px;
min-width:940px;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
padding:10px;
height:120px;
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;
}
/*分类页*/
.entrylist {
padding:10px 20px;
background:#fff;
}
.entrylistItem {
margin:10px 0;
padding:10px;
}
.entrylistPosttitle {
font-size:18px;
font-weight:bold;
background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
padding-left:30px;
}
.entrylistPostSummary {
padding:10px;
}
.entrylistItemPostDesc {
font-size:12px;
color:#999;
padding-left:40px;
}
/*尾部*/
#footer {
font-size:12px;
margin:20px;
padding:12px;
text-align:center;
background:#FFAAD5;
color:#DDD;
font-size:14px;
}
/*文章内图片*/
#cnblogs_post_body p img {
margin:10px;
}
/*顶一下*/
.diggnum {
font-size:28px;
color:#FFFFFF;
font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
line-height:100px;
}
.diggit {
float:left;
width:340px;
height:256px;
background:url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif') no-repeat;
background-position:0 0;
text-align:center;
cursor:pointer;
}
.diggit:hover {
background-position:-128px 0;
}
/*踩一下（园友反映，这个有点“邪恶”，呵呵，其实是我没来得及设计这个背景图片，就暂时把它隐藏了……可以去掉这句话）*/
.buryit {
display:none;
}
.diggword {
display:none;
}
/*green_channel*/
#green_channel {
text:align:right;
background:#6DA47D;
padding-left:20px;
font-weight:normal;
font-size:15px;
width:920px;
border:none;
color:#fff;
padding:20px;
border-radius:4px;
}
/*最新评论*/
#myposts .PostList {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
color:#6DA47D;
}
#ZjmainstayCnblogsSWFTags{
overflow: visible;
position: absolute;
right: 10px;
top: 735px;
width: 160px;
z-index: 10000;
}
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
#MagicArray{
/* Firefox 4 */
-moz-transition-property:width height bottom right;
-moz-transition-duration:1s;
/* Safari and Chrome */
-webkit-transition-property:width height bottom right;
-webkit-transition-duration:1s;
/* Opera */
-o-transition-property:width height bottom right;
-o-transition-duration:1s;
position: fixed;
bottom:107px;
right: 108px;
width: 0px;
height: 0px;
text-align: center;
z-index:2;
}
我现在的CSS代码，大部分参考我的挚友swm_sxt(大神)
下面贴出现在的CSS源码：
#site_nav_under {
display: none;
}
.c_ad_block, .ad_text_commentbox {
display: none;
margin: 0;
padding: 0;
}
#ad_under_google {
height: 0;
overflow: hidden;
}
#ad_under_google a {
display: none;
}
@charset "utf-8";
/* CSS Document */
/**************************************************
第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是
你不能删除这些样式。
**************************************************/
#EntryTag {
margin-top: 20px;
font-size: 9pt;
color: gray;
}
.topicListFooter {
text-align: right;
margin-right: 10px;
margin-top: 10px;
}
#divRefreshComments{
text-align: right;
margin-right: 10px;
margin-bottom: 5px;
font-size: 9pt;
}
/*****第一部分结束*******************************/
/**************************************************
第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
模板所有页面的变化。因为它们是全局的。
**************************************************/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background:url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed;
background-size:cover;
color:#000;
font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
font-size: 15px;
min-height: 101%;
width:75em;
margin-left:auto;
margin-right:auto;
z-index:0;
}
#Uleft, #Uright,#Dleft, #Dright{
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:1s;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:1s;
/* Opera */
-o-transition-property:top;
-o-transition-duration:1s;
position: fixed;
width: 80px;
height: 80px;
line-height: 500px;
text-align: center;
z-index:1;
}
#Uleft{
width: 80px;
height: 80px;
top:-60px;
left: 50px;
}
#Uright{
width: 110px;
height: 110px;
top: -75px;
right: 50px;
}
#Dleft{
bottom:10px;
left: 10px;
width: 200px;
height: 200px;
}
#Dright{
bottom:-50px;
right: 0px;
width: 200px;
height: 250px;
}
#MagicArray{
/* Firefox 4 */
-moz-transition-property:width height bottom right;
-moz-transition-duration:1s;
/* Safari and Chrome */
-webkit-transition-property:width height bottom right;
-webkit-transition-duration:1s;
/* Opera */
-o-transition-property:width height bottom right;
-o-transition-duration:1s;
position: fixed;
bottom:107px;
right: 108px;
width: 0px;
height: 0px;
text-align: center;
z-index:2;
}
#Tab1{
-moz-transition-property:fontSize width height;
-moz-transition-delay:0.8s;
-webkit-transition-property:fontSize width height;
-webkit-transition-delay:0.8s;
-o-transition-property:fontSize width height;
-o-transition-delay:0.8s;
color:#8B0A50;
position: fixed;
font-size: 0px;
text-align: center;
z-index:3;
font-weight:500;
text-shadow:
-1px 0 #7A67EE,
1px #7A67EE,
1px 0 #7A67EE,
-1px #7A67EE;
}
::selection{background:#698B22;color:#FFF;}
::-moz-selection{background#698B22;color:#FFF;}
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
input{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
wait{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
input{outline:medium;}
/*
http://fq.wc.lt//up/1499566113.cur
http://fq.wc.lt//up/1499565578.cur
http://fq.wc.lt//up/1499564884.cur
*/
/*鼠标*/
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul {
word-break: break-all;
}
li {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
a:link {
color:black;
text-decoration:none;
}
a:visited {
color:#111;
text-decoration: none;
}
a:hover {
color: #7B68EE;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
transition: all 0.4s linear 0s;
}
a:active {
color: black;
text-decoration: none;
}
.clear {
clear: both;
}
/*****第二部分结束*******************************/
/**************************************************
第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
**************************************************/
/*****home和头部开始**************************/
#home {
margin: 0 auto;
width:95%;
min-width: 60em;
}
#header {
padding-bottom: 0.4em;
margin-top: 0.8em;
}
#blogTitle {
height: 7em;
clear: both;
border:1px solid #000;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 12px;
-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
text-shadow:1px 1px 1px #e9f3e8
}
#blogTitle h1 {
font-size: 300%;
font-weight: bold;
margin-left: 1em;
margin-top: 0.4em;
width: 50%;
float: left;
}
#blogTitle h2 {
margin-left: 6em;
line-height: 1.5em;
width: 50%;
float: left;
text-shadow:-1px 0 #ddd,
1px #ddd,
1px 0 #ddd,
-1px #ddd;
}
#blogLogo {
float: right;
}
#navigator {
/* background-color: black;
height: 30px;
clear: both;*/
margin-top:0.3em;
height: 2em;
clear:both;
border:1px solid #999;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
background:#FFF;
opacity: 0.60;
}
#navList {
min-height: 1.5em;
float: left;
}
#navList li {
float: left;
}
#navList a {
display: block;
padding-left:0.5em;
padding-right:0.5em;
line-height:2em;
float: left;
text-align: center;
border-right: 1px solid #999;
}
#navList a:link, #navList a:visited, #navList a:active {
/* color: #ccc;*/
}
#navList a:hover {
color: #7B68EE;
padding-left:0.8em;
padding-right:0.8em;
}
.blogStats {
float: right;
font-size:0.8em;
color: #000;
margin-top: 0.9em;
margin-right: 0.2em;
text-align: right;
}
/*****home和头部结束**************************/
/*****主页文章列表开始**************************/
#main{
width: 100%;
min-width: 70em;
text-align: left;
background:#FFF5EE;
opacity: 0.90;
}
#mainContent .forFlow{
margin-left: 12em;
float: none;
width: auto;
}
#mainContent {
min-height: 18em;
padding: 0px 0px 10px 0;
*padding-top:10px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: right;
margin-left: -26em;
width: 100%
}
.day {
min-height: 10px;
_height: 10px;
margin-bottom: 20px;
padding-bottom: 5px;
}
.dayTitle {
width: 100%;
color: #666;
font-weight: bold;
line-height: 1.5em;
font-size: 90%;
margin-top: 3px;
margin-bottom: 10px;
clear:both;
border-bottom: 2px solid #e9f3e8;
text-align:center;
}
.postTitle {
font-size: 150%;
font-weight: bold;
/*border-bottom: 1px solid #9DAAF4;*/
float: right;
line-height: 1.5em;
width: 100%;
clear:both;
text-shadow:-3px 3px 3px #999
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #000;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 10px;
color: #7B68EE;
text-decoration: none;
text-shadow:-13px 3px 3px #999
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear:both;
padding: 10px 0;
}
.postDesc {
float: right;
width: 100%;
clear:both;
text-align: right;
padding-right: 5px;
color: #666;
margin-top: 5px;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
color: #666;
padding-right: 10px;
}
.postDesc a:hover {
color: #7B68EE;
text-decoration: none;
}
.postSeparator {
clear: both;
height: 1px;
border-top: 1px dotted #666;
width: 100%;
clear:both;
float: right;
margin: 0 auto 15px auto;
}
.diggit{
text-align: center;
width:50px;
height:40px;
background:url(http://fq.wc.lt//up/1503755899.png);
background-size:100% 100%;
}
.buryit{
font-size:0px;
width:0;
height:0;
}
.burynum{
font-size:0px;
width:0;
height:0;
}
/*****主页文章列表结束**************************/
/*****侧边栏开始********************************/
#sideBar {
width: 14em;
min-height: 14em;
padding: 0px 0px 0px 5px;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
font-size:0.7em;
opacity:0.85;
}
.counter{
}
.notice{
font-size:xx-small;
}
.btn_my_zzk{
display: inline-block;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #a55b97;
border: none;
border-radius: 15px;
box-shadow: 0 4px #999;
}
.newsItem .catListTitle {
display: none;
}
.newsItem {
padding: 15px 0 5px 0px;
font-weight:bold;
font-size:14px;
margin-bottom: 8px;
}
/**日历控件样式开始**/
#calendar {
width: 14em;
}
#calendar .Cal {
width: 100%;
line-height: 1.5em;
}
.Cal {/**日历容器table**/
border: none;
color: #111;
}
#calendar table a:link, #calendar table a:visited, #calendar table a:active {
font-weight: bold;
}
#calendar table a:hover {
color: #7B68EE;
text-decoration: none;
background-color: #7B68EE;
}
.CalTodayDay{/**今天日期样式**/
color: #EE82EE;
}
#calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
font-weight: bold;
background-color: #7B68EE;
}
.CalDayHeader{
border-bottom:1px solid #ccc;
}
.CalTitle{/**日历年月头部样式**/
width:100%;
background:#FFF;
color:black;
border-bottom:1px solid #666;
}
/**日历控件样式结束**/
.catListTitle {
font-weight: bolder;
font-family:STCaiyun;
color: #B03060;
line-height: 2em;
font-size: 150%;
margin-top: 50px;
margin-bottom: 10px;
border-bottom: 1px solid #e9f3e8;
text-align: center;
}
.catListComment {
line-height: 1.5em;
}
.divRecentComment {
color: #666;
margin-bottom:1em;
}
.c_b_p_link_desc{
color: #666;
font-size: 30%;
margin-bottom:1.5em;
}
#sideBarMain ul {
line-height: 1.5em;
}
.catListEssay{
font-weight: bolder;
}
.catListTag{
font-size: 90%;
font-weight: bolder;
}
.catList{
font-weight: bolder;
}
.catListFeedback{
font-weight: bolder;
}
.catListView{
font-weight: bolder;
}
.recent_comment_title{
font-weight: bolder;
}
.recent_comment_body{
font-size: 30%;
}
.recent_comment_author{
color:#666;
font-size: 30%;
}
/*****侧边栏结束********************************/
/****查看文章页面开始*************************/
#topics {
width: 100%;
min-height: 18em;
padding: 0px 0px 10px 0;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
#topics .postTitle {
font-size: 200%;
font-weight: bold;
border-bottom: 1px solid #999;
float: left;
line-height: 1.5em;
width: 100%;
text-align: center;
}
.postBody {
padding: 5px 2px 5px 5px;
line-height: 1.5em;
color: #000;
border-bottom: 1px solid #8686FF;
}
#EntryTag {
color: #000;
}
#EntryTag a {
margin-left: 5px;
}
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
color: #000;
}
#EntryTag a:hover {
color: #7B68EE;
}
#topics .postDesc {
float: right;
width: 100%;
font-size:0.9em;
text-align: right;
padding-right: 5px;
color: #000;
margin-top: 5px;
}
.feedback_area_title {
font-weight: bold;
margin-top: 20px;
border-bottom: 1px solid #8686FF;
margin-bottom: 10px;
padding-left: 8px;
}
.louzhu {
background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top;
padding-right:16px;
}
.layer{
font-family:STFangsong;
font-size:15px;
padding-left: 8px;
}
.feedbackListSubtitle {
margin-left: 10px;
color: #666;
font-size:0.9em;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
font-weight:bold;
color: #666;
font-weight: normal;
}
.feedbackListSubtitle a:hover {
color: #7B68EE;
text-decoration: none;
}
.feedbackManage {
width: 160px;
text-align: right;
float: right;
}
.feedbackCon {
font-weight:bold;
border-bottom: 1px solid #ccc;
padding: 15px 18px 20px 50px;
min-height: 35px;
_height: 35px;
margin-bottom: 1em;
line-height: 1.5em;
width:80%;
}
#divRefreshComments {
text-align: right;
margin-bottom: 10px;
}
.commenttb {
width: 320px;
}
.cnblogs_code{
}
.comment_actions{
margin-right:30px;
font-size:16px;
font-family:STFangsong;
}
.comment_digg{
font-weight:bold;
margin-right:10px;
font-size:15px;
font-family:STXinwei;
}
.comment_bury{
font-weight:bold;
margin-right:10px;
font-size:15px;
font-family:STXinwei;
}
/****查看文章页面结束************************
/****列表页面开始******************************/
.entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
font-size: 110%;
font-weight: bold;
border-bottom: 1px solid #8686FF;
text-align: right;
padding-bottom: 3px;
padding-right: 10px;
}
.entrylistDescription {
color: #666;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
margin-bottom: 10px;
}
.entrylistItem {
min-height: 20px;
_height: 20px;
margin-bottom: 30px;
padding-bottom: 5px;
width: 100%;
}
.entrylistPosttitle {
font-size: 110%;
font-weight: bold;
border-bottom: 1px solid #666;
line-height: 1.5em;
width: 100%;
padding-left: 5px;
}
.entrylistPosttitle a:hover {
text-decoration: none;
}
.entrylistPostSummary {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
.entrylistItemPostDesc {
padding-left: 50px;
text-align: right;
color: #666;
}
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
color: #666;
}
.entrylistItemPostDesc a:hover {
color: #7B68EE;
}
.entrylist .postSeparator {
clear: both;
width: 100%;
font-size: 0;
line-height: 0;
margin: 0;
padding: 0;
height: 0;
border: none;
}
.pager {
text-align: right;
margin-right: 10px;
}
.PostList {
border-bottom: 1px solid #ccc;
clear: both;
min-height: 1.5em;
_height: 1.5em;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 5px;
}
.postTitl2 {
float: left;
font-size:0.9em;
color: #666;
}
.postDesc2 {
color: #666;
float: right;
margin-right: ;
font-size:0.9em;
}
.postText2 {
clear: both;
}
.pfl_feedback_area_title {
text-align: right;
line-height: 1.5em;
font-weight: bold;
border-bottom: 1px solid #666;
margin-bottom: 10px;
}
.pfl_feedbackItem {
border-bottom: 1px solid black;
margin-bottom: 20px;
}
.pfl_feedbacksubtitle {
width: 100%;
border-bottom: 1px dotted #666;
height: 1.5em;
}
.pfl_feedbackname {
float: left;
}
.pfl_feedbackManage {
float: right;
}
.pfl_feedbackCon {
color: black;
padding-top: 5px;
padding-bottom: 5px;
}
.pfl_feedbackAnswer {
color: #F40;
text-indent: 2em;
}
.tdSentMessage {
text-align: right;
}
.errorMessage {
width: 300px;
float: left;
}
/****列表页面结束******************************/*/
/****相册页面开始******************************/
.divPhoto {
border: 1px solid #ccc;
padding: 2px;
margin-right: 10px;
}
.thumbDescription {
color: #666;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
margin-bottom: 10px;
}
/****相册页面结束******************************/
/*****留言页面开始*****************************/
#footer {
text-align: center;
min-height: 15px;
_height: 15px;
border-top: 1px solid black;
margin-top: 10px;
padding-top: 10px;
margin-bottom: 10px;
}
/*留言查看页面的个人信息*/
.personInfo {
margin-bottom: 20px;
}
/*留言分页区域*/
.pages {
text-align: right;
}
/*****留言页面结束*****************************/
/*****第三部分结束*******************************/
/**************************************************
第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
并不能保证所有的文章都适合。
**************************************************/
/*文章内部常用标签格式*/
.postBody {
line-height: 1.5em;
}
.postBody p,.postCon p{
text-indent: 2em;
margin: 0 auto 1em auto;
}
.postBody h2{
font-size: 150%;
margin: 15px auto 2px auto;
font-weight:bold;
}
.postBody h3 {
font-size: 120%;
margin: 15px auto 2px auto;
font-weight:bold;
}
.postBody h4{
font-size:110%;
margin:15px auto 2px auto;
font-weight:bold;
color:#333;
}
.postBody h5{
font-size:100%;
margin:15px auto 2px auto;
font-weight:bold;
color:#333;
}
.postBody a:link,.postBody a:visited,.postBody a:active{
text-decoration:none;
}
.postCon a:link,.postCon a:visited,.postCon a:active{
text-decoration:none;
}
.postBody ul,.postCon ul{
margin-left:2em;
}
.postBody li,.postCon li{
list-style-type:disc;
margin-bottom:1em;
}
.postBody blockquote{
background:url('/images/comment.gif') no-repeat 25px 0px;
padding:10px 60px 5px 60px;
min-height:35px;
_height:35px;
line-height:1.6em;
color:#333;
}
/*****第四部分结束*******************************/
当初我也是拿别人代码当模板来改的，不过现在可能有点面目全非了。
那么现在，我们可以把这份别人的模板改成自己的风格，基本上CSS代码里参数的命名都是按元素的英文命名的，挺好认的，或者你可以把这个参数改改，看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时，你可以寻找一下这个元素在html代码里面的位置（在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素），看一下这个元素的id和class的名字是啥，在CSS代码里找找就行了。
界面的颜色除了有black、white这类设定好的颜色之外，你可以找一个RGB颜色对照表，想要啥就丢啥。
遇到有啥不会调的参数，基本搜一下“CSS+参数名字”就有详细介绍，毕竟这东西网上教程很多。
比方说延迟变换可以用transition-property来做，而文字阴影效果是text-shadow，这些都是我自己在做的时候折腾了好一会的。
Chrome（我不知道其他浏览器能不能）有个好处是你修改了个参数，他会立刻应用变换，这样就可以调到舒心再贴进自定义CSS代码里。
还有就是你最好把CSS代码备份一下，不然要是误删了就GG，博主亲身体验T_T。
这期间你可能需要一些好看的图片什么的，我自己资源是P站找的（Pixiv），一些比较普通的就百度图片吧，然后开个画图，开个Photoshop自己改改就能用了，图床直接用博客园就行了（开个不发布的随笔就能存图了，图片上右键可以获得图片链接地址）。
这时候自己的blog已经比较好看了是不是啊？
②修改鼠标图案
把这个放在第二是我按自己的操作顺序来的。
没啥特别要说的，就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站，这里推荐小白的文件床（http://fq.wc.lt/）或者是sm.ms(https://sm.ms/)，不知道是哪位大神弄的，太良心了
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
③公告栏的设置
折腾了一段时间以后应该对html也有了一定的了解，首先在博客园管理的设置页中把JS代码权限申请了，批准挺快的，然后就可以为所欲为了（雾）……
首先你可以在侧边栏加点计数器，加点flash动画什么的，这些一般是找别人做好的，链过来或者抄过来就行。
要搞js的话建议在网上找个教程看看，看它个把小时就基本能拿来用用了（其实跟c++挺像的，应该说java跟c++比较像吧），以后遇到不会的回去查查就行。
我拿js做的大概就是加了一些小挂件，比方说左上角的西瓜是获取main元素之后把opacity（透明度）调到0就行，结合一下onmouseover、onmouseout什么的就能做出浮动效果，还是很赞的。
尝试着做个推荐按钮，一直做不成，估计是被过滤了。发邮件去问博客园那边也是这是禁止的。
目录我大多数还是参考swm_sxt，做的太良心了，perfect！
我的公告栏代码
<!DOCTYPE html> <html> <body> <div class="head_img"><img width="160" height="160" alt="我的头像" src="https://i.loli.net/2017/08/02/598187babf39e.gif" class="img_avatar"><div> <p>做题做得心累的时候</p> <p>就看看背景吧</p> <p>想看背景的时候</p> <p>请点击左上角西瓜一枚</p> <p>右上角月亮有彩蛋</p> <p>蒟蒻一枚，有事您Q我～</p> <p>ECJTU的一个挣扎的ACMer</p> <p>我的QQ在这哦！873284962～</p> <p>我的微信在这哦！nzf6698【加好友请注明姓名和来源哦，谢谢各位支持^-^】～</p> <p>喵~允许我卖一个萌~~~~</p> <p>热爱交友！orz</p> <p>希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦</p> <p>非常乐意互换友链呐，~o( =∩ω∩= )喵~~~~</p> <p>有事您Q我，我一直在哦~：</p><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=873284962&site=qq&menu=yes"> <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:873284962:41 &r=0.30709030851721764" alt="欢迎与我联系" title="欢迎与我联系"> </a> <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script> <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="150" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object> <p>求投食~（点图即可）</p> <p>玩法:拖动小球至任意位置投放，让小球自由落地，每轮五个球，右上角有一个重新开始的按钮，祝欧尼酱能看的舒服，玩的开心，喵~~</p> <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/discdrop/discDrop.swf?" width="150" height="225"><param name="movie" value="http://cdn.abowman.com/widgets/discdrop/discDrop.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object> <p>看看你能得几分，欧尼酱，喵~~</p> <p>我的访客量统计：Start From 2017.5.29 19:00</p> <div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3214944&c=9645145" alt="AmazingCounters.com"></a></div> <a href="http://info.flagcounter.com/G05j"><img src="http://s07.flagcounter.com/count/G05j/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_250/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a> <!-- Your XlchPlayerKey --> <script>XlchKey="d9zz3e6DHX";</script> <!-- font-awesome 4.2.0 --> <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- JQuery 2.2.4 --> <script src="http://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script> <!-- JQuery-mousewheel 3.1.9 --> <script src="http://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script> <!-- Scrollbar --> <script src="http://static.badapple.top/BadApplePlayer/js/scrollbar.js"></script> <!-- BadApplePlayer --> <script src="http://static.badapple.top/BadApplePlayer/Player.js"></script> </body> </html>
关于背景音乐
之前我有用过的是虾米音乐，其实外观确实很丑，今天看了大佬yji的博客，发现他的音乐播放器挺好看的，问了下才知道有个绚丽彩虹播放器，良心播放器，竟然是一个小姑娘，上初二时写的，我自愧不如，人家初二，我大二都搞不出这个玩意出来QAQ
下面是我的背景音乐的源码(加到/body之前就可以用了)
<!-- Your XlchPlayerKey --> <script>XlchKey="d9zz3e6DHX";</script> <!-- font-awesome 4.2.0 --> <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- JQuery 2.2.4 --> <script src="http://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script> <!-- JQuery-mousewheel 3.1.9 --> <script src="http://lib.baomitu.com/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script> <!-- Scrollbar --> <script src="http://static.badapple.top/BadApplePlayer/js/scrollbar.js"></script> <!-- BadApplePlayer --> <script src="http://static.badapple.top/BadApplePlayer/Player.js"></script>
我现在的页首：
<!DOCTYPE html>
<html>
<body>
<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>
<input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">
<input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">
<input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">
<input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right:150px;bottom:130px;">首页</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right:10px;bottom:130px;">私信博主</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
<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>
我之前的页首：
<script type="text/javascript" src="https://files.cnblogs.com/ECJTUACM-873284962/swfobject.js"></script> <script type="text/javascript" src="http://demo.zjmainstay.cn/cnblogs/getTags.php?url=http%3A%2F%2Fwww.cnblogs.com%2FECJTUACM-873284962%2Ftag%2F"></script> <script type="text/javascript" src="https://files.cnblogs.com/ECJTUACM-873284962/ECJTUACM-873284962_cnblogs_tags.js"></script> <link rel="stylesheet" href="https://files.cnblogs.com/files/candy99/bootstrap.min.css"> <script src="https://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script> <script src="https://files.cnblogs.com/files/candy99/bootstrap.min.js"></script> <script src="https://files.cnblogs.com/files/candy99/bootbox.min.js"></script> <link rel="stylesheet" href="https://files.cnblogs.com/files/candy99/slider.min.css"> <div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;"> <div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_1" class="slider_cube" style="left: 0px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_2" class="slider_cube" style="left: 0px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: -17.1315px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: 102.202px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_0" class="slider_cube" style="left: 128.1px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_1" class="slider_cube" style="left: 128.1px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_2" class="slider_cube" style="left: 128.1px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: -28.6099px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: 90.7234px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_0" class="slider_cube" style="left: 256.2px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_1" class="slider_cube" style="left: 256.2px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_2" class="slider_cube" style="left: 256.2px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: -28.2206px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: 91.1127px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_0" class="slider_cube" style="left: 384.3px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_1" class="slider_cube" style="left: 384.3px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_2" class="slider_cube" style="left: 384.3px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: -16.2405px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: 103.093px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_0" class="slider_cube" style="left: 512.4px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_1" class="slider_cube" style="left: 512.4px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_2" class="slider_cube" style="left: 512.4px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: -14.4504px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: 104.883px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_0" class="slider_cube" style="left: 640.5px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_1" class="slider_cube" style="left: 640.5px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_2" class="slider_cube" style="left: 640.5px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: -57.4707px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: 61.8625px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_0" class="slider_cube" style="left: 768.6px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_1" class="slider_cube" style="left: 768.6px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: -1.19332px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: 118.14px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_2" class="slider_cube" style="left: 768.6px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: -89.6487px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: 29.6844px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_0" class="slider_cube" style="left: 896.7px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_1" class="slider_cube" style="left: 896.7px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: -0.584714px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: 118.749px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_2" class="slider_cube" style="left: 896.7px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: -110.144px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: 9.18943px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_0" class="slider_cube" style="left: 1024.8px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_1" class="slider_cube" style="left: 1024.8px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: -7.43146px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: 111.902px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_2" class="slider_cube" style="left: 1024.8px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: -119.004px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: 0.328916px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_0" class="slider_cube" style="left: 1152.9px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_1" class="slider_cube" style="left: 1152.9px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: -2.56493px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: 117.138px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_2" class="slider_cube" style="left: 1152.9px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: -119.333px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div></div></div> </div> <script src="https://files.cnblogs.com/files/lianmin/slider1.2.min.js"></script> <script type="text/javascript"> $("#imgBar").slider({ imgs: [ "https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg", "https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg", "https://images0.cnblogs.com/blog/708426/201501/100602118284450.jpg"], scale: 128 / 36, border: true, delay: 2200, x: 10, y: 3 }); function makeOpen(url){ return eval('wind' + 'ow.o' + 'pen("'+url+'")'); } </script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <a href="https://github.com/Jackson0714" target="_blank"> <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" > </a> <style type="text/css"> .Abstract { padding: 15px; border: dotted 2px #999; color: #999; font-family: 'Microsoft Yahei'; border-radius: 4px; } .First { margin: 10px 0; font-family: 'Microsoft Yahei'; text-align: left; padding: 6px 20px; color: #fff; background: #55895B; font-size: 20px; border-radius: 4px; clear: both; } .Second { margin: 10px 0; font-family: 'Microsoft Yahei'; padding: 6px 20px; background: #93C8A2; color: #fff; font-size: 18px; border-radius: 4px; clear: both; } .Third { margin: 10px 0; padding: 6px 20px; font-family: 'Microsoft Yahei'; margin: 15px 0; font-size: 16px; color: fff; background: #C6EFD2; color: #999; border-radius: 4px; clear: both; } .note { margin: 10px 0; padding: 15px 20px 15px 60px; background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0; font-size: 15px; font-family: 'Microsoft Yahei'; box-shadow: 0 0 8px #aaa; clear: both; } .demo { text-align: left; padding: 6px 20px; overflow: auto; border-radius: 4px; background: orange; color: #fff; font-size: 16px; clear: both; } .cnblogs_Highlighter { border: solid 1px #ccc; clear: both; } .cnblogs_code { background: #EFFFF4; border: solid 0px #939393; font-size: 14px; clear: both; padding: 10px 20px; } .cnblogs_code pre { font-size: 14px; } .cnblogs_code span { font-family: Courier New; font-size: 14px; } </style>
我现在的页脚：
<div class="fixedIndexs" style="position: fixed;opacity:0.5;bottom:300px;display: none"></div> <script language="javascript" type="text/javascript"> var fixedIndexs=$('.fixedIndexs'); var hs = $('#cnblogs_post_body h2'); function openorclose(a) { $("#indexs").slideToggle("fast"); var text=$(a).text(); if(text=='[-]'){ $(a).text("[+]"); return; } $(a).text("[-]"); } function createIndexs(){ var indexs_container=$('<div style="border:solid 1px #ccc; background:#CD6889;width:200px;padding:4px 10px;"></div>'); var indexs_controller=$('<p style="text-align:right;margin:10;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>'); var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>'); indexs_container.append(indexs_controller).append(indexs); $.each(hs,function(i,h){ $(h).before('<a name="index_'+i+'"></a>'); indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>'); }); if(hs.length!=0){ fixedIndexs.append(indexs_container); //get home div right offset fixedIndexs.css('right',30+'px'); } } createIndexs(); fixedIndexs.hide(); </script>
之前也有写过页脚，不过不是很好看，不过就是加了些链接，然后多介绍了下自己
我也把它贴出来吧~~~
<div id="ECJTUACM-873284962CnblogsSWFTags"></div> <div class="cnblogs_Highlighter"> <div style="text-align:left; margin:0 17px; ling-height:24px;"> <p style="color:#2a6496; padding:15px;"><i class="fa fa-pencil fa-5x fa-spin"></i></p> <p><a target="_blank" href="http://www.cnblogs.com/ECJTUACM-873284962/">ACM竞赛&数学建模竞赛</a> - 创建于 2017年2月2日</p> <p><i class="fa fa-hand-o-right"></i> 这是一位ACM爱好者&数学爱好者的个人站，内容主要是算法&数据结构&数学研究的技术文章，大部分来自学习，部分来源于网络,希望对大家有所帮助。</p> <p>致力于ACM算法研究工作，喜爱交友，关注互联网前沿技术与趋势。</p> <br /><p> <a target="_blank" href="http://fontawesome.io/">Font Awesome</a> | <a target="_blank" href="https://github.com/aFarkas/html5shiv">Respond.js</a> | <a target="_blank" href="http://www.bootcss.com/">Bootstrap中文网</a> </p> </div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"1","bdPos":"right","bdTop":"120"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div>
④关于CSS动画特效
很多人对我的图片动画特效感兴趣，我今天把页面风格调整了下，所以那个动画特效我就没有加上去了，似乎有些不兼容的特点~~~我还在努力的调整QAQ
大概只要把我的这段CSS代码中三个图片换成你想要的风格就好了，感谢Candy?大神~~~
<link rel="stylesheet" href="https://files.cnblogs.com/files/candy99/bootstrap.min.css"> <script src="https://files.cnblogs.com/files/candy99/jquery1.11.1.js"></script> <script src="https://files.cnblogs.com/files/candy99/bootstrap.min.js"></script> <script src="https://files.cnblogs.com/files/candy99/bootbox.min.js"></script> <link rel="stylesheet" href="https://files.cnblogs.com/files/candy99/slider.min.css"> <div style="margin-bottom: 20px;overflow: hidden;box-shadow: 0 2px 16px #ddd;background-color:#fff;height:360px;"> <div id="imgBar" style="margin:0 auto;width:1280px;"><div class="slider-box" style="height: 360px;"><div id="imgBar_0_0" class="slider_cube" style="left: 0px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_1" class="slider_cube" style="left: 0px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_0_2" class="slider_cube" style="left: 0px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: -17.1315px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: 0px -238.667px; background-size: 1280px 360px; top: 102.202px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_0" class="slider_cube" style="left: 128.1px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_1" class="slider_cube" style="left: 128.1px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_1_2" class="slider_cube" style="left: 128.1px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: -28.6099px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -127.1px -238.667px; background-size: 1280px 360px; top: 90.7234px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_0" class="slider_cube" style="left: 256.2px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_1" class="slider_cube" style="left: 256.2px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_2_2" class="slider_cube" style="left: 256.2px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: -28.2206px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -254.2px -238.667px; background-size: 1280px 360px; top: 91.1127px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_0" class="slider_cube" style="left: 384.3px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_1" class="slider_cube" style="left: 384.3px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_3_2" class="slider_cube" style="left: 384.3px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: -16.2405px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -381.3px -238.667px; background-size: 1280px 360px; top: 103.093px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_0" class="slider_cube" style="left: 512.4px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_1" class="slider_cube" style="left: 512.4px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_4_2" class="slider_cube" style="left: 512.4px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: -14.4504px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -508.4px -238.667px; background-size: 1280px 360px; top: 104.883px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_0" class="slider_cube" style="left: 640.5px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_1" class="slider_cube" style="left: 640.5px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -119.333px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_5_2" class="slider_cube" style="left: 640.5px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: -57.4707px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -635.5px -238.667px; background-size: 1280px 360px; top: 61.8625px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_0" class="slider_cube" style="left: 768.6px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_1" class="slider_cube" style="left: 768.6px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: -1.19332px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -119.333px; background-size: 1280px 360px; top: 118.14px; left: 0px; opacity: 1;"></div></div><div id="imgBar_6_2" class="slider_cube" style="left: 768.6px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: -89.6487px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -762.6px -238.667px; background-size: 1280px 360px; top: 29.6844px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_0" class="slider_cube" style="left: 896.7px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_1" class="slider_cube" style="left: 896.7px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: -0.584714px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -119.333px; background-size: 1280px 360px; top: 118.749px; left: 0px; opacity: 1;"></div></div><div id="imgBar_7_2" class="slider_cube" style="left: 896.7px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: -110.144px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -889.7px -238.667px; background-size: 1280px 360px; top: 9.18943px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_0" class="slider_cube" style="left: 1024.8px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_1" class="slider_cube" style="left: 1024.8px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: -7.43146px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -119.333px; background-size: 1280px 360px; top: 111.902px; left: 0px; opacity: 1;"></div></div><div id="imgBar_8_2" class="slider_cube" style="left: 1024.8px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: -119.004px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1016.8px -238.667px; background-size: 1280px 360px; top: 0.328916px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_0" class="slider_cube" style="left: 1152.9px; top: 0px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px 0px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_1" class="slider_cube" style="left: 1152.9px; top: 120.333px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: -2.56493px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -119.333px; background-size: 1280px 360px; top: 117.138px; left: 0px; opacity: 1;"></div></div><div id="imgBar_9_2" class="slider_cube" style="left: 1152.9px; top: 240.667px; width: 127.1px; height: 119.333px;"><div class="slider_inner_a" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: -119.333px; left: 0px; opacity: 1;"></div><div class="slider_inner_b" style="background-image: url("https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg"); background-position: -1143.9px -238.667px; background-size: 1280px 360px; top: 0px; left: 0px; opacity: 1;"></div></div></div></div> </div> <script src="https://files.cnblogs.com/files/lianmin/slider1.2.min.js"></script> <script type="text/javascript"> $("#imgBar").slider({ imgs: [ "https://images0.cnblogs.com/blog/708426/201501/080209549216360.jpg", "https://images0.cnblogs.com/blog/708426/201501/100557406251638.jpg", "https://images0.cnblogs.com/blog/708426/201501/100602118284450.jpg"], scale: 128 / 36, border: true, delay: 2200, x: 10, y: 3 }); function makeOpen(url){ return eval('wind' + 'ow.o' + 'pen("'+url+'")'); } </script>
⑤用Canvas和requestAnimFrame做动画特效
指的是背景里面跑来跑去的星星什么的……
这东西也不难学的，就是requestAnimFrame会自动帮你定时调用一段函数，然后你在函数里面用canvas写写绘图就行了，写得再丑最后效果好像都是挺平滑的，好像是浏览器会自动优化。
我大概就是让每一帧画面都有一定概率生成一个星星（图什么的自己拿PS画画就行了），然后给一个下落速度和角度什么的。本来用了一些弹性碰撞公式来做碰撞的，但最后效果并不好，索性忽略质量差别的问题，碰撞了就交换速度和角度。
学习使用requestAnimFrame的时候感觉最大的难点就是网上的代码大多加了很多效果，而导致代码很长，研读起来找不到自己真正想要的部分，其实只需要像下面这么写。(参考至swm_sxt)
<script> window.requestAnimFrame= window.requestAnimationFrame|| window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame|| window.oRequestAnimationFrame|| window.msRequestAnimationFrame|| function(callback){window.setTimeout(callback, 1000/60);}; function work(timestamp){ timer=requestAnimationFrame(work); } timer=requestAnimationFrame(work); </script>
下面是加了新特效后，我的页首HTML代码：
<!DOCTYPE html> <html> <body> <style> #Canvas{ position:fixed; top:0px; left:0px; } </style> <canvas id="Canvas"></canvas> <style> #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% } </style> <input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()"> <input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;"> <input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()"> <input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()"> <a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a> <a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right:150px;bottom:130px;">首页</a> <a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right:10px;bottom:130px;">私信博主</a> <a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a> <a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a> <a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a> <a name="Tab" id="Tab1" style="right:85px;bottom:88px;" onclick="control()">动画</a> <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>
出处：http://www.cnblogs.com/ECJTUACM-873284962
浙公网安备 33010602011771号