效果:
[img]http://dl2.iteye.com/upload/attachment/0087/8700/87fc8070-6286-347d-b83f-d5d304195107.png[/img]
样式:
html:
[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>