微信小程序开发入门（二）image标签及图片样式
一、image标签显示一张图片
1、首先创建一个images文件夹，子文件夹avatar中下载数上图片，导入到项目跟目录下
2、在.wxml文件中，加上图片骨架标签
src属性可以设置图片路径
图片就显示到了屏幕上
3、绝对路径与相对路径
/开始代表项目根目录 /images/avatar/1.png
相对路径是从该文件夹向上到项目根目录，然后导航到该文件 …/…/images/avatar/1.png
4、文本标签 hello，11月
5、按钮标签
二、小程序rpx响应式单位的特点
1、我们发现图片图片变形了，没有显示出正常尺寸，因为image组件默认宽度是320px,高度240px
2、查看图片的实际尺寸，直接选中图片，右下角可以看到图片尺寸
这里在iPhone6模拟器下，设置属性style=“width:360px;highth:360px”，就显示出了实际尺寸
（iPhone6模拟器下，实际尺寸和原始尺寸的关系是2倍关系，像素值/2，即是实际尺寸在iPhone6模拟器下1px = 2rpx）
这里引入rpx，rpx是一个根据实际屏幕大小自适应的单位，通常显示照片就用rpx，保证它在iPad或者iPhone上展示的图片比例都是合适的
最终我们设置属性style=“width:200rpx;highth:200rpx”
三、分离css样式到wxss文件
属性style="width:200rpx;highth:200rpx"是一个样式，不推荐写到标签里面去，我们需要把样式放到wxss文件中去
到wxss文件写一个样式类
.user-avatar{
}
.代表是一个样式类，类名推荐用连字符-，我们简单起见命名为avatar
.avatar{
width: 200rpx;
height: 200rpx;
}
于是可以把image标签中的style=“width:200rpx;highth:200rpx” 删除
但要在image标签加上引用
样式中再设置一个图片距离顶部高度 margin-top: 160rpx;
最终
.avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}
微信小程序开发入门（二）image标签及图片样式相关推荐
- 微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
- 小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
- 微信小程序开发入门（连载）—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具 前往 开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
- 微信小程序开发入门（连载）—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
- 《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者 李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 目 录 第1章 微信小程序入门 第1章第1节 ...
- 《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者 李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
- 从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门 主讲人介绍 沁修,葡萄藤技术总监 项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结 直播录屏版 https://v.qq.com/x/page/n ...
- 微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号 在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
- 微信小程序开发入门（连载）—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作 登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
- 微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...
最新文章
- EMC与地之重新认识地
- oracle之TNS:无监听程序解决办法
- Js+Css打造的红色经典伸缩菜单代码
- 初探Golang（1）-变量
- java word转html 乱码 poi,java word转html poi
- SQL Server 2008 Mirror
- 2017-2018-20155336 《信息安全系统设计基础》第六周学习总结
- 机动车车牌分类及命名规则总结
- nacos注册服务地址为内网地址解决方法
- HP惠普笔记本Microsoft ACPI-Compliant System未知设备的解决办法
- Word 悬挂缩进文本如何对齐
- 【openGL】安装篇(上)：Windows
- FPGA基础资源之IOB的应用
- 雷军的那次「辞职」，决定了他现在的「成功」
- excel分析数据的工具有哪些？
- [源码和文档分享]基于Android Studio实现的在线学习课堂APP
- 任天堂游戏服务器系统,买个服务器当电脑主机如何确保买到新版任天堂Switch游戏主机？...
- 南京市租房网上提取公积金步骤
- oppo问答系统技术路线
- G1垃圾回收器学习笔记