admin 管理员组

文章数量: 1184232

html 手机商品列表页面,HTML

前言

电商网站中常会以列表的形式展示商品项，这里参照一些电商网站，将通常使用的结构和样式小结如下。

商品列表项.png

小结：

1.在商品项的最外层包裹a标签，便于用户点击查看详情

a.item-block {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

2.商品(介绍)标题单行显示，溢出隐藏，超出部分显示省略号"..."

.item-title {

text-overflow: ellipsis; /*省略号*/

white-space: nowrap; /*文本会显示在同一行，直到遇到
标签为止*/

overflow: hidden; /*溢出隐藏*/

}

单行显示.png

3.商品介绍(标题)限制最大行数，超出部分显示省略号"..."

.item-title {

display: -webkit-box;

-webkit-line-clamp: 2; /*行数*/

-webkit-box-orient: vertical

本文标签： html 手机商品列表页面 HTML

版权声明：本文标题：html 手机商品列表页面,HTML 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700378990a421322.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。