更新列表的一种展现方式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{ color: #555; font-size:14px; line-height:1.7;min-width:1180px; margin:0;}
.tnc-attchment-dailog {font-size:12px !important; line-height: 13px !important;}
a{ color:#333;text-decoration:none; }
a:hover{cursor:pointer; color:#3a9ce7; text-decoration:none; transition:color 0.2s ease-in;}
.tn-doc-bg { background: #f4f4f4; }
.tn-content-bg { }
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
li{list-style:none;}
ul{margin:0;padding:0;}
/*UpdateLog
----------------------------------*/
.component-changelog .contentpaneopen{margin-left:361px;margin-bottom:50px;}
.history{background:url(../line04.gif) repeat-y 187px 0;}
.history-date h2{background:url(../icon06.jpg) no-repeat 158px 0;height:59px;font-size:25px;font-weight:normal;padding-left:45px;cursor:pointer;margin-bottom:10px;}
.history-date h2.first{margin-top:0;}
.history-date h2 a{color:#00bbff;display:inline-block;*display:inline;zoom:1;background:url(../icon08.gif) no-repeat right 50%;padding-right:17px;margin:10px 10px 0 0;}
.history-date h2 a:hover{text-decoration:none;}
.history-date ul{display:block;}
.history-date ul li{background:url(../icon07.jpg) no-repeat 180px 50px;padding:20px 0 0;zoom:1;}
.history-date ul li:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.history-date ul li h3{float:left;width:168px; _width:150px;text-align:right;padding-right:19px;color:#c3c3c3;font:normal 18px/16px Arial;cursor:pointer;margin-top:30px;}
.history-date ul li h3 span{display:block;color:#d0d0d0;font-size:12px;}
.history-date ul li dl{float:left;padding-left:41px;width:500px;padding-top: 26px;}
.history-date ul li dl dt{font-size:18px;line-height:24px;cursor:pointer;}
.history-date ul li dl dd{font-size:12px;padding-top:20px;color:#5A5A5A;line-height: 1.8em;}
.history-date ul li.green h3{color:#1db702;}
.history-date ul li.green h3 span{color:#a8dda3;}
.history-date ul li.green dl dd p{overflow:hidden;zoom:1;line-height:21px;color:#787878;}
.history-date h2.first .more-history{font-size:16px;background:transparent;margin-left:30px;}
</style>
</head>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//更新日志
jQuery.fn.slideFadeToggle = function (speed, easing, callback) {
return this.animate({ opacity: ‘toggle‘, height: ‘toggle‘ }, speed, easing, callback);
};

$(function () {
if (!$(".history").length) {
return;
}
var $warpEle = $(".history-date");
$warpEle.find("h2").click(function () {
$(this).siblings().slideFadeToggle();
});
$warpEle.find("h3").click(function () {
$(this).next().find(‘dd‘).slideFadeToggle(‘slow‘);
});
$warpEle.find("dt").click(function () {
$(this).next().slideFadeToggle(‘slow‘);
});
});
</script>
<body>
<div class="lx-container">
<div class="component-changelog">
<div class="contentpaneopen">
<div class="history">
<div class="history-date">
<h2 class="first"><a href="#nogo">2014年</a></h2>
<ul class="first">
<li class="green">
<h3>8.1<span>2014</span></h3>
<dl>
<dt>v2.0</dt>
<dd><span>1.xxxxxx<br />
2. xxxxxx<br />
3. xxxxxx<br />
</span></dd>
</dl>
</li>
<li>
<h3>02.28<span>2014</span></h3>
<dl>
<dt>v1.0.39</dt>
<dd><span>1. 功能增强:HTML编辑器中增加插入代码片段的功能<br />
2. 功能增强:HTML编辑器增加显示页面源代码功能<br />
3. 体验改进:给异步加载的页面增加等待效果<br />
</span></dd>
</dl>
</li>
<li>
<h3>02.26<span>2014</span></h3>
<dl>
<dt>v1.0.36</dt>
<dd><span>1. 功能增强:提高了前端页面的运行效率,解决了IE8浏览器下部分页面响应慢的问题<br />
2. 功能增强:后台圈子管理增加按部门搜索的功能<br />
3. 体验改进:调整知识库页面知识树的排序<br />
</span></dd>
</dl>
</li>
</ul>
</div>
<div class="history-date">
<h2><a href="#nogo">2013年</a></h2>
<ul>
<li>
<h3>12.27<span>2013</span></h3>
<dl>
<dt>v1.0.0</dt>
<dd><span>1.我和我的小伙伴们都惊呆了! </span></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

时间: 2024-08-06 22:30:55

更新列表的一种展现方式的相关文章

CSS4种展现方式

1嵌入式,直接写到网页中 <style type="text/css"> css样式 如: p{ color:red;}</style> 2.链接式 <style href="..../xx.css" type="text/css"> </style> 3.引入式 <style type="text/css"> @import url(.../xxx.css) <

Android攻城狮 Android中更新UI的几种方式

Android中更新UI的几种方式: 1. Activity 的 runOnUiThread() 2. Handler 的 post() 3. Handler 的 sendMessage() 4. View 的 post() 1 public class FiveActivity extends Activity { 2 3 private TextView textView; 4 5 private Handler handler = new Handler() { 6 public void

一个系统存储由memcache+mysql组成,写一条数据的时候,更新memcache有几种方式,

一个系统存储由memcache+mysql组成,写一条数据的时候,更新memcache有几种方式,优缺点是什么? 缓存更新(不仅仅是memceche)有2种策略 一种是写时更新 一种是读时更新 一.写时更新是指  写db成功以后  同时更新缓存 , 能有效减少穿透  但是  容易引起数据的不一致 二.读时更新是说 写完db  删除缓存,等到 需要读得时候  在重建缓存, 一致性可以保证  但是  穿透大,容易给db造成压力

使用DataSet Datatable 更新数据库的三种方式

1:自动生成命令的条件 CommandBuilder 方法a)动态指定 SelectCommand 属性b)利用 CommandBuilder 对象自动生成 DataAdapter 的 DeleteCommand.InsertCommand 和 UpdateCommand.c)为了返回构造 INSERT.UPDATE 和 DELETE .SQL CommandBuilder 必须执行 SelectCommand.即:必须额外经历一次到数据源的行程,这可能会降低性能.这也是自动生成命令的缺点.d)

Android更新UI的四种方式

前言 相信初学Android开发的朋友来说,应该都会遇到一个问题,我们开启了一个线程,在这个线程里面我们进行了更新UI的操作,也许是在TextView显示了一行文字,也许是改变了ImageView显示的图片,虽然只是看似简单并且正确的操作,但是Android系统让你的程序光荣的崩溃了,并且你还不知道为什么错,这才是最痛苦的,曾经深受这种痛苦的我,为了不再让这种痛苦蔓延下去,我决定把更新UI的几种方法给大家好好说说,让大家在Thread的run方法中可以随心所欲的更新UI,再也不用痛苦了. 实现

探讨android更新UI的几种方法(转)

作为IT新手,总以为只要有时间,有精力,什么东西都能做出来.这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽.我们会发现,自己越来越消极怠工,只是在无意义的敲代码,敲的还是网上抄来的代码,如果不行,继续找. 这就是项目进度没有规划好而导致的. 最近在做有关蓝牙的项目,一开始的进度都安排得很顺利,但是因为测试需要两部手机,而且还要是android手机,暑假已经开始了,同学们都回家了,加上我手机的蓝牙坏了,导致我的进度严重被打乱!而

NEt中MVC的View和Controller的几种传值方式

1: ViewData传值方式ViewData的生命周期和View相同, 只对当前View有效.   ViewData["zd"] = dfdfd2:TempData传值方式   可以跨Action传递   TempData的数据至多只能经过一次Controller传递, 并且每个元素至多只能被访问一次,     例如一个用法为,抛出一个异常.跳转到error页面public ActionResult Index3(){      TempData["tempIndex&qu

探讨android更新UI的几种方法

作为IT新手,总以为只要有时间,有精力,什么东西都能做出来.这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽.我们会发现,自己越来越消极怠工,只是在无意义的敲代码,敲的还是网上抄来的代码,如果不行,继续找. 这就是项目进度没有规划好而导致的. 最近在做有关蓝牙的项目,一开始的进度都安排得很顺利,但是因为测试需要两部手机,而且还要是android手机,暑假已经开始了,同学们都回家了,加上我手机的蓝牙坏了,导致我的进度严重被打乱!而

【转】探讨android更新UI的几种方法----不错

原文网址:http://www.cnblogs.com/wenjiang/p/3180324.html 作为IT新手,总以为只要有时间,有精力,什么东西都能做出来.这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽.我们会发现,自己越来越消极怠工,只是在无意义的敲代码,敲的还是网上抄来的代码,如果不行,继续找. 这就是项目进度没有规划好而导致的. 最近在做有关蓝牙的项目,一开始的进度都安排得很顺利,但是因为测试需要两部手机,而且还