2016-03至2016-08前端工作总结

Posted 2020-08-05 青草圆

CSS层面

花式按钮都可以通过css实现，用最基础的css语法/方式，不需要通过js去写成组件形式。可以最基础的css2和css3写出炫酷的按钮效果

/*自定义按钮 */
.invoice-class-type{
	position:relative;
	display:inline-block;
	width:120px;
	height:30px;
	line-height:30px;
	text-align: center;
}
.invoice-class-type>input[type="radio"]{
	position:absolute;
	display:block;
    height:1px;
    widht:1px;
    left:0;
    top:0;   
}
.invoice-class-type>input[type="radio"]+i{
	display:block;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    line-height:30px;
    width:120px;
    height:30px;
    border:1px solid #888; 
    border-radius:2px; 
    cursor:pointer;
    background-color:#fff;
}
.invoice-class-type>input[type="radio"]:checked+i{
	border-color:#f30026; 		
	background:url(../images/modify-img/red_right.png) no-repeat right bottom;
	background-color:#fff;
}
/*结束 自定义按钮*/

　　

UI层面

尽量开发UI组件，同时配合js写成插件形式。比如modal  有大有小，但是主要部分不变 modal-head modal-backdrop modal-content  modal-body modal-footer ，modal上可以加上大小规格，比如 lg md xs，让代码更简洁且有效并提高复用率。

icon层面

在项目中有两种解决方案，一种是雪碧图，另外一种方式就是字体图标，字体图标的要求就是浏览器能够支持IE8。如果，项目需求明确需要兼容到IE8那么雪碧图是最好的选择。其中，使用雪碧图时，需要把图标都写出来，用同一种规格比如，

1、大的图标引用类

/*订单中的图标*/

.icon-order{
    display:inline-block;
    position:relative;
    background:url(../images/icon-order.png);
}

2、具体图标名称

/*[垃圾桶]图标*/

i-trash{
    width:20px;
    height:20px;
    background-position:0 0;
}
i-trash:hover{
     background-position:0 20px;
}

每个图标的hover效果都写在当前图标类上，提高复用率