一、知識點

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.實現效果

總結

以上是生活随笔為你收集整理的HTML .CSS实现商品列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。