这是两个按钮的wxss代码:.button { width:18.75%; text-align:center; margin: 0% 0% 0% 1%; padding:0rpx 20rpx 0rpx 20rpx; height: 80rpx; color: white; border-radius: 10rpx; line-height: 75rpx; background-color: #07c160; } .button_right{ width:18.75%; text-align:center; margin: 0% 0% 0% 25.75%; padding:0rpx 20rpx 0rpx 20rpx; height: 80rpx; color: white; border-radius: 10rpx; line-height: 75rpx; background-color: #07c160; } 里面有大量重复的部分,差异主要是位置不同。请优化这段代码
时间: 2024-02-28 10:53:12 浏览: 19
可以将两个类中重复部分提取出来,放到一个公共的类中,然后在两个类中分别引用这个公共类即可,如下所示:
```
.button, .button_right {
width: 18.75%;
text-align: center;
padding: 0rpx 20rpx 0rpx 20rpx;
height: 80rpx;
color: white;
border-radius: 10rpx;
line-height: 75rpx;
background-color: #07c160;
}
.button {
margin: 0% 0% 0% 1%;
}
.button_right {
margin: 0% 0% 0% 25.75%;
}
```
这样就可以避免代码中的大量重复,同时也可以提高代码的可维护性。
相关问题
帮我写一个漂亮的wxss文件,按钮带不同颜色:.button { display: inline-block; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; padding: 10px 20px; border: none; background-color: #f5f5f5; color: #333; } .toCart { font-size: 14px; } .favorite { font-size: 14px; } .cart { font-size: 14px; }
好的,以下是一个漂亮的wxss文件,其中的按钮带有不同的颜色:
```
.button {
display: inline-block;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.toCart {
color: #fff;
background-color: #2ecc71;
}
.favorite {
color: #fff;
background-color: #3498db;
}
.cart {
color: #333;
background-color: #f5f5f5;
}
```
在这个文件中,`.button`是所有按钮的共同样式,`.toCart`、`.favorite`和`.cart`是分别对应三个不同的按钮,分别设置了它们的颜色和背景色。另外,我还添加了`border-radius`属性来设置按钮的圆角,使其看起来更加美观。
帮我写带有不同颜色边框的wxss文件:.foot { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #fff; } .toCart, .favorite, .cart { font-size: 16px; color: #333; border: none; background-color: transparent; cursor: pointer; } .toCart:hover, .favorite:hover, .cart:hover { color: #f00; }
当您说 "帮我写" 时,我假设您需要编写一个带有不同颜色边框的wxss文件,如下所示:
```
.foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #fff;
border: 2px solid #f00;
}
.toCart, .favorite, .cart {
font-size: 16px;
color: #333;
border: none;
background-color: transparent;
cursor: pointer;
border: 1px solid #333;
}
.toCart:hover, .favorite:hover, .cart:hover {
color: #f00;
border-color: #f00;
}
```
在这个wxss文件中,.foot类有一个红色的2像素边框。.toCart, .favorite, .cart类有一个1像素的黑色边框,并且在hover时,边框颜色也会变为红色。