标签：flex 入门 color text 程序 1px 2px font
小程序
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。