admin 管理员组

文章数量: 887021

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