`
Franciswmf
  • 浏览: 799889 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

    网页局部div随滚动条置顶滚动

    在实现div置顶滚动的效果时,主要涉及到CSS的`position`属性。`position`属性有多个值,如`static`(默认值)、`relative`、`absolute` 和 `fixed`。在这里,我们需要使用 `fixed` 值,它会使元素相对于浏览器窗口...

    div实现圆角 div实现圆角

    div实现圆角 div实现圆角 div实现圆角 div实现圆角 div实现圆角

    使用div实现的单选选择控件

    本主题聚焦于“使用div实现的单选选择控件”,它是一种替代传统下拉框的选择方式,旨在提高用户体验并增加界面的可定制性。这种控件使用HTML的`&lt;div&gt;`元素和相关的JavaScript库,如jQuery,来实现类似单选按钮...

    select ——使用DIV 实现 Select

    select ——使用DIV 实现 Select js源码

    div实现九宫格,div边角光滑

    用多层div实现div的圆角光滑,有需要的可以看看

    DIV模态窗口实现

    【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...

    使用div实现的复选选择控件

    本篇将详细介绍如何使用`div`和jQuery实现一个复选选择功能。 首先,让我们了解`div`元素。`div`(division)是HTML中的一个块级元素,常用来分组其他元素,提供布局控制。它本身不具备复选功能,但可以通过CSS样式...

    div层实现showModalDialog

    div层实现showModalDialog

    DIV 实现表格布局

    在网页设计中,传统的表格布局通常使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等HTML标签来实现,但随着CSS技术的发展,我们可以通过使用`div`元素结合CSS样式来实现类似表格的布局,这被称为“CSS布局”或“DIV布局”。...

    DIV 实现showModalDialog效果,绝对赞

    要使用`div`实现类似的效果,我们需要以下几个步骤: 1. **HTML 结构**:创建一个隐藏的`div`,作为模态对话框的基础。在这个`div`内,可以添加其他元素,如标题、内容区域和关闭按钮。同时,为了实现树形效果,...

    使用jQuery加载html页面到指定的div实现方法

    一、jQuery加载一个html页面到指定的div里 ...用jquery ajax 可以实现 假设 a.html 和b.html在同一目录 b.html [removed] $(document).ready(function() { bodyContent = $.ajax({ url: "b.html", global: fals

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    用javascript css div实现模态对话框

    用javascript css div实现弹出模态对话框,盖住下面的部分,上面的透明度改变

    DIV实现弹出框

    DIV实现弹出框, 实现登录, 有关闭按钮

    DIV+CSS示例之实现选项卡

    DIV+CSS 实现选项卡DIV+CSS 实现选项卡DIV+CSS 实现选项卡DIV+CSS 实现选项卡

    JS实现div圆弧

    【标题】"JS实现div圆弧" 在网页开发中,我们常常需要对HTML元素,如div,进行样式处理,使其呈现出各种形状,其中圆弧效果是常见的一种需求。JavaScript(JS)结合CSS3可以轻松实现div元素的圆角或者部分圆弧效果...

    实现div 遮罩 frameset

    在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...

    用DIV仿iframe框架布局效果

    在这种情况下,我们可以利用CSS和JavaScript来“仿iframe”,通过DIV元素实现相同的功能。这个主题,“用DIV仿iframe框架布局效果”,将深入探讨如何使用纯前端技术来模拟一个可独立滚动的内容区域。 首先,我们...

    DIV+CSS实现三角图形

    DIV+CSS实现三角图形

    css+div实现精美导航条 横向排列下拉子菜单

    本文将详细介绍如何利用CSS和Div来实现这一目标,以及如何通过JavaScript添加动画浮动效果。 首先,我们需要理解CSS的作用。CSS是一种样式语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。...

Global site tag (gtag.js) - Google Analytics