作者：IIduce 来源：css9 时间：2009-12-21 阅读：601 次 原文链接 [收藏]
最近产品中需要加入“一个列表显示样式快速切换”的功能，正好在这篇文章中看到了它的实现方式，感觉很不错。
这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局（样式）的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。
首先我们看一下最终效果
第一步：创建一个漂亮别致的边框
我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局，用它来作为我们信息显示的行和列。
HTML
<ul class="display">
<li></li>
<li></li>
</ul>
CSS
提示：通过使用不同灰色的边框实现了一个漂亮别致的边框效果
ul.display {
float: left;
width: 756px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #333;
border-right: 1px solid #333;
background: #222;
}
ul.display li {
float: left;
width: 754px;
padding: 10px 0;
margin: 0;
border-top: 1px solid #111;
border-right: 1px solid #111;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
第二步：为内容添加样式
在每个列表项中，嵌套一个div作为内容的容器。
HTML
<li>
<div class="content_block">
<a href="#"><img src="sample.gif" alt="" /></a>
<h2><a href="#">Image Name</a></h2>
<!--escription here--></div></li>
CSS
代码
ul.display li a {
color: #e7ff61;
text-decoration: none;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px; /*--The left padding keeps the
content from flowing under the image--*/
font-size: 1.2em;
}
ul.display l
