首页 > 代码库 > 2016-03至2016-08前端工作总结
2016-03至2016-08前端工作总结
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效果都写在当前图标类上，提高复用率
2016-03至2016-08前端工作总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。