微信小程序 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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
浅析JavaScript中的变量提升
Jun 01 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入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
ucenter通信原理分析
2015/01/09 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python的argparse库使用详解
2018/10/09 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
个人找工作自荐信格式
2013/09/21 职场文书
初一体育教学反思
2014/01/29 职场文书
大学生校园创业计划书
2014/02/08 职场文书
女方离婚起诉书
2015/05/18 职场文书
公司档案管理制度
2015/08/05 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers