微信小程序css篇
文章平均质量分 84
鎏嫣宫守护
不能安逸的日子
展开
-
微信小程序css篇----定位(position)
昨天2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇,虽然小程序里面对于css支持,但没有说明支持到什么地步。今天就先来说说定位。一.定位:position属性允许你对元素进行定位。二.定位机制:有三种:普通流,浮动流,绝对定位。三.定位属性原创 2016-12-29 15:24:21 · 83388 阅读 · 3 评论 -
微信小程序css篇----边框(Border)
一.边框:border 设置对象边框的特性。1.语法:border:length style color 2.style:none ,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。 二.相关属性。1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin原创 2016-12-30 11:22:08 · 210517 阅读 · 3 评论 -
微信小程序: button 修改样式(增加checkbox和radio的样式修改)
项目需求,登陆界面的button需要使用蓝色的bg,而在输入手机号码的时候,确认button 是disabled的。而默认的样式是绿色的,而直接类选择器设置样式,是没有效果的,在群友的帮助下,在button 里直接设置style就可以了。具体效果,直接看图吧。效果是这样:代码:wxss:登录btn的效果主要就是在style里直接设置bg-color,而能实现透明度就是直接设置o原创 2017-03-21 21:17:20 · 61595 阅读 · 1 评论 -
微信小程序css篇---文本溢出
最为一名Android开发人员,现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患,遇到的问题可能做前端的人员看到会觉得很低端,但没办法我还是记录下来吧,多遇到几次就会了,废话不多说,今天遇到的是text一行显示,多的省略----文本溢出的问题。如果是一行显示的时候,写在view里的样式,会在最后显示省略号,但要是写在text组件中设置这个样式的话就是最后多出来原创 2016-12-22 18:20:27 · 17784 阅读 · 4 评论 -
微信小程序css篇----flex模型
一、Flex布局是什么?Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器,必须加上-we转载 2017-01-15 15:37:06 · 18145 阅读 · 1 评论 -
微信小程序css篇----字体(Font)
一.字体:font。设置对象的文本特性。1.font-style:文字样式。取值:normal 正常的字体, italic 斜体字, oblique 倾斜的字体。2.font-weight:设置文本字体的粗细。取值范围为100-900.取值:mormal:正常大小相当于400。bold :粗体,相当于700。bolder, lighter。3.font原创 2016-12-30 16:34:22 · 221122 阅读 · 7 评论 -
微信小程序css篇----背景(Background)与颜色(Color)
一。背景:background。设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如果存在重叠关系,前面的背景图像会覆盖在后面背景图上。1.background-color:指定背景的颜色。取值:正常的颜色取值。2.background-image:背景图片。如果设置了这个属性,最好也添加下background-color ,用于当背景image不可见时保持与文原创 2016-12-30 15:20:09 · 144800 阅读 · 5 评论 -
微信小程序css篇----外边距(margin)和内边距(padding)
说到边距,那这个基本上跟android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点)一.margin:外边距;设置对象四边的外延边距。margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。margin:20rpx:如果只提供一个,将用于全部的四边。margin:20rpx 20rpx:原创 2016-12-29 23:16:05 · 76527 阅读 · 0 评论 -
微信小程序css篇----尺寸(Dimension)
下班回来了继续看,尺寸:dimension;一.尺寸属性:允许控制元素的宽和高,还可以设置行间距。1.height:设置元素的高度。2.line-height:设置hang gao原创 2016-12-29 22:22:35 · 10763 阅读 · 0 评论 -
微信小程序css篇----布局(Layout)
说到布局,脑子里第一反应出来的就是LinearLayout,RelativeLayout等等,不过现在既然是小程序,那当然得换换思路了,来看看css中有哪些布局方式。一:布局有以下几种:display,float,clear,visibility,overflow,overflow-x,overflow-y。1.display:设置对象是否显示。2.float:指出对象是否及如何浮动。原创 2016-12-29 18:08:58 · 40474 阅读 · 0 评论 -
微信小程序 scroll-view的滚动条设置
小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢,ios上直接就不显示啊,也是没谁了。深入想了一下,这滚动条能不能换一颜色或者换个样式。有这冲动就立马着手改。1。直接打开官方demo,仔细看了一遍官方文档,没有任何说明,这是官方文档的一贯作风。没有一个属性是去控制显示/隐藏滚动条,更别说这样式。所以...原创 2018-04-16 16:13:48 · 59677 阅读 · 9 评论