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>

• 
• 大小: 58.6 KB

• 查看图片附件