你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。
云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集
293篇原创内容-更多前端系列内容可以go公众.h：云桃桃
后台回复“前端工具”可获取开发工具，持续更新中
后台回复“前端基础题”可得到前端基础100题汇总，持续更新中
后台回复“前端电子书”可获取20+本精选电子书
前言
今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。
其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。
OK，咱们的效果如下。
那来一起看看代码吧。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jd Example</title>
<style>
* {
margin: 0;
padding: 0;
color: #333;
box-sizing: border-box;
}
i {
font-style: normal;
}
a {
text-decoration: none; /* 去除下划线 */
}
li {
list-style-type: none; /* 去除列表项的默认样式 */
}
img {
display: block;
width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
}
/* 清除浮动样式 */
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* 以上为CSS重置部分 */
body {
background-color: #f4f4f4;
}
img {
display: block;
width: 100%;
}
.container {
margin: 50px auto 10px auto;
width: 1200px;
}
.container > .product-list {
float: left;
width: 230px;
margin: 0px 12.5px 15px 0px;
background-color: #fff;
}
.container > .product-list:nth-child(5n) {
margin-right: 0px;
}
.container .product-img {
transition: all 0.3s; // 添加过渡效果
}
.container .product-list:hover .product-img {
opacity: 0.5;
}
.txt-box {
padding: 0px 20px;
}
.container .product-list .txt-line1 {
margin: 5px 0px;
line-height: 24px;
height: 48px;
color: #333;
font-size: 14px;
/* 设置超出2行显示省略号 */
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.txt-icon1 {
background-color: #e1251b;
border-radius: 2px;
color: #fff;
padding: 0 5px;
margin-right: 4px;
line-height: 16px;
height: 16px;
font-size: 12px;
display: inline-block;
font-family: Helvetica Neue, Hiragino Sans GB, SimSun, serif;
}
.txt-line2 {
padding: 5px 0px;
}
.price-icon {
vertical-align: middle;
font-size: 12px;
font-weight: 700;
font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
color: #e1251b;
}
.price {
font-size: 20px;
font-weight: 700;
font-family: arial, sans-serif;
color: #e1251b;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1">摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1">摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
<div class="product-list">
<img src="img/list-img1.png" class="product-img" alt="" />
<div class="txt-box">
<p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
<div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
</div>
</div>
</div>
</body>
</html>
OK，本文完。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
