微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二（WXSS和CSS样式美化）
- 一、CSS基本知识
- 1.Class选择器的定义
- 2.ID选择器的定义
- 3.ID选择器和class选择器的区别
- 4.CSS中设置颜色
- 5.CSS中的文本
- 5.CSS边框和边距
- 1.padding页内边距
- 2.border边框
- 3.margin外边框
- 3.圆角border-radius（百度）
- 6.图片的显示
一、CSS基本知识
1.Class选择器的定义
在wxml里定义一个Class选择器
<view class="yangshi">
我是样式
</view>
2.在wxss实现css样式
.yangshi{background: pink;
}
2.ID选择器的定义
在wxml里定义一个Class选择器
<view ID="yangshi">
我是样式
</view>我是样式
wxss中
#yangshi{color:red;}
3.ID选择器和class选择器的区别
1.class组件可以重复
2.ID只能有一个
类似于姓名和身份证号
4.CSS中设置颜色
颜色的表示方式：
1.16进制
2.RGB
3.颜色名称：red
background-color:green;
background:green;
5.CSS中的文本
对齐方式
.yangshi{text-align: center;text-align: left;text-align: right;text-decoration: line-through; 中间划线}
字体大小
默认像素为16像素
font-size:30px;
5.CSS边框和边距
1.padding页内边距
.hongmi{background-color: red;padding: 10px 20px 30px 50px; 上 右 下 左单独设置padding: left 10xp;padding: right 10xp;padding: bottom 10xp;padding: top 10xp;
}
2.border边框
border-style: solid; 实线
border-width:1px;
border-color:green;border:color 10px dotted;颜色 像素 形式
3.margin外边框
margin: 50px 80px;
3.圆角border-radius（百度）
6.图片的显示
<image src="图片网址"></image>填充页面
wxml
<image class="img" src="图片网址"></image>
wxss
.img()
{size:width
}
微信小程序开发笔记二（WXSS和CSS样式美化）相关推荐
- 微信小程序开发笔记(二)
1.import和include import是用来导入模板. includes用来导入除模板以外的内容. 2.wxss引用 @import './test_0.wxss' 3.App构造器 App( ...
- 微信小程序开发笔记二—底部导航栏tabar
文章目录 一.实现效果 二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件 三.注意事项 一.实现效果 首先展示一下实现效果 底部导航栏有三个按键 ...
- 微信小程序开发笔记—设置页面密码
文章目录 一.功能概述 二.实现效果 三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
- 微信小程序开发笔记——wsdchong
微信小程序开发笔记 一.小程序简介 小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
- 微信小程序开发笔记 进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录 一.前言 二.onfire.js介绍 三.API介绍 四.实例应用 五.onfire源码 六.实例源码 一.前言 微信小程序开发笔记--导读 二.onfire.js介绍 一个简单实用的事件订 ...
- 微信小程序开发笔记一
微信小程序开发笔记 一.微信小程序的结构 1.初识小程序 2.快捷键 3.查阅文档 二.常用组件 1.input组件 2.button组件 三.小程序中的函数 1.函数的两种定义方法 2.带参函数 3 ...
- 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
- 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
- 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
最新文章
- 深度学习多变量时间序列预测：Encoder-Decoder LSTM算法构建时间序列多变量模型预测交通流量+代码实战
- MapReduce的自制Writable分组输出及组内排序
- windows phone 8.0 app 移植到windows10 app 页面类
- Asp.Net Membership 回顾
- inxni扫地机器人_实用型助手，inxni以内扫地机器人 X332
- SICC大会发布银行、保险用户报告——详解C2B下的服务创新
- 自然语言10_分类与标注
- 西安后宰门小学_重磅！西安市教育局召开发布会，将有大动作！
- 数组中其余的排除_带你一步步精通数组之十五：数组的计算规律之五
- 因为某种原因阻止文本引擎初始化_网络营销外包——网络营销外包专员如何做好网站锚文本优化？...
- node怎么解析vue代码_vue中node_modules中第三方模块的修改使用详解
- linux内核被加载的过程
- 计算机开题报告中的研究方法,开题报告：经济学写论文用到的五种研究方法
- 高效记忆/形象记忆（15）110数字编码表 91-00
- CSS3相比CSS新增哪些功能
- ACM-Week 2
- psv变革怎么安装游戏_创造变革游戏
- Apache Doris 的一场编译之旅
- sem_init函数用法
- 记一次Redis出问题及解决方案