CSS前端样式美化总结

css按钮样式美化

.login-button { /* 按钮美化 */
    width: 270px; /* 宽度 */
    height: 40px; /* 高度 */
    border-width: 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #1E90FF; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 17px; /* 字体大小 */
}
.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
    background: #5599FF;
}

效果图如下：

 

div层模拟按钮效果

HTML代码：

<div class="body-btn-1 zyfp-btn"></div>
<div class="body-btn-2 ptfp-btn"></div>
<div class="body-btn-3 zyfp-btn1"></div>

CSS样式：

.body-btn-1 {
    		position: absolute;
    		width: 272px;
    		height: 157px;
    		left: 90px;
    		top: 140px;
    		cursor: pointer;
}
.ptfp-btn {
    		background: url(../../../img/yshd/yscx.png) no-repeat;
}

.ptfp-btn:hover {
		    background: url(../../../img/yshd/yscxb.png) no-repeat;
}

 效果：

CSS特效复选框

效果：

源代码如下：

https://download.csdn.net/download/u013310119/11827461

更多JS操作表格样式请阅读下一篇博客：

https://blog.csdn.net/u013310119/article/details/101022497

一个朋友新做的公众号，帮忙宣传一下，会不定时推送一些开发中碰到的问题的解决方法，以及会分享一些开发视频。资料等。请大家关注一下谢谢：