赞
踩
最近产品中需要加入“一个列表显示样式快速切换”的功能,正好在这篇文章中看到了它的实现方式,感觉很不错。
这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局(样式)的功能。这样做的好处是不言而喻的,现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验,选择他们喜欢的样式去获取信息。
首先我们看一下最终效果
第一步:创建一个漂亮别致的边框
我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局,用它来作为我们信息显示的行和列。
HTML
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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。