1.图片居中,通过固定图片高度
#settings .item > img{ position:absolute; right:13px; top: 50%; margin-top: -6px;/*图片高度的-1/2 */ }
2. 多行省略
/*html代码*/
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>
/*css代码*/
$font-size: 26px; $line-height: 1.4; $lines-to-show: 3; h2 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ margin: 0 auto; font-size: $font-size; line-height: $line-height; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
3. 移动端基本css
/* 快速滚动和回弹效果 */ -moz-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; /* 字体设置 */ font-family: Helvetica,Arial, SimHei, '微软雅黑', Helvetica; font-size:13px;
4.禁止点击元素: 可通过设置 pointer-events: none;来禁止,非常好用。
5. css转换大小写: text-transform:lowercase/uppercase