CSS 商品的列表布局和网格布局的切换

最新推荐文章于 2024-04-29 13:33:45 发布
最新推荐文章于 2024-04-29 13:33:45 发布
阅读量5.7k 收藏 3
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxingxingge/article/details/79929240
版权

最近做的一个项目是需要商品不同的形式排列,一开始使用的是a标签直接跳转到另一个页面,后来发现可以用在同一个页面切换class实现,下面看下我是如何实现的

因为两种页面展示的数据都是一样的,看下效果图

 

先写好两个不同的css布局:

我这里使用的是scss,只有最外层的样式名称不一样,里面的样式名称都是一样

给按钮设置点击事件,使用三目运算方法切换最外层的 class 和 图标 就好

attr()方法的使用:

 

 

xingxingxingge
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
姜哥手把手教你做网站（6）：展示商品列表
姜哥的Django匠人生活~
03-12 1100
在前一讲中，姜哥带着大家一起建立了我们的商品模型，并且，利用自带的控制台，生成了一条测试数据。 那么，接下来，我们当然是希望能够在页面上，将商品展示出来咯！比如我随便打开京东的一个页面： 这个就是我们希望的商品列表页面，当然我们不需要这么复杂，先实现最简单的功能，就是把商品先放出来，那就开始动手吧。 在Django框架下开发一个页面，需要以下几个步骤： 1、设置一个url拦截器，也就...
轻松玩转列表与网格视图转换：List2Grid项目深度解读
最新发布
gitblog_00025的博客
06-12 642
轻松玩转列表与网格视图转换：List2Grid项目深度解读 项目地址:https://gitcode.com/leejayID/List2Grid 在这个数字化时代，电商平台以其直观的商品展示方式吸引了大量用户。其中，商品页面的展示形式至关重要——既要有清晰的信息呈现（如列表），也要具备视觉吸引力（如网格）。今天，让我们一同探索一款能轻松实现列表视图到网格视图无缝切换的开源项目—List2Grid...
【前端】Vue.js实现网格列表布局转换
nqxcwl的专栏
11-02 1339
网格列表布局转换 实现效果： 实现代码及注释： <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> ...
CSS实现jd的商品列表，附完整代码！
u013179804的博客
04-29 302
今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。OK，咱们的效果如下。那来一起看看代码吧。
【CSS】网格布局（简单布局、网格合并、网格嵌套）
HYY的博客
08-08 2343
CSS网格布局是一种强大的CSS布局系统，它简化了页面的布局和定位，同时适应不同屏幕大小的需求。通过使用grid-row和等属性，我们可以轻松地实现简单到复杂的网格布局。网格合并和嵌套使得在网格中创建复杂的布局变得更加简单和灵活。
前端练习项目——品优购 Day9 列表页搭建
Acc222222的博客
08-05 597
（1）列表页面是新的页面，我们需要新建页面文件list.html。 （2）他因为列表页的头部和底部与index.html基本一致，所以要把首页中的头部和底部结构复制过去。 （3）头部和底部的样式也需要，因此list.html还需要引入common.css （4）需要新的list.css样式文件，这是列表页专门的样式文件。 （5）还需要把meta的内容移植过来，更改一下即可。 <meta name="description" content="品优购 - 亚洲较大的网上交易平
【SWT】滚动容器实现商品列表样式
小子宝丁的博客
07-19 294
依赖 `ScrolledComposite` ，`Rowlayout` ， `GC` 实现了一个滚动容器，该容器支持纵向滚动，横向自动适配填充。适合用于类似与商品列表等展示的场景。
jQuery网格布局和列表布局切换特效
06-24
总之，jQuery网格布局和列表布局切换特效是通过jQuery的DOM操作和CSS类切换来实现的，结合CSS Grid和Flexbox布局，可以轻松地在两种布局模式间切换，为用户提供更灵活的界面体验。在实际应用中，开发者可以根据项目...
jQuery网格布局列表布局切换特效
06-10
总的来说，"jQuery网格布局列表布局切换特效"是前端开发中提升用户体验的一个实用技巧，它利用jQuery的灵活性和CSS的强大功能，为用户提供了一种动态调整内容展示方式的手段。理解和掌握这一技术，对于创建用户友好...
jQuery网格布局和列表布局切换特效特效代码
03-20
网格布局是一种将页面内容组织成多行多列的方式，常用于展示类似的数据项，如商品展示、图片展示等，有助于提高信息的可读性和视觉吸引力。而列表布局则更侧重于线性展示信息，每个项目占据一整行，通常用于文本内容...
jQuery和CSS3网格和列表布局切换动画特效
12-11
"jQuery和CSS3网格和列表布局切换动画特效"就是一个旨在提升用户体验的工具。这个特效利用了jQuery库的强大力量以及CSS3的新特性，为用户提供了从网格布局平滑过渡到列表布局的动态视觉体验。 首先，jQuery是一个...
仿淘宝列表、网格布局之间的切换
10-04
仿淘宝列表、网格布局之间的切换，用RecyclerView和ToolBar实现的，并对适配器进行了简单的封装
详解Vue demo实现商品列表的展示
12-29
Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现： 简单CSS样式： <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img{ width: 200px; height: 150px; } </style> html： <div xss=removed id=box> <ul> <
CSS3商品图片网格布局动画特效特效代码
03-20
对于这个特定的“CSS3商品图片网格布局动画特效”，它利用了CSS3的:hover伪类来实现鼠标悬停时的图片切换效果。当用户将鼠标光标悬停在图片上时，会触发一个动画，使得原本隐藏的图片逐渐显现，与当前显示的图片进行...
微信小程序商城项目实战(第三篇:商品列表)
Jiangxun9390的博客
06-22 2188
Tabs。
css布局与“切图”
j2ee开发的专栏
12-03 320
欢迎访问: www.ptcms.cnCSS布局与“切图” 很多朋友问到关于在网页设计中，特别是使用CSS布局的时候，如何切图的问题，今天就来说说这个问题。 在过去，使用表格布局的时候，通常是整个页面在Photoshop或者Fireworks中设计好，然后使用“切片”工具，在页面上分割，生成有表格搭建的HTML，然后再把需要的图像留下来，把需要填写文字的单元格中的图像去掉，填上相应的文字...
8-11 商品列表展示之前端开发 及 HTML响应式标签的说明
Shawn的博客
09-05 1330
1、productmanagement.html <!DOCTYPE html> <html> <head> <!-- 页面用utf-8编码 --> <meta charset="utf-8"> <!-- 兼容IE --> <meta http-equiv="X-UA-Compatible" content="IE=...
简单的商品列表展示
weixin_41185356的博客
12-18 5122
一个简单的java-web项目，初学java-web开发。 用Jsp和数据库写的一个简单的商品列表展示，展示了商品详情和浏览记录。
产品展示效果html,CSS3商品展示网格布局动画特效
weixin_29278805的博客
06-03 789
这是一款CSS3商品展示网格布局动画特效。该特效中，以网格布局的方式来展示各种商品。当鼠标hover商品图片时，通过css3 transform来切换不同的图片，效果非常炫酷。使用方法HTML结构该CSS3商品展示网格布局的HTML结构如下： 20% OffJacket$45.00$36.00......CSS样式然后添...
用bootstrap4和jquery写一个左右布局的tab切换
06-10
可以参考以下代码实现： HTML代码： ```html <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#tab1">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#tab2">Tab 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#tab3">Tab 3</a> </li> </ul> </div> <div class="col-md-9"> <div class="tab-content"> <div class="tab-pane fade show active" id="tab1"> <h2>Tab 1 Content</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacinia ipsum. Sed euismod, lorem eget mattis sodales, mi lectus pharetra felis, sit amet porttitor sapien odio vel augue. Sed ultrices, est vitae bibendum sollicitudin, lacus justo interdum turpis, sed tincidunt nulla nibh ac tellus. </p> </div> <div class="tab-pane fade" id="tab2"> <h2>Tab 2 Content</h2> <p>Quisque erat mi, condimentum in dui eget, rutrum vulputate libero. Quisque commodo dui at ex tristique, in ultrices ligula fermentum. Sed varius, sapien id vulputate sagittis, sapien augue consequat nunc, vel pellentesque arcu metus id elit. Nullam malesuada ligula eu risus porttitor, quis tincidunt sapien feugiat. </p> </div> <div class="tab-pane fade" id="tab3"> <h2>Tab 3 Content</h2> <p>Aliquam magna enim, rhoncus vel malesuada in, tristique eget nulla. Sed euismod mauris vel magna aliquet, vitae bibendum elit auctor. Phasellus ornare, lacus sit amet auctor luctus, urna nisi laoreet justo, at euismod nisl risus nec tellus. Duis finibus efficitur ex, at commodo sem pellentesque eu. </p> </div> </div> </div> </div> </div> ``` CSS代码： ```css .nav-pills .nav-link.active { background-color: #007bff; color: #fff; } ``` JS代码： ```js $(function() { $('.nav-pills a').on('shown.bs.tab', function(event) { var tabName = event.target.hash; $('html, body').animate({ scrollTop: $(tabName).offset().top }, 500); }); }); ``` 在这个例子中，我们使用了Bootstrap 4的网格系统来实现左右布局，并使用了jQuery和Bootstrap的Tab插件来实现选项卡切换。在CSS中，我们设置了选项卡被选中时的样式。在JS中，我们使用了jQuery的animate()方法来实现选项卡切换后页面滚动到选项卡所在位置的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值