小程序样式之商品分类

效果图如下

 wxml代码：

<!--左侧栏-->
<view class="nav_left">
    <view class="nav_left_items">A类</view>
    <view class="nav_left_items">B类</view>
    <view class="nav_left_items">C类</view>
    <view class="nav_left_items">D类</view>
    <view class="nav_left_items">E类</view>
</view>
  <!--右侧栏-->
  <view class="nav_right">
        <view class="nav_right_items">商品A</view>
        <view class="nav_right_items">商品B</view>
        <view class="nav_right_items">商品C</view>
        <view class="nav_right_items">商品D</view>
        <view class="nav_right_items">商品E</view>
        <view class="nav_right_items">商品F</view>
  </view>

wxss代码：

.nav_left{  
    /*设置行内块级元素（没使用定位）*/  
    position: absolute;  
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    text-align: center;  
  }  
   .nav_left_items{  
    padding: 16px 0;
    border-bottom: 2px solid #0f0101;  
    /*文字14px*/  
    font-size: 14px; 
  }  
  .nav_right{  
    position: absolute;  
    flex: 1;  
    top: 0;
    right:  3px;
    width: 75%;
    box-sizing: border-box;  
    text-align: center;  
  }  
   .nav_right_items{  
    border: 1px solid #0f0101;  
    font-size: 14px;
    float: right;
    width: 37.5%;
    height: 120px;
    text-align: center;  
  }