The default template: darkgreentrip
CSS:
#main {
}
#header{
height: 20%;
background-color: #2f2f2fc2;
}
#Header1_HeaderTitle {
size: 535px;
color: #F60;
}
#a:hover {
color: #F60;
text-decoration: underline;
}
#navigator,#blogTitle {
/*color: #393D49;*/
background-color: rgba(57, 61, 73, 0);
}
.catListTitle {
background: #2f2f2f;
border-bottom: #222222;
}
/* 支持反对 */
#div_digg {
position: absolute;
right: 30px;
bottom: 50px;
background: #2f2f2f;
padding: 20px 20px 15px;
border-radius: 12px;
border: 1px solid #eaeaea !important;
box-shadow:none !important;
}
/* **********************
* 文章列表
* **********************/
.entrylistTitle{
font-weight: bold;
font-size: 18px;
/* font-size: 100%; */
margin-top: 0;
margin-bottom: 10px;
text-align: left;
background-color: #fff;
padding: 0 0 0 15px;
border: 1px solid #eaeaea;
color: #FF5E52;
}
.entrylistPosttitle {
padding-left: 15px;
margin-bottom: 10px;
border-left: 8px solid #009688;
font-size: 20px;
width: 100%;
}
.entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
color: #393D49;
transition: all 0.4s linear 0s;
font-weight: bold;
}
/* 文章列表 */
#topics .postTitle {
font-size: 28px;
margin: 35px 0 30px;
padding-left: 0;
}
#mainContent .day {
padding: 15px 20px;
background: #fff;
border-radius:15px;
}
#mainContent .day .postTitle a {
display: flow-root;
}
/* **********************
* 文章详情
* **********************/
pre {
margin-bottom: 1.35em;
}
pre code {
padding: 10px 16px !important;
}
.post {
background: #fff;
border-radius:15px;
padding: 0 60px 60px;
border-bottom: 1px solid #eee;
}
/* 文章标题 */
#topics .postTitle {
font-size: 28px;
margin: 35px 0 30px;
padding-left: 0;
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.postTitle {
border-left: 8px solid #FF5E52;
margin-bottom: 5px;
font-weight: bold;
line-height: 1;
box-sizing: border-box;
}
.postTitle a:hover {
margin-left: 0;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #393D49;
transition: all 0.4s linear 0s;
}
/* 去除首行缩进 */
.postBody p,
.postCon p {
text-indent: 0;
}
/* 重写引用块样式 */
.postBody blockquote {
min-height: auto;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0 0 0 1em;
}
/* 增加底部留白 */
#cnblogs_post_body {
padding-bottom: 5px;
}
/* 防止图片溢出 */
#cnblogs_post_body img {
max-width: 100%;
}
/* 文章底部信息 */
.postDesc {
margin-top: 0;
}
/* **********************
* 评论
* **********************/
#comment_form_container .comment_textarea {
width: 100%;
}
#commentform_title {
font: normal normal 16px/35px "Microsoft YaHei";
margin: 10px 0 30px;
background-image: none;
padding: 0;
border-bottom: 1px solid #eaeaea;
border-left: 8px solid #393D49;
padding-left: 15px;
}
.comment_vote {
padding-right: 2px;
font-size: 14px;
margin-top: 10px;
}
.comment_vote a.comment_digg {
color: #2f2f2f;;
}
.feedbackItem {
margin: 20px 0 25px;
background: #fff;
padding: 10px 15px;
}
.feedbackCon {
font-size: 13px;
border-bottom: 0;
padding: 10px 5px 0 5px;
text-align: justify;
}
/* **********************
* 文章评价
* **********************/
#div_digg {
position: fixed;
right: 30px;
bottom: 50px;
background: #fff;
padding: 20px 20px 15px;
border-radius: 5px;
border: 1px solid #888;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
}
/* **********************
* 隐藏广告
* **********************/
#ad_t2,
#opt_under_post,
.c_ad_block,
#under_post_news,
#under_post_kb {
display: none !important;
}
/* **********************
* 适配手机
* **********************/
@media (max-width: 767px) {
#home {
padding-left: 0;
padding-right: 0;
}
#div_digg {
width: auto;
padding: 0;
right: -25px;
bottom: 3px;
box-shadow: none;
}
#div_digg .buryit {
display: none;
}
#mainContent .forFlow {
display:flow-root;
padding-right: 0;
}
#mainContent .post {
padding: 0 20px;
}
#sideBar,
#blog-comments-placeholder {
padding: 0 15px;
}
}
.widget_my_zzk {
border-radius: 5px;
}
Sidebar:
<div>
<h2>小小视效研究猿</h2>
</div>
<!---添加头像--->
<img src="http://images.cnblogs.com/cnblogs_com/luomitcg/1502706/o_511401.png" alt="狗牌" class="img_avatar" width="50px" style="border-radius:50%">
Top section:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏背景切换</title>
<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch([
'http://api.asilu.com/cdn/img/bg/444.jpg',
'http://api.asilu.com/cdn/img/bg/445.jpg',
'http://api.asilu.com/cdn/img/bg/446.jpg',
'http://api.asilu.com/cdn/img/bg/447.jpg',
'http://api.asilu.com/cdn/img/bg/448.jpg'
], {
fade : 3000, // 动画时长
duration : 2000 // 切换延时
});
</script>
<a href="https://github.com/luomit" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:rgb(255, 255, 255); color:rgb(71, 71, 71); position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
</body>
</html>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<style>
div#bg {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -10;
background-position: center 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
zoom: 1;
opacity:1;
transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
</style>
<h1><a href="http://gouji.org/?post=317"></a></h1>
<div id="bg"></div>
<script>
// 定义图片路径 {num} 为 可变的图片序号
var bgImgUrl = 'https://www.cnblogs.com/images/cnblogs_com/luomitcg/1508364/o_{num}.jpg', bgNum,
bgImgArr = [],
bgDiv = document.getElementById("bg");
// 组合数组 此处 200 为 图开始序号 结束 203
for (var i=200; i <= 203; i++){
bgImgArr.push(bgImgUrl.replace('{num}', i));
}
setBGimg();
function setBGimg(d){
if(!bgNum || bgNum >= bgImgArr.length) bgNum = 0;
bgDiv.style.opacity = .001;
setTimeout(function(){
bgDiv.style.backgroundImage = 'url('+ bgImgArr[bgNum] +')';
bgNum++;
bgDiv.style.opacity = 1;
}, 1000);
if(typeof d == 'undefined')
setInterval(function(){setBGimg(true);}, 6000);
// 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
// 原文地址http://gouji.org/?post=317
}
</script>
Footer section:
<!-------动态背景-------->
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<!-------返回顶部-------->
<!--span id="back-to-top"><a href="#top"><img src="http://img2.imgtn.bdimg.com/it/u=2303550390,3222189618&fm=206&gp=0.jpg" style="width: 80px;height: 80px">ヾ(≧O≦)〃嗷~</a></span --->