利用css和JSTL以及EL表达式生成颜色不一样的表格

对于一些网页,在管理员进行操作的时候,为了让界面更加的漂亮和富有操作性,我们需要经常的添加一些美化的效果,在这里呢,就教给大家一些很好的小技巧,让页面稍微好看一点,当然我的什么了能力不太好,所以配色不是他擅长,如果你擅长配色,我相信表格效果会很好看

进入正题:
数据库的代码这个地方我就不提供了,我们这里的核心关键点在如何显示,如果利用javascript去显示的话,那么会非常的复杂,所以我们这个地方采用更简单的方式,这也是代码的可取之处

listCategory.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ include file="/manage/Header.jsp" %>

 <table border="1" padding="5" align="center"> 

 <tr>
   <th>序号</th>
   <th>分类名称</th>
   <th>描述</th>
   <th>操作</th>
 </tr>

  <c:forEach items="${cs}" var="u" varStatus="vs">

     <tr class="${vs.index%2==0?'odd':'even' }">

           <td>${vs.count}</td>

           <td>${u.name }</td>

           <td>${u.description }</td>

           <td><a href="#">编辑</a><a href="#">删除</a></td>
     </tr>

  </c:forEach>  

  </table>  


  </body>
</html>

css部分代码:

body{


    text-align:center;
    font-szie:12px;
}

table{



    font-size:12px;
}

.odd{

    background-color:#c3f3c3;
}
.even{

    background-color:#f3c3f3;

}

最终的显示效果:
这里写图片描述

大家可以尝试去自己先写一下,如果哪里有问题的话,可以给我留言,我会及时的回复,当然过一段时间我也会把这个工程大源代码提供给大家,不过现在还没完工

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值