分類  >  Web前端 >

div兌現帖子的推薦、置頂、精華

tags:    時間:2013-12-10 00:41:50
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>

推薦閱讀文章

Bookmark the permalink ,來源:互聯網