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.