微信小程序之GoodsAction 商品导航

一、简介：

写这篇文章主要是讲解这个GoodsAction 商品导航的样式是怎么写的，让我们可以根据这个样式写出属于自己的GoodsAction 商品导航。

二、效果图：

三、素材图：

四、代码分解：

让图片与文字一个在上一个在下，且让图片与文字上下左右居中布局。
wxml：

  
  留言

wxss：

.bottom_liuyan{
  width: 45%;
  height: 100rpx;
  background-color: white;
  display: flex;
  /* 上下布局 */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 左右居中 */
  align-items: center;
}
.bottom_image{
  width: 60%;
  height: 60%;
}
.bottom_img{
  width: 100%;
  height: 100%;
}

五、整体代码：

wxml：

  
    
      
      留言
    
    
      
      购物车
    
  
  
    加入购物车
    立即购买
  

wxss：

/* 底部按钮 */
.bottom_kuangjia{
  width: 100%;
  height: 100rpx;
  position: fixed;
  right: 0;
  bottom: 0rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.bottom_left{
  width: 35%;

  height: 100rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.bottom_liuyan{
  width: 45%;
  height: 100rpx;
  background-color: white;
  display: flex;
  /* 上下布局 */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 左右居中 */
  align-items: center;
}
.bottom_image{
  width: 60%;
  height: 60%;
}
.bottom_img{
  width: 100%;
  height: 100%;
}
.gwc{
  width: 55%;
  height: 100rpx;
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom_right{
  width:65%;
  background-color: greenyellow;
  height: 100rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.add_gwc{
  width: 50%;
  height: 100rpx;
  background-color: rgb(255, 147, 115);
  border-radius: 0;
}
.buy{
  width: 50%;
  height: 100rpx;
  background-color: rgba(248, 32, 32, 0.918);
  border-radius: 0;
}