当前位置:   article > 正文

jquery css 切换,使用CSS和jQuery轻松切换网页显示样式

jquery css 切换

最近产品中需要加入“一个列表显示样式快速切换”的功能,正好在这篇文章中看到了它的实现方式,感觉很不错。

这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局(样式)的功能。这样做的好处是不言而喻的,现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验,选择他们喜欢的样式去获取信息。

首先我们看一下最终效果

e5dc5779988dc41b9dcf536a0fb3e170.png

第一步:创建一个漂亮别致的边框

我们首先通过一个无序列表标签(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

Image Name

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/707651
推荐阅读
相关标签
  

闽ICP备14008679号