思洋互动网站建设学前班

二、CSS平铺显示与列表显示布局的切换

所谓“CSS平铺显示”，就像地面砖一样，一块一块排列的。

“CSS列表显示”就是一列一列的显示。
广州网站建设,网站建设,广州网页设计,广州网站设计

上面两张图截自demo。

您可以狠狠地点击这里：平铺显示与列表显示布局的切换demo

demo测试方法就是点击类似于下面标示的图标按钮（下同）：

原理简述：

实现的原理说穿了，很简单，就是使用CSS切换列表元素父标签的class，不同的class对应不同的布局方式。举个简单的例子吧：

如下样式代码：

1. ul.repeat li{width:45%; float:left;}  
2.  

则

1. <ul><li>第一段</li><li>第二段</li></ul> 
2.  

就是列表显示，而

1. <ul class="repeat"><li>第一段</li><li>第二段</li></ul> 
2.  

就是平铺，两者的差别仅仅在于ul的class不同而已。

本文下面两个显示的切换也是同样的原理，至于细节，您可以参见demo页面显示的代码，相信不难理解。
广州网站建设,网站建设,广州网页设计,广州网站设计