8-6 首页分类栏按样式循环显示

GoodsForm.java中的主要代码:

//添加一个计数和一个颜色的变量
    private String count;
    private String color;

GuestController .java中实现初始化及循环的主要代码:

List<GoodsForm> commodityType = goodsService.getType();
        goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
            //在页面初始化以前用size()方法对商品类型commodityType计数，计算出有多少类型
        int a=commodityType.size();
            //使用循环设置Count的值为i+F  ************  即在前台能够显示文本1F
        for(int i=1;i<=a;i++){
            commodityType.get(i-1).setCount(i+"F");
             
        }
              //使用循环设置Color的值为"columnT-"+(j%6+1)  ****即在前台能够显示文本相似columnT columnT-1  是css中定义的样式
                //j%6+1为控制j为1到6的循环输出
        for(int j=0;j<a;j++){
            commodityType.get(j).setColor("columnT"+" "+"columnT-"+(j%6+1));
        }
        model.addAttribute("goodsForm", goodsForm);
        model.addAttribute("commodityType",commodityType);

style.css主要设置显示的样式以及背景颜色

.main{ background: #fff; padding-top: 15px; padding-bottom: 15px;}
.columnT{ border-bottom:solid 1px;}
.columnT i{ width: 44px; height: 60px; vertical-align: middle; margin-right: 15px; font-size: 18px; text-align: center; line-height: 44px}
.columnT a{ float: right; margin-top: 20px; font-size: 14px;}
.columnT-1{ border-color: #fac132;}
.columnT-1 i{ background-position: 0 -40px; color: #fac132}
.columnT-2{ border-color: #94562c;}
.columnT-2 i{ background-position: -50px -40px; color: #94562c}
.columnT-3{ border-color: #ef3799;}
.columnT-3 i{ background-position: -100px -40px; color: #ef3799}
.columnT-4{ border-color: #1acbe5;}
.columnT-4 i{ background-position: -150px -40px; color: #1acbe5}
.columnT-5{ border-color: #ce2404;}
.columnT-5 i{ background-position: -200px -40px; color: #ce2404}
.columnT-6{ border-color: #13713f;}
.columnT-6 i{ background-position: -250px -40px; color: #13713f}

 index.html中的主要代码：

<div class="container main" th:each="typeInfo,sts:${commodityType}">
     
    <div th:class="${typeInfo.color}">
    <!--th:class 等同于class，只是class后要存放一个存放接收后台传来的一个变量时要用th:class  -->
    <!--${typeInfo.color}就是接收后台设置的color变量      例： columnT columnT-1   -->
     
    <i class="yh"><span th:text="${typeInfo.count}">1F</span></i>
    <!--${typeInfo.count}就是接收后台设置的count变量      用于前台显示   -->  
     
    <span class="h4 yh" th:text="${typeInfo.commodityTypeName}">粮食</span>
    <a th:href="@{initGoods(commodityTypeId=${typeInfo.commodityTypeId})}">更多商品>></a>
</div>