微信小程序 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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php数组指针操作详解
2017/02/14 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
基于jquery & json的省市区联动代码
2012/06/26 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python中类型检查的详细介绍
2017/02/13 Python
python3实现windows下同名进程监控
2018/06/21 Python
python实现图片识别汽车功能
2018/11/30 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
pandas数据处理进阶详解
2019/10/11 Python
Python PIL库图片灰化处理
2020/04/07 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
美术师范毕业生自荐信
2013/11/16 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
班主任工作总结范文
2015/08/13 职场文书
React四级菜单的实现
2022/04/08 Javascript