美化网站滚动条
滚动条样式详见本站滚动条样式,直接使用即可
/*—滚动条默认显示样式–*/ ::-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}
未经允许不得转载:作者:锅巴网络,
转载或复制请以 超链接形式 并注明出处 锅巴资源。
原文地址:《wordpress HTML 简单美化标签》 发布于2019-12-19
评论 抢沙发