关于h5-app的一些css样式

总结一些项目中遇到的css样式，供以后查阅，持续更新。

1.控制文本以指定行数显示，多余部分以省略号代替。

.singleline{ display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/ text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/ overflow : hidden; -webkit-line-clamp: 1; /*控制行数 -webkit-box-orient: vertical; }

2.在图标右上角显示数量提醒，类似微信未读消息。

.redpoint{ height: 15px;width: 15px; border-radius: 50%; display: inline-block; text-align: center; font-size: 0.1em; color: #FFFFD0; /*调整数字的大小*/ background: red; position: relative; top: -38px; /*通过控制与上右的距离实现在右上角*/ right: -10px; }

3.圆角卡片(以主背景为白色，圆角卡片为灰色为例)

.card-back{ background-color:#f0f0f0; border-radius:10px; /*控制圆角的弧度*/ }

4.所有元素共用样式(以*作为标识)

*{ font-family:Arial; /*所有元素共用该字体样式*/ }

5.使元素特立独行，不使用所有元素的共用样式(例如大家都是红色的，只有我是蓝色的)

*{ color:red; } .mycss{ colorable !important; /*!important的优先级最高*/ }