电商网站中商品展示通常使用ul中多个li进行布局，每个li中包括商品的图片和信息介绍，本文先讲解li标签内部的商品信息布局的实现。
布局
本文先不考虑li,直接在div中实现，整个div包括图片区和描述区，先看图片区布局：
<div class="product">
<img class="product-img" src="./images/xiaomi.jpg" alt="台灯">
</div>
<style>
/* 整体div布局*/
.product {
width: 268px;
text-align: center; /*文字图片居中*/
border: 1px solid #ddd: /*方便观看*/
}
.product .product-img {
width: 195px;
}
</style>
效果如下：
其中如需要图片居中，需要设置其父元素的text-align样式，随后设置商品描述区
<div class="product">
<img src="./images/xiaomi.jpg" alt="台灯">
<p class="description">健康灯光，保护双眼</p>
<div class="product-text">
<h3>护眼台灯</h3>
<p>￥59</p>
</div>
</div>
<style>
/* 整体div布局*/
.product {
width: 268px;
text-align: center; /*文字图片居中*/
border: 1px solid #ddd: /*方便观看*/
}
.product .product-img {
width: 195px;
}
.product .description {
color: #845f3f;
font-size: 16px;
}
.product .product-text {
background-color: #f8f8f8;
margin-top: 20px;
padding: 15px;
}
.product .product-text h3 {
font-size: 20px;
font-weight: 400;
color: #000;
}
.product .product-text p {
color: #a92112;
font-size: 20px;
margin-top: 5px;
}
</style>
效果如下：
描述标签通常由h3实现，主要是设置各行文字间的间距以及文字大小颜色等
值得注意的是，商品信息通常是可以跳转的超链接，因此需要通过a标签包含
<div class="product">
<a href="#">
<img src="./images/xiaomi.jpg" alt="台灯">
<p class="description">健康灯光，保护双眼</p>
<div class="product-text">
<h3>护眼台灯</h3>
<p>￥59</p>
</div>
</a>
</div>
<style>
.product a {
text-decoration: none;
display: block;
}
</style>
a标签为行内标签，这里需要转换为块级元素。
最后补充一个问题：
<div class="product-mark">
<!-- 四张图片，换行会有空隙 -->
<img src="./1" alt="" height="20px">
<img src="./1" alt="" height="20px">
<img src="./1" alt="" height="20px">
<img src="./1" alt="" height="20px">
</div>
如上布局，四张图片会在一行展示，但是图片间不会紧紧相邻，是因为这种写法中的换行会被当作空白文本，占据一定大小，为解决该问题，可以将img标签全都写在一行，但可读性会很差，不建议。
可通过设置父容器.product-mark中font-size：0来解决
