div实现帖子的推荐、置顶、精华

效果:

[img]http://dl2.iteye.com/upload/attachment/0087/8700/87fc8070-6286-347d-b83f-d5d304195107.png[/img]
样式:
<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值