步骤2、设计页面结构
接下来，我们开始设计我们的页面结构，HTML代码如下：
<div id="main-container"> <!—主DIV --><div class="tutorialzine"> <!—标题 --><h1>Shopping cart</h1><h3>The best products at the best prices</h3></div><div class="container"> <!—显示商品区域--><span class="top-label"><span class="label-txt">Products</span> <!—显示Products的标题div --></span><div class="content-area"><div class="content drag-desired"> <?php// 这里动态从数据库中读取商品?><div class="clear"></div> <!—这里用于当用户鼠标移动到该产品时，显示该产品的简介-></div></div><div class="bottom-container-border"> <!—区域底部的圆角区域--></div></div> <div class="container"> <!—购物车的div层><span class="top-label"><span class="label-txt">Shopping Cart</span> </span><div class="content-area"><div class="content drop-here"> <!—该区域为可接收用户拖拉物品到购物车的区域 --><div id="cart-icon"><img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" /> <!--一个加载等待的图标--><img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" /></div><!—购物表单?<form name="checkoutForm" method="post" action="order.php"> <div id="item-list"> <!—购物清单列表 --></div></form> <div class="clear"></div> <div id="total"></div> <!—商品总价 --><div class="clear"></div> <!-- clearing the floats --><!--结帐的按钮?<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a> </div></div><div class="bottom-container-border"> <!--该区域的底部--></div></div>在这个页面中，在上半部分，设置了一个div层，用于显示各种商品，并且在页面下半部分，另外设置了一个用于接收用户拖拽商品到购物车的层，只要用户把商品拖拽到这个层中的任意区域(不限于拖拽到购物车内)，都被认为是用户把商品放到了购物车中。
