My First BlogHTML
PinkStyle
页面定制 CSS 代码
<!--
<script>
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
}
--!>
body {
background: #1a202b;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
text-shadow: 0 0 1px transparent;
color:#505050;
}
#banner {
width: 100%;
height: 135px;
background: transparent;
}
.headerText {
position: absolute;
top: 50px;
left: 150px;
text-align: left;
}
.headermaintitle {
font: bold 50px/36px "courier new",verdana,monospace;
color:#c33f66;
}
a.headermaintitle:visited {
color: #c33f66;
}
a.headermaintitle:hover {
color: #d80e4b;
text-decoration: underline;
}
#main {
background: transparent;
height: 650px;
}
#right{
background: transparent;
height: 650px;
}
#right_content {
width: 100%;
margin: 0 5px 0 250px;
background: transparent;
}
#mylinks {
background: transparent;
width: 70%;
border-radius: 6px;
box-shadow: 10px 8px 5px #110b0d;
border: 2px solid #1e151a;
}
a.menu:link, a.menu:visited{
color: #c33f66;
text-decoration: none;
}
a.menu:hover {
color: #d80e4b;
text-decoration: underline;
}
#mystats {
font-weight: normal;
}
#blogStats{
font-weight: normal;
}
#left{
margin: 30px auto auto 100px
}
element.style {
height: 125px;
}
#clockdiv {
text-align: center;
}
canvas#dom {
background: #bca2ac;
border-radius: 50%;
box-shadow: 5px 5px 5px #110b0d;
}
.listtitle, .catListTitle {
font-size: 14px;
background: #b55873;
color: #090708;
border-radius: 8px;
margin-top: 20px;
line-height: 38px;
box-shadow: 5px 5px 5px #110b0d;
width: 200px;
}
#sidebar_search_box{
margin-top: 15px;
}
.input_my_zzk {
height: 18px;
border: #474345;
border-style:inset;
}
.div_my_zzk {
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
input.btn_my_zzk {
vertical-align: middle;
height: 22px;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
top: 1px;
width: 60px;
border: 2px solid #8e6b79;
border-style:outset;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
box-shadow: 2px 2px 2px #110b0d;
}
input.btn_my_zzk:hover {
background-color: #8e6b79;
color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.topicListFooter {
background: transparent;
padding-bottom: 15px;
}
#blog-calendar , #blogCalendar{
display: none;
}
#footer {
background: transparent;
width: 70%;
margin:auto auto 20px;
border: none;
height: 50px;
color: #e2d7da;
position: absolute;
bottom: 10px;
}
</script>
博客侧边栏公告（支持HTML代码）（支持 JS 码）
<!-- 添加公告栏时钟 -->
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;">
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/shwee/clock.js"></script>
页脚 HTML 代码
<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json", // 卡通模型
"scale": 1
},
"display": {
"position": "right", // 定位位置（"left"/"right"/"top"/"bottom"）
"width": 100, // 宽度
"height": 200, // 高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": false,
"scale": 0.5
},
"react": {
"opacityDefault": 1, // 透明度
"opacityOnHover": 0.2
}
});
window.onload=function(){
document.getElementById('live2dcanvas').style.border="none";
}
$(function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.6),c:n(i,"color","254,91,132"),n:n(i,"count",150)}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
});
</script>
浙公网安备 33010602011771号