思洋互动网站建设学前班

列表的显示与收缩

本节主要介绍列表的显示与收缩。在很多网站中都会出现类似的网页特效，即页面加载完成后，某一部分只显示大的标题。当把鼠标移动到标题上时，会在标题下动态出现列表信息项。例如，网站信息、产品分类说明等都可以使用这种效果。

4.5.1  占用页面空间的静态列表

当需要对页面中的某些信息进行分项描述时，列表是最有效的手段。但是，在静态页面中过分使用列表会占用大量空间，而且不易布局，影响页面美观性。静态页面代码及CSS样式设定如下。

CSS样式设定：

1. 1 <style type="text/CSS">     
2. 2  ul{list-style:none;}      
3. 3  .menu{position:relative;width:300px;padding:0px;}      
4. 4  .menu ul{display:block;background:#fefefe;border:1px solid #ddd;width:      
5.     300px;padding:5px;margin:0px;}      
6. 5  .menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}  
7. 6 </style> 

 

HTML代码：

1. 1  jQuery特点<br/>     
2. 2             <ul class="content">     
3. 3                 <li>jQuery 是一个 JavaScript 库。</li> 
4. 4                <li>jQuery 极大地简化了 JavaScript 编程。</li> 
5. 5                <li>jQuery 很容易学习。</li> 
6. 6                <li>jQuery 拥有供 AJAX 开发的丰富函数（方法）库。</li>     
7. 7             </ul>    

 

这种通过HTML标记产生的静态页面如图4.8所示。

图4.8  静态显示列表