微信小程序 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实现随机化快速排序的实例代码
Aug 01 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP递归的三种常用方式
2019/02/28 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python并行分布式框架Celery详解
2018/10/15 Python
django rest framework 过滤时间操作
2020/07/12 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
保安的辞职报告怎么写
2014/01/20 职场文书
超市端午节活动方案
2014/01/23 职场文书
操行评语大全
2014/04/30 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python