微信wxss样式:使用弹性盒模型显示*/高度为60rpx */ /*背景颜色为深灰色*/ 文本颜色为白色*/子元素垂直居中 */ 内边距为日上下,20rpx左右*/
时间: 2024-06-17 16:06:36 浏览: 142
less/sass 文件编译成微信小程序wxss文件
微信小程序的wxss样式可以通过以下代码实现要求的效果:
```css
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
background-color: #333;
padding: 10rpx 20rpx;
}
.text {
color: #fff;
}
```
解释一下代码:
- `.container` 是一个容器元素,使用了弹性盒模型(`display: flex`)布局。
- `justify-content: space-between` 表示子元素沿着主轴的对齐方式为两端对齐。
- `align-items: center` 表示子元素沿着交叉轴的对齐方式为居中对齐。
- `height: 60rpx` 表示容器元素的高度为60rpx。
- `background-color: #333` 表示容器元素的背景颜色为深灰色。
- `padding: 10rpx 20rpx` 表示容器元素的内边距为10rpx的上下内边距和20rpx的左右内边距。
- `.text` 是一个文本元素,使用了白色的文本颜色。
如果您需要在页面中使用这个样式,可以在对应的wxml文件中添加以下代码:
```html
<view class="container">
<text class="text">这是一段文本</text>
</view>
```
这里的`<view>`标签表示一个容器元素,`<text>`标签表示一个文本元素。注意要给容器元素添加`.container`样式类,给文本元素添加`.text`样式类。
阅读全文