微信小程序 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停止输出代码
Jul 20 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
javascript异常处理实现原理详解
Feb 17 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
模仿OSO的论坛(五)
2006/10/09 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Web开发之JavaScript
2012/03/29 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
js实现中文实时时钟
2020/01/15 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python常用库推荐
2016/12/04 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
pandas取出重复数据的方法
2019/07/04 Python
python关于调用函数外的变量实例
2019/12/26 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python计算auc的方法
2020/09/09 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
《值日生》教学反思
2014/02/17 职场文书
高中学生评语大全
2014/04/25 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
委托函范文
2015/01/29 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis