小程序入门
作者：互联网
小程序
wxss
1.demo01{
writing-mode: vertical-lr; 字体方向
font-size: xx-large; 字体大小
font-weight: 500; 字体宽度
font-family: sans-serif; 字体类型
color: cyan; 颜色
text-align: left; 文本对齐方式
display: flex; 弹性布局
font-style: inherit; 斜体或正常字体
flex-direction: column; 弹性项目的方向
letter-spacing: 1px; 字符间距
text-indent: 10px; 首行缩进
word-spacing: 5px; 字间距
text-decoration: underline; 线的样式
text-decoration-color: green; 线的颜色
}
2.demo01{
背景颜色
border: 2px solid; 边框 solid表示实线
border-color: red; 边框颜色
margin: 10px; 外边距
padding: 5px; 内边距
margin: 1px,2px 上下和左右
padding:1px,2px,3px,4px 顺序为上右下左
box-sizing:border-box;
display: flex; 弹性布局
flex-wrap: wrap; 超出范围自动换行
}
image{
width: 154px; 图片长度
height: 154px; 图片高度
}
js:
1.Page({
a:function(){ 定义函数
let audio=wx.createInnerAudioContext()
audio.src="/audios/大司马歪比巴卜.mp3" 绑定路径
audio.play() 音频播放
},
data:{
x:src=图片的路径"
}
})
wxml
<view class="demo02">
<image src="{{x}}" x的值就是图片
bindtap="a"> 图片绑定函数
</image>
显示效果：
小程序
wxss
1.demo01{
writing-mode: vertical-lr; 字体方向
font-size: xx-large; 字体大小
font-weight: 500; 字体宽度
font-family: sans-serif; 字体类型
color: cyan; 颜色
text-align: left; 文本对齐方式
display: flex; 弹性布局
font-style: inherit; 斜体或正常字体
flex-direction: column; 弹性项目的方向
letter-spacing: 1px; 字符间距
text-indent: 10px; 首行缩进
word-spacing: 5px; 字间距
text-decoration: underline; 线的样式
text-decoration-color: green; 线的颜色
}
2.demo01{
背景颜色
border: 2px solid; 边框 solid表示实线
border-color: red; 边框颜色
margin: 10px; 外边距
padding: 5px; 内边距
margin: 1px,2px 上下和左右
padding:1px,2px,3px,4px 顺序为上右下左
box-sizing:border-box;
display: flex; 弹性布局
flex-wrap: wrap; 超出范围自动换行
}
image{
width: 154px; 图片长度
height: 154px; 图片高度
}
js:
1.Page({
a:function(){ 定义函数
let audio=wx.createInnerAudioContext()
audio.src="/audios/大司马歪比巴卜.mp3" 绑定路径
audio.play() 音频播放
},
data:{
x:src=图片的路径"
}
})
wxml
<view class="demo02">
<image src="{{x}}" x的值就是图片
bindtap="a"> 图片绑定函数
</image>
显示效果：
标签：flex,入门,color,text,程序,1px,2px,font 来源： https://www.cnblogs.com/ccaqq/p/16056122.html