美化网站滚动条

滚动条样式详见本站滚动条样式,直接使用即可

/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}

/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}

/*—滚动条大小–*/
::-webkit-scrollbar{
width:8px;
height:18px;
}

/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

美化提醒样式

在需要使用的地方直接添加样式名

蓝色框

黄色框

绿色框

红色框

.iblue {margin: 20px 0;padding: 15px 15px 15px 70px;font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);background: url(../img/info.png) no-repeat 20px 20px #e4eff9;color: #5d93b2;}
.iyellow {margin: 20px 0;padding: 15px 15px 15px 70px;font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);background: url(../img/warning.png) no-repeat 20px 20px #fff0b5;color: #b09e56;}
.igreen {margin: 20px 0;padding: 15px 15px 15px 70px;font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);background: url(../img/yes.png) no-repeat 20px 20px #eff4d4;color: #779b39;}
.ired {margin: 20px 0;padding: 15px 15px 15px 70px;font-size: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);background: url(../img/noway.png) no-repeat 20px 20px #fadcd8;color: #c66;}

美化提醒样式2

bj-danger样式bj-info样式bj-green样式bj-warn样式bj-purple样式

/*—标签–*/
.bj-danger{background:#fd6639;color:#fff;border-radius:5px;margin:0 5px 0 5px;padding:0px 5px 0 5px;}
.bj-info{background:#66ccff;color:#fff;border-radius:5px;margin:0 5px 0 5px;padding:0px 5px 0 5px;}
.bj-green{background:#66cc66;color:#fff;border-radius:5px;margin:0 5px 0 5px;padding:0px 5px 0 5px;}
.bj-warn{background:#FFB90F;color:#fff;border-radius:5px;margin:0 5px 0 5px;padding:0px 5px 0 5px;}
.bj-purple{background:#AB82FF;color:#fff;border-radius:5px;margin:0 5px 0 5px;padding:0px 5px 0 5px;}

头像旋转

头像旋转仅测试了 wordpress 主题，其他主题自行修改

/*头像旋转*/
.avatar{-webkit-transition:0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
-moz-transition:-moz-transform 0.4s ease-out;}
.avatar:hover{transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-moz-transform:rotateZ(360deg);}

美化H标签

这是h1

这是h2

这是h3

这是h4

这是h5

/*添加文章h标签样式*/
.article-content h1,.article-content h2{font-weight:bold;border-radius:5px;margin:20px 0;border-bottom:1px solid #eee;padding-bottom:10px}
.article-content h2{font-size:18px;font-weight:bold;border-radius:5px;border-bottom:1px solid;padding:5px 15px;border-left:8px solid;border-left-color:#EE3B3B;background-color: #ebebeb;border-color:#EE3B3B;color:#EE3B3B;margin:18px 0 18px -20px;overflow:hidden;}
.article-content h3,.article-content h4,.article-content h5{padding:0;border-radius:5px;margin:20px 0;color:#555;font-weight:bold}
.article-content h5{font-size:13px;font-weight:bold;border-radius:5px;border-bottom:1px solid;padding:2px 15px;border-left:6px solid;border-left-color:#01aaef;border-color:#3cc3ff;color:#3cc3ff;margin:18px 0 18px -20px;overflow:hidden}
.article-content h1 {font-size: 20px}
.article-content h2 {font-size: 18px}
.article-content h3 {font-size: 16px}
.article-content h4 {font-size: 15px}
.article-content h5 {font-size: 14px}

分享到：

赞(0) 打赏 生成海报