css总结
2015-09-26 13:59
645 查看
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
相关文章推荐
- CSS3中的动画基础
- 移动端网页解决CSS的active伪类无效的方法
- 简析CSS表达式attr()的运用
- CSS计数器counter()的用法简介
- 进一步理解CSS编程中的块级元素和行内元素
- 获取元素的style样式(内联,内部)
- 2015-09-22 css2
- html与css笔记
- 2015-09-21 css学习1
- 模块化的CSS
- 初步学习css3之3D动画
- css学习笔记(四)-文本属性
- HTML与CSS
- CSS小知识
- 960CSS框架,之前有用过 了解下框架基本原理
- CSS框架960Grid从入门到精通一步登天
- web网页的表单排版利器--960css
- 4、第4次课 CSS代码第三节课20150923
- 纯CSS绘制基本图形
- css文本样式-css学习之旅(4)