微信小程序 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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Javascript模块模式分析
May 16 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 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
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php自定义hash函数实例
2015/05/05 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
原生JS进行前后端同构
2018/04/22 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
js仿360开机效果
2019/12/26 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
美术教师自我鉴定
2014/02/12 职场文书
质检部经理岗位职责
2014/02/19 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
聘用意向书范本
2014/04/01 职场文书
干部考核评语
2014/04/29 职场文书
国庆庆典邀请函
2015/02/02 职场文书