HTML .CSS实现商品列表

一、知识点

a.ul无序列表 ol有序列表 dl定义列表

b.css精灵图

精灵图（通常被解释为css图像拼合、css贴图定位、css图片精灵、css雪碧图）是一种网页图片应用处理方式.其实就是就是把一个页面涉及到的所有零星图片都包含到一张大图中去

通过CSSbackground背景定位技术技巧布局网页背景.在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat，background-position等来实现图片的显示

---

二、实现分析、过程及实现的效果

1.分析：整体分析、商品列表由公共页头+商品列表内容+公共页尾组成

商品列表内容用ul无序列表实现（八张图片，每一张图片下面有价格、商品说明、收藏及加入购物车）实现商品列表

2.过程：

.html代码

<div class="all">
			<iframe class="iheader" src="header.html"></iframe>
		<div class="xf-content">
		<div class="content">
			<ul class="clear">
				<!-- 第一张图片 -->
				<li>
				<a>
					<img src="img/cake1.jpg"/>
				</a>
				<p class="price">￥198.00</p>
				<p class="title">悦轩饼家蛋糕/提拉米苏(约两磅)</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第二张图片 -->
				<li>
				<a>
					<img src="img/cake2.jpg"/>
				</a>
				<p class="price">￥169.00</p>
				<p class="title">悦轩饼家蛋糕/芒果干层(900g)【无贺卡、巧克力....】</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第三张图片 -->
				<li>
				<a>
					<img src="img/cake3.jpg"/>
				</a>
				<p class="price">￥149.00</p>
				<p class="title">悦轩饼家蛋糕/榴莲香雪(约2磅)</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第四张照片 -->
				<li>
				<a>
					<img src="img/cake5.jpg"/>
				</a>
				<p class="price">￥149.00</p>
				<p class="title">悦轩饼家蛋糕/冰语琥珀下午茶(8英寸)【无贺卡....】</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第五张照片 -->
				<li>
				<a>
					<img src="img/cake2.jpg"/>
				</a>
				<p class="price">￥99.00</p>
				<p class="title">悦轩饼家蛋糕/爆浆榴莲蛋糕(约两磅)-榴莲蛋糕</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第六张照片 -->
				<li>
				<a>
					<img src="img/cake5.jpg"/>
				</a>
				<p class="price">￥149.00</p>
				<p class="title">悦轩饼家蛋糕/冰语琥珀下午茶(8英寸)【无贺卡....】</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第七张照片 -->
				<li>
				<a>
					<img src="img/cake1.jpg"/>
				</a>
				<p class="price">￥198.00</p>
				<p class="title">悦轩饼家蛋糕/提拉米苏(约两磅)</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				<!-- 第八张照片 -->
				<li>
				<a>
					<img src="img/cake2.jpg"/>
				</a>
				<p class="price">￥169.00</p>
				<p class="title">悦轩饼家蛋糕/芒果干层(900g)【无贺卡、巧克力....】</p>
				<p class="buy">
					<a href="#" class="collection">
						<span></span>收藏
					</a>
					<a href="#" class="add-cart" style="margin-left: -5px;">
						<span></span>加入购物车
					</a>
				</p>
				</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
		</div>
		<iframe class="ifooter" src="footer.html"></iframe>
		</div>

.css代码

3.实现效果