微信小程序 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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
详解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
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php curl基本操作详解
2013/07/23 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python中property函数用法实例分析
2018/06/04 Python
Python os.access()用法实例
2019/02/18 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python爬取网页信息的示例
2020/09/24 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
超市营业员岗位职责
2013/12/20 职场文书
军训考核自我鉴定
2014/02/13 职场文书
小学清明节活动总结
2014/07/04 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python