微信小程序学习3(wxss)

2024-04-10 06:22:22

1.id与class选择器

选择器就是wxss大括号前面的部分,id选择器样式为( #id ),class选择器样式为( .class名 )

区别:class可以重复使用,即wxml中多个组件可以有相同的class名,id则不可重复使用

2.颜色设置

颜色有三种设置方式:

十六进制式,RGB式,颜色名称式

给出对照表:http;//tool.oschina.net/commons?type=3

3.css中文本常见样式

1.text-align(对齐方式)

center left right

2.text-decoration(划线效果)

overline(上划线) linethrough(中划线) underline(下划线)

3.color(字体颜色)

4.font-size(字体大小)

4.边框属性

1.padding(内边距:内容到边框距离):如果只用一个值顺序为上右下左(顺时针)

2.margin属性(外边距):如果只用一个值顺序为上右下左(顺时针)

3.border属性

border-style:solid(实线) dashed(虚线) dotted(点线)

border-color

border-width

border-radius:当他被设置为宽高的一半时为圆形,也可设置为50%

可以直接使用border属性直接设置,只需要有这三个属性即可而且他们的顺序是可交换的

还可以border-方向(left,top,buttom,right)-属性(width,color,style,radius)

5.px与rpx

px为像素单位,在不同机型下屏幕的宽度不一致,会有适配问题出现,微信提供了一种单位rpx,规定屏幕的宽度为750rpx,使用rpx可以解决适配问题

6.image组件

默认宽高为:320×240

使用src=' '属性来添加图片

缩放与裁剪方式(这部分看官方文档)

7.swiper组件

构成例如:

<swiper>

<swiper-item> 里面可以放一些例如image的组件

</swiper-item>

</swiper>

注意:在swiper中只能放swiper-item

属性:indicator-dots(是否显示面板指示点) indicator-color(指示点颜色) indicator-active-color(当前选中指示点颜色)等

微信小程序学习3(wxss)相关推荐

微信小程序学习笔记——wxss使view填充整个页面
在页面中我们要将某个元素填充整个页面,使用height:100%,前提是给定父元素的高度,在普通的html中可以将body或者html的高度赋值为100%,接下开才可以在其中的子元素使用height: ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习之路（一）
微信小程序学习之路(一) 1.前言 2.准备工作 (1).IDE的选择 (2).微信小程序的文件说明 (3)开发者用户注册 3.编写 (1).新建项目 (2).代码的编写 3.代码的发布以及审核 1. ...
微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】
微信小程序学习记录[1][项目结构构成.基本配置]文章目录项目结构构成官方文档结构基本配置 1. 小程序配置 1.1 app.json 1.2 page(页面名).json 1.3 sitema ...

最新文章

热门文章