基于

Html5 的简易购物车的实现

网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动

手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。

1、用 html 实现内容；

2、用 css 修饰外观；

3、用 js(jq)设计动效。

第一步：首先是进行 html 页面的设计，我用一个大的 div 将所有商品

包含，然后用不同的 div 将不同的商品进行封装，商品列表中我用了

ul li 实现，具体实现代码如下（代码中涉及到的商品都是网上随便 copy

的，不具有参考价值）：

<div id="goods">

<div class="goodsItem">

<ul class="goditem">

<li class="godpic"><img src="images/1.png"></li>

<li class="godprice">￥25.00</li>

<li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗

集最早由郑振铎先生译介到中国。</li>

<li class="godadd"><a href="javascript:;">加入购物车</a></li>

</ul>

</div>

<div class="goodsItem">

<ul class="goditem">

<li class="godpic"><img src="images/2.png"></li>

<li class="godprice">￥56.00</li>