帮我写一个好看的wxss样式：<view class='foot'> <button class='toCart' bindtap="goToCart">去购物车</button> <button class='favorite' >收藏</button> <button class='cart' bindtap="showOptions" >加入购物车</button> </view>

可以尝试以下wxss样式：

.foot {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFF;
padding: 20rpx;
box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.toCart {
background-color: #F5A623;
color: #FFF;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}

.favorite {
background-color: #EAEAEA;
color: #666;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}

.cart {
background-color: #FFF;
color: #666;
border: 1rpx solid #EAEAEA;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}

.cart:hover {
background-color: #F5F5F5;
}

.toCart:hover {
background-color: #FFC651;
}

.favorite:hover {
background-color: #F0F0F0;
}

相关问题

帮我写一个wxss文件：<view class='foot'> <button class='toCart' bindtap="goToCart">去购物车</button> <button class='favorite' >收藏</button> <button class='cart' bindtap="showOptions" >加入购物车</button> </view>

以下是一个简单的 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;
}

解释一下：

- `.foot`：为外层的 `view` 元素添加了一个样式类名，方便在 wxss 文件中引用。
- `display: flex`：将子元素设置为弹性布局，方便实现对齐和间距等效果。
- `justify-content: space-between`：设置主轴方向上的对齐方式为两端对齐，即让三个按钮平均分布在父元素的两侧。
- `align-items: center`：设置交叉轴方向上的对齐方式为居中对齐，即让三个按钮在垂直方向上居中对齐。
- `padding: 10px`：设置内边距，让按钮与父元素之间有一定的间距。
- `background-color: #fff`：设置背景颜色为白色。
- `.toCart`, `.favorite`, `.cart`：为三个按钮分别添加样式类名，方便在 wxss 文件中单独设置样式。
- `font-size: 16px`：设置字体大小为 16 像素。
- `color: #333`：设置字体颜色为深灰色。
- `border: none`：去掉边框。
- `background-color: transparent`：设置背景颜色为透明。
- `cursor: pointer`：设置鼠标指针为手型，表示该元素可以点击。
- `:hover`：设置鼠标悬停在元素上时的样式效果。
- `color: #f00`：设置字体颜色为红色。

写wxss文件字体保持在统一横线且大小一致：<view class='foot'> <button class='toCart' bindtap="goToCart" style="font-size: 14px;">去购物车</button> <button class='favorite' >收藏</button> <button class='cart' bindtap="showOptions" style="font-size: 11px;" >加入购物车</button> </view>

你可以在wxss文件中定义一个class来设置这些按钮的字体样式，例如：

.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;
}

这样就可以保持这三个按钮的字体在统一横线且大小一致。同时，你可以根据需要调整字体大小和其他样式属性。