1、什么是商品列表页面？

商品列表页面（有时称为 PLP 或类别登录页面）是网站上的搜索过滤器根据不同类别显示的产品页面，访问者可以在显示的页面里找到他们感兴趣的更多信息，也可以将看到的产品和服务等项目添加到购物车。

优化商品列表页面能够优化用户体验。

一方面，针对不同意图的购物者进行定制页面，有些买家是带着明确的购买意图来访问网站的，这些人希望查看他们最关注的东西，例如，想买山地自行车的用户可能不会关注到道路自行车。

另一方面，有些访问者则只是喜欢产品列表页面将他们偏好的产品和服务筛选出来。

我们的商品列表页面不仅仅是为用户导航和用来提升用户体验。通过优化我们的产品列表页面，能够提升网站的 SEO、增加用户参与度并提高您的转化率！

2、商品列表模板结构

所有列表页面模板布局主要分三部分，页眉/页中/页脚。（页眉和页脚可以参考之前的内容）

商品列表主要以图文混排形式出现

下面是悦轩饼家商品列表展示部分：

html部分：

<!-- 图文混排 --><div class="container"><h1>热卖商品</h1><ul><li><img src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li></ul><ul><li><img src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li><li><img src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp"><p><span>￥198.00</span></p><p>悦轩饼家蛋糕/提来米苏</p><button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><buttontype="button">加入购物车</button></a></li></ul></div>

css部分：


/* 图文混排样式 */
ul {margin: 20px 0 50px;display: flex;justify-content: space-between;
}ul>li {margin: 4px;width: 270px;list-style: none;
}ul>li>img {width: 270px;border-radius: 5px;
}
ul>li>img:hover{box-shadow: 1px 1px  3px 3px gainsboro;opacity: 0.5;
}ul>li>p>span {color: red;
}ul>li>p:nth-of-type(2) {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 10px 0;color: #333333;
}ul>li button {width: 130px;height: 30px;margin: 0 2.5px;background-color: white;border: 1px solid gray;border-radius: 5px;
}ul>li>button>span {margin: 0 10px;color: red;
}
ul>li button:hover{background-color:#ff6a00;color: white;border-color: #ff6a00;
}
ul>li>button:hover span{color: white;
}

效果图：

上面用弹性布局进行排列，有一定的缺陷；

下面是用ul、li浮动进行排列

html部分：

<!-- 列表 --><div class="xf_content"><div class="content"><ul class="clear"><li><a href="detail.html" target="_blank"><img src="img/cake1.jpg" /></a><p class="price">￥198.00 </p><p class="title">悦轩饼家蛋糕/提拉米苏(约2磅)</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake2.jpg" /></a><p class="price">￥169.00 </p><p class="title">悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】-</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake3.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/榴莲香雪(约2磅)-榴莲蛋糕</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake5.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/冰语琥珀下午茶（8英寸）【无贺卡、巧克力牌、蜡烛、生日帽】-多汁鲜芒美味可口，冷冽薄荷浪漫清新</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake2.jpg" /></a><p class="price">￥99.00 </p><p class="title">悦轩饼家蛋糕/爆浆榴莲蛋糕(约2磅)-榴莲蛋糕</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake5.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/冰语琥珀下午茶（8英寸）【无贺卡、巧克力牌、蜡烛、生日帽】-多汁鲜芒美味可口，冷冽薄荷浪漫清新</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html" target="_blank"><img src="img/cake1.jpg" /></a><p class="price">￥198.00 </p><p class="title">悦轩饼家蛋糕/提拉米苏(约2磅)</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake2.jpg" /></a><p class="price">￥169.00 </p><p class="title">悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】-</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake5.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/冰语琥珀下午茶（8英寸）【无贺卡、巧克力牌、蜡烛、生日帽】-多汁鲜芒美味可口，冷冽薄荷浪漫清新</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake3.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/榴莲香雪(约2磅)-榴莲蛋糕</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li></li><li><a href="detail.html"><img src="img/cake2.jpg" /></a><p class="price">￥169.00 </p><p class="title">悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】-</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake5.jpg" /></a><p class="price">￥149.00 </p><p class="title">悦轩饼家蛋糕/冰语琥珀下午茶（8英寸）【无贺卡、巧克力牌、蜡烛、生日帽】-多汁鲜芒美味可口，冷冽薄荷浪漫清新</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li><li><a href="detail.html"><img src="img/cake2.jpg" /></a><p class="price">￥169.00 </p><p class="title">悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】-</p><p class="buy"><a href="#" class="collection"><span></span>收藏</a><a href="cart.html" class="add-cart" style="margin-left:-5px;"><span></span>加入购物车</a></p></li></ul></div></div><!-- 列表 end-->

