思洋互动网站建设学前班

设计列表

列表是网页陈述信息的一种方式，是由一定格式的文字和图片元素构成的。在静态页面中可以设计列表的内容、列表的嵌套等。但是，对于列表的其他一些特性控制起来相对困难。本章将讲解如何使用jQuery更有效地控制列表。

1  控制列表宽度

在实际应用中，创建列表有多种不同的形式。在这里列举两种创建形式：一是直接使用HTML标记中的<OL>或者搭配使用<UL>与<LI>创建列表；二是使用<DIV>的嵌套来创建。下面将讲解以这两种形式创建的列表如何控制列表宽度。
 

2  参差不齐的列表

在创建列表的时候，由于不同列表项的文字内容不同，必然造成列表项宽度不同。例如下面这个静态页面：

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

 

结果如图4.1所示。

图4.1  列表中宽度不同的列表项

这样的列表在页面中占用大量的空间，而且列表项长度参差不齐，影响页面效果。在页面布局中其他部分必须要适应这种列表宽度来安排，不能做到灵活布局。对于这样的问题，可以用jQuery来解决。jQuery控制列表的宽度往往有两种解决方法，下面依次进行讲解。