运营

网站美化通用代码

叶九秋 · 4月1日 · 2019年

一些美化网站的通用代码片段。

右下角安全图标

其实没啥用,就是右下角价格图标玩一下。

<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">
<img src="http://oss.yejiuqiu.cn/myssl-id.png" target="_blank" rel="nofollow noopener noreferrer" alt="叶九秋" style="width:100%;height:100%">
</a>
</div>

PC端滚动条美化

/*滚动条*/
/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#20a0e1;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#20a0e1;
height:50px;
-webkit-border-radius:4px;
}
/*—滚动条大小–*/
::-webkit-scrollbar{
width:16px;
height:16px;
}
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}