view: <view class="placeholder"> <view> <image src="/images/index/share.png"></image> </view> </view> css: .placeholder { width: 100%; height: 100%; display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* flex 属性， 水...
分类「css」的所有文章
view： <view class="box"> <view class="left"></view> <view class="right"></view> </view> css: .box { width: 100%; height: 200rpx; display: flex; } .box .right { width: 100%; height: 100%; flex: 1; background: burlywood; } .box .left...
div { height: 50px; width: 100%; text-align: center; // 水平居中 line-height: 50px // （跟高度一样，就能垂直居中) }
1.1 基本用法 Animation需要指定动画一个周期持续的时间，以及动画效果的名称。 div:hover { animation: 1s rainbow; } 上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。 @keyframes rainbow { 0% { background: #c00; } 50% { background:...
wxml <view class="wx"> <image src="/pages/images/feed-wx.png"/> <text>好友</text> </view> css .wx { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-left: 40rpx; } .wx image { width: 28rpx; height: 28rpx; ...