微信小程序 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创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
JavaScript中var的重要性实例分析
Jul 09 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
一个简洁的多级别论坛
2006/10/09 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
在视频前插入广告
2006/11/20 Javascript
一个用js实现的页内搜索代码
2007/05/23 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python自动生产表情包
2017/03/17 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python join方法使用详解
2019/07/30 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python实现单机五子棋
2020/08/28 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
2014信息公开实施方案
2014/02/22 职场文书
房屋出租委托书格式
2014/09/23 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
优秀班组事迹材料
2014/12/24 职场文书
护士辞职信怎么写
2015/02/27 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电