HTML 命名规范

1.body元素： -wrap

2.固定元素间隙设置： fix-pd

3.固定定位： fix-top fix-bt

4.弹出层遮罩： black-layer

代码示例：

.black-layer{

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: rgba(0,0,0,.8);

z-index: 100;

}

5.弹出层： dialog

代码示例：

.dialog{

position: fixed;

top: 0.43rem;

left: 50%;

z-index: 100;

font-size: .14rem;

color: #666;

text-align: center;

border-radius: 6px;

}

6.输入框 input textarea ( -inpt -txtarea)

代码示例：

.input-text,.sim-txtarea{

padding: .1rem;

width: 100%;

font-size: .13rem;

color: #666;

background: #fff;

border: 1px solid #eaeaea;

border-radius: 3px;

box-sizing: border-box;

}

输入框提示文字：

/输入框提示文字/

/* WebKit browsers */

.inpt::-webkit-input-placeholder {

color: #999;

}

/* Mozilla Firefox 4 to 18 */

.inpt:-moz-placeholder {

color: #999;

}

/* Mozilla Firefox 19+ */

.inpt::-moz-placeholder {

color: #999;

}

/* Internet Explorer 10+ */

.inpt:-ms-input-placeholder {

color: #999;

}

7.页头 top-bar

示例代码：

.top-bar{

position: relative;

width: 100%;

height: .42rem;

color: #fff;

text-align: center;

background: #000;

z-index: 20;

}

.top-bar .arrow-l{

position: absolute;

left: 0;

top: 0;

display: inline-block;

height: .42rem;

width: .29rem;

background: url(../images/arrow-l.png) no-repeat center center;

background-size: auto 100%;

z-index: 25;

}

**8. -tit -list -item -infor -btn -txt -pic -img

订单列表： ord-mod-tit ord-mod-con ord-mod-btn

订单详情： ord-det-tit ord-det-con ord-det-btn

由内到外： -wrap -con -tit**

9. 弹性盒子 -webkit-box

示例代码：

/* 纵向自适应 */

.box-wrap{

display: -webkit-box;

-webkit-box-orient: vertical;

box-sizing: border-box;

}

/* 横向自适应 */

.box-wrap-2{

display: -webkit-box;

display: -moz-box;

display: box;

-webkit-box-orient: horizontal;

}

/* 横向自适应 同时垂直居中 */

.box-wrap-3{

display: -webkit-box;

display: -moz-box;

display: box;

-webkit-box-orient: horizontal;

-webkit-box-align: center;

}

10.文字超出隐藏

.text-over{

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

11.