为一个盒子绑定动态样式,当其中变量dizhilong给的值>20时,盒子高度变为30rpx
时间: 2023-06-05 14:08:13 浏览: 45
可以使用如下代码实现:
```css
.box {
width: 100px;
height: 20rpx;
background-color: #CCC;
}
.box[dizhilong>20] {
height: 30rpx;
}
```
其中,`[dizhilong>20]` 表示当变量 `dizhilong` 的值大于 20 时,应用该样式。
相关问题
当页面高度为850rpx时 固定定位要设置多少才能一直保证在底部
如果您想要一个元素始终固定在底部,可以使用CSS的`position: fixed`属性。对于一个高度为850rpx的页面,您可以将tabbar的`bottom`属性设置为0,这将会将其固定在页面底部。所以,您的CSS代码可以这样写:
```
.tabbar {
height: 100rpx;
display: flex;
background-color: gold;
width: 100%;
position: fixed;
bottom: 0;
.resetting {
height: 70rpx;
width: 40%;
background-color: #FFFFFF;
border: 1rpx solid red;
border-radius: 40rpx;
}
.complete {
height: 70rpx;
width: 40%;
background-color: rebeccapurple;
color: #FFFFFF;
border-radius: 40rpx;
}
}
```
这样,您的tabbar将会始终固定在页面底部。
作为uniapp开发,使用了<view class="uni-list-cell">,把行高设置为30rpx
可以通过在样式中设置height属性,将行高设置为30rpx。具体步骤如下:
1. 在view标签上添加class属性,值为uni-list-cell,这样可以使该view样式与uni-list-item相同,达到和uni-list-item一样的效果。
2. 在该view标签的样式中添加height属性,值为30rpx,即可将行高设置为30rpx。
示例代码如下:
```html
<template>
<view>
<view class="uni-list-cell" style="height:30rpx;">这是一行内容</view>
</view>
</template>
<style>
.uni-list-cell {
display: flex;
flex-direction: row;
align-items: center;
padding: 20rpx;
background-color: #fff;
border-bottom: 1rpx solid #eee;
box-sizing: border-box;
}
</style>
```