选用商品列表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;

word-break: break-all;

overflow: hidden;

/*行高和最大高度根据实际设置*/

line-height: 18px;

max-height: 36px;

}

多行显示.png

实例 HTML


12期分期/当天发/Apple/苹果 iPhone 7 Plus国行全网通4G手机

月销量1494件

¥

5948

¥

5948.0

实例 CSS

*{

padding: 0;

margin: 0;

}

a{

overflow: hidden;

color: #051B28;

text-decoration: none;

}

i{

font-style: normal;

font-family: Arial;

}

.container{

position: relative;

width: 188px;

height: 304px;

background: #fff;

box-sizing: border-box;

border: 2px solid #ccc;

margin: 20px 0 0 20px;

}

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

a.item-block {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

.item-block-img img {

width: 186px;

height: 186px;

max-width: 100%;

}

.item-title {

font-size: 14px;

color: #333;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

line-height: 1.2;

height: 30px;

max-height: 36px;

margin: 9px;

}

.item-monthsell {

display: inline-block;

font-size: 12px;

max-width: 100%;

white-space: nowrap;

color: #999;

margin: 0 9px 3px;

height: 18px;

overflow: hidden;

text-overflow: ellipsis;

line-height: 18px;

}

.item-price {

margin: 4%!important;

height: 5%!important;

}

.mui-price {

color: #dd2727;

font-size: 12px;

}

.mui-price-inter {

font-size: 16px;

font-family: Helvetica,sans-serif;

font-style: normal;

}

.mui-price.gray {

color: #999;

font-size: 10px;

text-decoration: line-through;

}

.gray .mui-price-inter {

font-size: 12px;

font-family: Helvetica,sans-serif;

font-style: normal;

}

实例效果.png