day03组件
1、text 编写文本信息,等价于span
2、view 等价于div
3、image
============================wxml=======================
<!--pages/index/index.wxml--> <view>实例一</view> <view class="menu1"> <image src="/pages/static/bird.jpg"></image> <image src="/pages/static/tiger.jpg"></image> <image src="/pages/static/flower.jpg"></image> <image src="/pages/static/horse.jpg"></image> </view> <view>实例二</view> <view class="menu2"> <view class="item"> <image src="/pages/static/bird.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/tiger.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/flower.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/horse.jpg"></image> <text>精品</text> </view> </view>
======================xcss================================
/* pages/index/index.wxss */
.c1{
color:red
}
image{
width:100rpx;
height:100rpx
}
.menu1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.menu{
display: flex;
/*规定主轴的方向 row row-reverse也是行但是反向显示*/
/*规定主轴的方向 column*/
flex-direction: row;
/*规定元素在主轴方向上的显示方式*/
justify-content: space-around;
/*规定元素在副轴方向上的显示方式
align-items: ;
一般副轴不用排
*/
}
.item{
display: flex;
flex-direction: column;
align-items: center;
}
4、flex布局
一种通用性的布局方式,记着4个布局样式就可以了
display:flex 使用flex布局
flex-direction :row/column 规定主轴的布局方式
justify-content:flex-start/flex-end/space-around/space-between元素在主轴方向的布局
align-items:flex-start/flex-end/space-around/space-between元素在副轴上的布局方式
5、样式:
px和rpx:
在官网上,需要看的就是全局和组件
想什么,就有什么,聚焦优秀