css部分：

/********content**********/
.xf_content {width: 100%;padding-bottom: 102px;
}.content {width: 1251px;height: auto;margin: 0 auto;padding-top: 66px;margin-top: 78px;
}.content ul {}.content ul li {width: 282px;/* border: 1px solid #e2e2e2; */padding: 10px 10px 16px 10px;box-sizing: border-box;float: left;margin-right: 29px;margin-bottom: 18px;
}.content ul li:nth-child(4n) {margin-right: 0;
}.content ul li img {width: 100%;
}.content ul li .price {color: #ff6a00;font-size: 12px;font-weight: bolder;margin-top: 8px;
}.content ul li .title {font-size: 12px;margin-top: 10px;margin-bottom: 14px;color: #737373;overflow: hidden;text-overflow: ellipsis;white-space: nowrap
}.content ul li .buy a {display: inline-block;width: 48%;padding: 4px 0;border: 1px solid #d9d9d9;font-size: 12px;text-align: center;
}.content ul li .buy .collection {color: #888;
}.content ul li .buy .collection span {display: inline-block;width: 16px;height: 16px;background-image: url(../img/ico_heart_d.png);margin-right: 10px;vertical-align: middle;
}.content ul li .buy .add-cart {color: #000;
}.content ul li .buy .add-cart span {display: inline-block;width: 16px;height: 16px;background-image: url(../img/ico_cart_d.png);margin-right: 10px;vertical-align: middle;
}

效果图：

悦轩饼家-商品列表样式相关推荐

悦轩饼家-购物车样式
网上关于购物车实现的代码非常多,本次的这篇文章主要是和大家分享悦轩饼家的购物车界面,有需要的小伙伴可以看一下,接下来讲解一下具体的实现. 下面是悦轩饼家购物车展示部分: html部分: <di ...
样式集（一）通用商品列表样式
上图: 上代码: // pages/choosePackage/choosePackage.js Page({data: {list:[1,2,3],},onLoad: function (optio ...
HTML .CSS实现商品列表
一.知识点 a.ul无序列表 ol有序列表 dl定义列表 b.css精灵图精灵图(通常被解释为css图像拼合.css贴图定位.css图片精灵.css雪碧图)是一种网页图片应用处理方式.其实就是就是把 ...
微信小程序——商品列表
主页面 <view class="container"><googsList goodsClassList="{{goodsClassList}}&qu ...
CSS——商品列表子菜单的实现
文章目录前言一.结构分析二.实现过程 1.HTML结构 2.CSS样式总结前言今天和大家分享的是商品列表子菜单的实现过程,这个应用在很多平台都有看到,感兴趣的小伙伴可以驻足翻阅一下~ 一. ...
17网API，item_search - 根据关键词取商品列表
点击注册获取key和secret测试 17zwd根据关键词取商品列表 API 返回值说明请求参数响应参数请求示例返回数据 ----------------------------------- ...
当当网购物车和商品列表
购物车 <!DOCTYPE html>   & ...
美多商城之商品(商品列表页)
四.商品列表页 4.1 商品列表页分析 4.1.1. 商品列表页组成结构分析 1.商品频道分类已经提前封装在contents.utils.py文件中,直接调用即可. 2.面包屑导航可以使用三级分类 ...
悬浮框_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）
简介最近温习一下HTML5+CSS3的一些特性,准备找个高仿的目标,最后选择了某宝粉丝福利页面,因为这个页面包含的元素比较多.例如:头部品牌信息悬浮.商品属性.优惠券.商品类别等. 实现效果实现效 ...

悦轩饼家-商品列表样式

1、什么是商品列表页面？

2、商品列表模板结构

悦轩饼家-商品列表样式相关推荐

最新文章

热门文章