思洋互动网站建设学前班

步骤2 设计页面结构

接下来，我们开始设计我们的页面结构，HTML代码如下：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. <div id="main-container"> <!—主DIV --> 
2.  
3. <div class="tutorialzine">    <!—标题 --> 
4. <h1>Shopping cart</h1> 
5. <h3>The best products at the best prices</h3> 
6. </div> 
7.  
8. <div class="container">    <!—显示商品区域--> 
9.  
10. <span class="top-label"> 
11. <span class="label-txt">Products</span>    <!—显示Products的标题div --> 
12. </span> 
13.  
14. <div class="content-area"> 
15. <div class="content drag-desired">      
16. <?php 
17. // 这里动态从数据库中读取商品  
18. ?> 
19.  
20. <div class="clear"></div>    <!—这里用于当用户鼠标移动到该产品时，显示该产品的简介-> 
21. </div> 
22. </div> 
23.  
24. <div class="bottom-container-border">    <!—区域底部的圆角区域--> 
25. </div> 
26.  
27. </div>      
28. <div class="container">    <!—购物车的div层> 
29.  
30. <span class="top-label"> 
31. <span class="label-txt">Shopping Cart</span>      
32. </span> 
33.  
34. <div class="content-area"> 
35. <div class="content drop-here">    <!—该区域为可接收用户拖拉物品到购物车的区域 --> 
36. <div id="cart-icon"> 
37. <img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />      
38. <!--一个加载等待的图标--> 
39. <img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" /> 
40. </div> 
41. <!—购物表单?  
42. <form name="checkoutForm" method="post" action="order.php">      
43. <div id="item-list">    <!—购物清单列表 --> 
44.  
45. </div> 
46. </form>      
47.  
48. <div class="clear"></div>      
49. <div id="total"></div>    <!—商品总价 --> 
50. <div class="clear"></div>    <!-- clearing the floats --> 
51.  
52. <!--结帐的按钮?  
53. <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>      
54. </div> 
55. </div> 
56.  
57. <div class="bottom-container-border">    <!--该区域的底部--> 
58. </div> 
59.  
60. </div> 

在这个页面中，在上半部分，设置了一个div层，用于显示各种商品，并且在页面下半部分，另外设置了一个用于接收用户拖拽商品到购物车的层，只要用户把商品拖拽到这个层中的任意区域(不限于拖拽到购物车内)，都被认为是用户把商品放到了购物车中。
广州网站建设,网站建设,广州网页设计,广州网站设计