我的个人工作总结，常用的前端编程方法和技巧

时间：2017-10-10 17:47:10 阅读：159 评论：0 收藏：0 [点我收藏+]

标签：back relative 16px bottom 模板底部 ack 定位 psi

废话少说，直接进入主题

就我目前对前端技术的积累，根据我的个人经验，主要积累了一下五大技巧

1、class标签法，在写页面的样式的时候，通过class标签法修改页面，可以节省大量时间，而且每一次的模板套用非常方便，可以大大提高开发效率

这套方法可以根据每个项目的特性来修改具体需要的提醒，这样必定可以达到事半功倍的效果

代码展示：

/*手指*/

.fg{cursor: pointer;}

/*超出本分隐藏*/

.ovhide{overflow:hidden!important;}

.xauto{overflow-x:auto!important;}

.yauto{overflow-y:auto!important;}

/*相对定位*/

.re{position: relative;}

.pos-abs{position: absolute;}

/*头部top*/

.t0{top: 0px;}

.t5{top: 5px;}

.t10{top: 10px;}

.t15{top: 15px;}

.t20{top: 20px;}

/*底部bottom*/

.b0{bottom: 0px;}

.b5{bottom: 5px;}

.b10{bottom: 10px;}

.b15{bottom: 15px;}

.b20{bottom: 20px;}

/*右right*/

.r0{right: 0px;}

.r5{right: 5px;}

.r10{right: 10px;}

.r15{right: 15px;}

.r20{right: 20px;}

/*左left*/

.l0{left: 0px;}

.l5{left: 5px;}

.l10{left: 10px;}

.l15{left: 15px;}

.l20{left: 20px;}

/*最小宽度*/

.min25{min-width: 25px!important;}

.min30{min-width: 30px!important;}

.min35{min-width: 35px!important;}

.min40{min-width: 40px!important;}

.min50{min-width: 50px!important;}

/*最大宽度*/

.max50{max-width: 50px!important;}

.max40{max-width: 40px!important;}

.max35{max-width: 35px!important;}

.max30{max-width: 30px!important;}

.max25{max-width: 25px!important;}

.max22{max-width: 22px!important;}

/*隐藏元素*/

.hide{display:none;}

/*背景*/

.bf3{background:#eeeeee!important;}

/*.bf3{background:#f8f8f8!important;}*/

.beee{background:#eeeeee!important;}

.baaa{background:#aaaaaa!important;}

.bfff{background:#fff!important;}

.bf25{background:#f25039!important;}

.bf9{background:#F9F9F9!important;}

.bgreen{background:#2aba65!important;}

.box{margin:0 auto;width:920px;}

/*省略号*/

.lineshow {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

/*缩进*/

.ti{text-indent: 10px!important;}

.ti5{text-indent: 5px!important;}

.ti10{text-indent: 10px!important;}

.ti15{text-indent: 15px!important;}

.ti20{text-indent: 20px!important;}

.ti25{text-indent: 25px!important;}

/*a标签没有下划线*/

.anot{text-decoration: none!important;}

/*高度*/

.h20{height:20px!important;}

.h30{height:30px!important;}

.h35{height:35px!important;}

.h40{height:40px!important;}

.h50{height:50px!important;}

/*行高*/

.lh10{line-height: 10px!important;}

.lh15{line-height: 15px!important;}

.lh18{line-height: 18px!important;}

.lh20{line-height: 20px!important;}

.lh22{line-height: 22px!important;}

/*宽度*/

.w20{width:20px!important;}

.w30{width:30px!important;}

.w40{width:40px!important;}

.w50{width:50px!important;}

.w55{width:55px!important;}

/*边框的弯度*/

.br2{border-radius:2px!important;}

.br3{border-radius:3px!important;}

.br4{border-radius:4px!important;}

.br5{border-radius:5px!important;}

.br6{border-radius:6px!important;}

/*border的四条线*/

.b{border:1px solid #eee!important;}

.bnot{border:none!important;}

.b1{border:1px solid #ededed!important;}

/*头部的一条线*/

.bt{border-top:1px solid #eee!important;}

.br{border-right:1px solid #eee!important;}

.bl{border-left:1px solid #eee!important;}

/*底部一条线*/

.bb{border-bottom:1px solid #eee!important;}

.bb2{border-bottom:2px solid #eee!important;}

.bbnot{border-bottom:1px solid #fff!important;}

/*全屏*/

.v100{width:100px!important;height:100vh!important;}

/*全屏*/

.vw95{width:95px}

.vw100{width:100px}

/*百分比*/

.vw10s{width:10%!important;}

.vw18s{width:18%!important;}

.vw20s{width:20%!important;}

.vw25s{width:25%!important;}

.vw40s{width:40%!important;}

.vw50s{width:50%!important;}

/*字体大小*/

.fs12{font-size:12px!important;}

.fs13{font-size:13px!important;}

.fs14{font-size:14px!important;}

.fs16{font-size:16px!important;}

.fs17{font-size:17px!important;}

/*字体位置*/

.tac{text-align: center!important;}

.tal{text-align: left!important;}

.tar{text-align: right!important;}

/*字体通用颜色*/

.cfff{color:#ffffff!important;}

.c333{color:#333333!important;}

.c666{color:#666666!important;}

.c999{color:#999999!important;}

.cf25{color:#f25039!important;}

.caaa{color:#aaa!important;}

/*内边框*/

.p0{padding: 0px!important;}

.p5{padding: 5px!important;}

.p10{padding: 10px!important;}

.p15{padding: 15px!important;}

.p20{padding: 20px!important;}

.p25{padding: 25px!important;}

/*内边框上*/

.pt5{padding-top: 5px!important;}

.pt10{padding-top: 10px!important;}

.pt15{padding-top: 15px!important;}

.pt20{padding-top: 20px!important;}

.pt25{padding-top: 25px!important;}

/*内边框下*/

.pb5{padding-bottom: 5px!important;}

.pb10{padding-bottom: 10px!important;}

.pb15{padding-bottom: 15px!important;}

.pb20{padding-bottom: 20px!important;}

.pb25{padding-bottom: 25px!important;}

/*内边框左*/

.pl0{padding-left: 0px!important;}

.pl5{padding-left: 5px!important;}

.pl10{padding-left: 10px!important;}

.pl15{padding-left: 15px!important;}

.pl20{padding-left: 20px!important;}

/*内边框右*/

.pr5{padding-right: 5px!important;}

.pr10{padding-right: 10px!important;}

.pr15{padding-right: 15px!important;}

.pr20{padding-right: 20px!important;}

.pr25{padding-right: 25px!important;}

/*外边框*/

.m5{margin: 5px!important;}

.m10{margin: 10px!important;}

.m15{margin: 15px!important;}

.m20{margin: 20px!important;}

.m25{margin: 25px!important;}

等等，都是基本的，因为我用的比较多，要查看全部，可以去我的github下载我的样式文件commo.css

我的个人工作总结，常用的前端编程方法和技巧

标签：back relative 16px bottom 模板底部 ack 定位 psi

原文地址：http://www.cnblogs.com/lgysjfs/p/7646693.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行