div 置顶
场景:div兑现帖子的推荐、置顶、精华
div实现帖子的推荐、置顶、精华
效果:

样式:
html:
div实现帖子的推荐、置顶、精华
效果:
样式:
<style type="text/css"> .tj_div{ display: block; position:absolute; left:16%; top:28%; margin-left: auto; margin-right: auto; width: 150px; height: 90px; background-image:url(images/state/atj.gif);/*推荐*/ z-index:-2;/*下拉列表的z-index是10,所以这两个样式中的z-index必须小于10*/ -moz-opacity: 0.9; opacity:.90; filter: alpha(opacity=90); } .jh_div{ display: block; position:absolute; left:56%; top:18%; margin-left: auto; margin-right: auto; width: 150px; height: 90px; background-image:url(images/state/ajh.gif);/*精华*/ z-index:-2;/*下拉列表的z-index是10,所以这两个样式中的z-index必须小于10*/ -moz-opacity: 0.9; opacity:.90; filter: alpha(opacity=90); } .zd_div{ display: block; position:absolute; left:35%; top:5%; margin-left: auto; margin-right: auto; width: 150px; height: 90px; background-image:url(images/state/azd.gif);/*置顶*/ z-index:-2;/*下拉列表的z-index是10,所以这两个样式中的z-index必须小于10*/ -moz-opacity: 0.9; opacity:.90; filter: alpha(opacity=90); } .content_div{ display: block; position:relative; left:0; top:0; margin-left: auto; margin-right: auto; width: 100%; height: auto; z-index:0; } </style>
html:
<td align="left" > <div style="position:relative"> <!-- state==1,是普通主题,开始 --> <c:if test="${topicBean.to.state==1 }"> <div class="content_div" style="margin-top: 0px;"> ${topicBean.to.content } <br> <br> <br> <!-- 顶踩开始 --> <div class="digg" id="digg" style=" margin-left: auto;margin-right: auto;"> </div> <!-- 顶踩结束--> <!-- 管理员置顶 --> <c:if test="${topicBean.to.isATop==1}"> <div class="zd_div"> </div> </c:if> <!-- 管理员推荐 --> <c:if test="${topicBean.to.isAChoose==1}"> <div class="tj_div"> </div> </c:if> <!-- 管理员精华 --> <c:if test="${topicBean.to.isAGood==1}"> <div class="jh_div"> </div> </c:if> </div> </c:if> <!-- state==1,是普通主题,结束--> <!-- state==2,是投票,开始 --> <c:if test="${topicBean.to.state==2 }"> <p><img src="images/topictype/polls.png" title="投票" alt="投票"/>投票:<font style="font-weight: bold;">${topicBean.tv.voteTitle }</font></p> <c:if test="${not empty topicBean.tv.voteDescribe}"> <p> ${topicBean.tv.voteDescribe} </p> </c:if> <div id="optionDiv" style="margin-left: auto;margin-right: auto;"></div> <div id="optionDivEd" style="margin-left: auto;margin-right: auto;"></div> </c:if> <!-- state==2,是投票,结束 --> </div> </td>