微信小程序 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 03 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
从0开始学Vue
Oct 27 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
node中的cookie的具体使用
Sep 13 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
vue实现按钮切换图片
2021/01/20 Vue.js
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
创业培训计划书
2014/05/03 职场文书
放飞理想演讲稿
2014/09/09 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
教师考核评语大全
2014/12/31 职场文书