微信小程序 css使用技巧总结


Posted in Javascript onJanuary 09, 2017

微信小程序 css使用技巧

1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent)

.demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

2:设置最高高度..超过后可以滑动

max-height: 550rpx;

 overflow-y: scroll;

3: text-overflow 当属性规定当文本溢出包含元素时发生的事情

clip: 修剪文本
ellipsis : 用省略号来代表被修剪的文字
string: 使用给定的字符串来代表被修剪的文字
重点是三个同时使用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分

5: margin-bottom失效

margin-bottom是下方的外边距,并不能让元素向下方移动,margin-top作为上边距,把元素“推”了下去。
希望图标距离下方30px,那么可以在ul上设置 position:absolute, bottom:30px ,(这一句我没有加同样实现了效果)另外父元素position:relative

6:强制不换行

white-space:nowrap;

自动换行

div{ 

word-wrap: break-word; 

word-break: normal; 

}

强制英文单词断行

div{

word-break:break-all;

}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery实现数字加减效果汇总
Dec 16 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
js实现抽奖功能
Nov 24 Javascript
详解Jquery Easyui的验证扩展
Jan 09 #Javascript
Javascript blur与click冲突解决办法
Jan 09 #Javascript
简单实现jQuery级联菜单
Jan 09 #Javascript
prototype与__proto__区别详细介绍
Jan 09 #Javascript
jQuery实现二维码扫描功能
Jan 09 #Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 #Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
详解PHP PDO简单教程
2019/05/28 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python实现的系统实用log类实例
2015/06/30 Python
python提取字典key列表的方法
2015/07/11 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python随机数函数代码实例解析
2020/02/09 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
环境工程专业个人求职信
2013/12/05 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
OpenCV 图像梯度的实现方法
2021/07/25 Python