</

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 层，用于显示各种商品，并且在页面
下半部分，另外设置了一个用于接收用户拖拽商品到购物车的层，只要用户把商品拖拽
到这个层中的任意区域(不限于拖拽到购物车内)，都被认为是用户把商品放到了购物车
中。

 

　　步骤 3、设计 CSS

　　将 CSS 的名称命名为 demo.css，代码如下：

  body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label

{

/* 

 

为某些浏览器兼容性而设计 */

    margin

:

0px

;

    padding

:

0px

;

    font-family

:

Arial, Helvetica, sans-serif

;

}

body

{

    color

:

#555555

;

    font-size

:

13px

;

    background-color

:

#282828

;

}

.clear

{