主要代码：

GoodsForm.java

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

GuestController .java

List
    
      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
    

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

    		
     	
      	
      		
      
       
        1F	
        			
        
         粮食	
         
          更多商品>>