思洋互动网站建设学前班

步骤3 设计CSS

将CSS的名称命名为demo.css，代码如下：
广州网站建设,网站建设,广州网页设计,广州网站设计

1.   body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{...}{  
2. /**//* 为某些浏览器兼容性而设计 */ 
3.     margin:0px;  
4.     padding:0px;  
5.     font-family:Arial, Helvetica, sans-serif;  
6. }  
7.  
8. body{...}{  
9.     color:#555555;  
10.     font-size:13px;  
11.     background-color:#282828;  
12. }  
13.  
14. .clear{...}{      
15.     clear:both;  
16. }  
17.  
18. #main-container{...}{    /**//* 页面中主层的宽度和边距设置*/ 
19.     width:700px;  
20.     margin:20px auto;  
21. }  
22.  
23. .container{...}{    /**//* 商品列表层和购物车区域的div设置 */ 
24.     margin-bottom:40px;  
25. }  
26.  
27. .top-label{...}{    /**//* 这是页面上部products的样式*/ 
28.     background:url(img/label_bg.png) no-repeat;      
29.     display:inline-block;  
30.     margin-left:20px;  
31.     position:relative;  
32.     margin-bottom:-15px;      
33. }  
34.  
35. .label-txt{...}{      
36.     background:url(img/label_bg.png) no-repeat top right;      
37.     display:inline-block;  
38.     font-size:10px;  
39.     height:36px;  
40.     margin-left:10px;      
41.     padding:12px 15px 0 5px;  
42.     text-transform:uppercase;  
43. }  
44.  
45. .content-area{...}{    /**//* content-area区域的样式 */ 
46.     background:url(img/container_top.png) no-repeat #fcfcfc;  
47.     padding:15px 20px 0 20px;  
48. }  
49.  
50. .content{...}{      
51.     padding:10px;  
52. }  
53.  
54. .drag-desired{...}{    /**//* 商品列表区域的样式*/ 
55.     background:url(img/drag_desired_label.png) no-repeat top right;  
56.     padding:30px;  
57. }  
58.  
59. .drop-here{...}{    /**//*购物车区域的样式 */ 
60.     background:url(img/drop_here_label.png) no-repeat top right;  
61. }  
62.  
63. .bottom-container-border{...}{      
64.     background:url(img/container_bottom.png) no-repeat;  
65.     height:14px;  
66. }  
67.  
68. .product{...}{    /**//* 商品的样式 */ 
69.     border:2px solid #F5F5F5;  
70.     float:left;  
71.     margin:15px;  
72.     padding:10px;  
73. }  
74.  
75. .product img{...}{  
76.     cursor:move;  
77. }  
78.  
79. p.descr{...}{  
80.     padding:5px 0;  
81. }  
82.  
83. small{...}{  
84.     display:block;  
85.     margin-top:4px;  
86. }  
87.  
88. .tooltip{...}{    /**//* 商品的简单介绍用到的样式，这个样式jQuery 的simpletip plugin插件会用到 */ 
89.     position: absolute;  
90.     top: 0;  
91.     left: 0;  
92.     z-index: 3;  
93.     display: none;  
94.  
95.     background-color:#666666;  
96.     border:1px solid #666666;  
97.     color:#fcfcfc;  
98.  
99.     padding:10px;  
100.  
101.     -moz-border-radius:12px;    /**//* 圆角效果*/ 
102.     -khtml-border-radius: 12px;  
103.     -webkit-border-radius: 12px;  
104.     border-radius:12px;  
105. } 

以上的样式中给出了关键部分的注释，其中注意的是使用了CSS3中的圆角效果样式border-radius,接下来再看剩余的其他样式部分：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. #cart-icon{...}{    /**//* 购物篮的样式 */ 
2.     width:128px;  
3.     float:left;  
4.     position:relative;      
5. }  
6.  
7. #ajax-loader{...}{  
8.     position:absolute;    /**//* 这是等待加载的图标的样式*/ 
9.     top:0px;  
10.     left:0px;  
11.     visibility:hidden;  
12. }  
13.  
14. #item-list{...}{    /**//* 购物篮中已放置的商品的样式*/ 
15.     float:left;  
16.     width:490px;  
17.     margin-left:20px;  
18.     padding-top:15px;  
19. }  
20.  
21. a.remove,a.remove:visited{...}{    /**//* 移除购物车中商品的链接的样式 */ 
22.     color:red;  
23.     font-size:10px;  
24.     text-transform:uppercase;  
25. }  
26.  
27. #total{...}{    /**//* 总计的样式*/ 
28.     clear:both;  
29.     float:right;  
30.     font-size:10px;  
31.     font-weight:bold;  
32.     padding:10px 12px;  
33.     text-transform:uppercase;  
34. }  
35.  
36. #item-list table{...}{      
37.     background-color:#F7F7F7;  
38.     border:1px solid #EFEFEF;  
39.     margin-top:5px;  
40.     padding:4px;  
41. }  
42.  
43. a.button,a.button:visited{...}{    /**//* 结算按钮*/ 
44.     display:none;  
45.  
46.     height:29px;  
47.     width:136px;  
48.  
49.     padding-top:15px;  
50.     margin:0 auto;  
51.     overflow:hidden;  
52.  
53.     color:white;  
54.     font-size:12px;  
55.     font-weight:bold;  
56.     text-align:center;  
57.     text-transform:uppercase;  
58.  
59.     background:url(img/button.png) no-repeat center top;      
60. }  
61.  
62. a.button:hover{...}{  
63.     background-position:bottom;      
64.     text-decoration:none;  
65. } 

为了兼容IE 6浏览器，我们特别添加如下的CSS样式代码，以让IE 6支持PNG下背景透明的特性：

1. <!--[if lt IE 7]>  
2. <style type="text/css">  
3.     .pngfix { behavior: url(pngfix/iepngfix.htc);}      
4.     .tooltip{width:200px;};    /*为商品的介绍设置默认的宽度 */ 
5. </style>  
6. <![endif]--> 

将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用;blank.gif是一个1×1像素的透明GIF图片。

最后，我们的页面效果做出来应该是这样的：

广州网站建设,网站建设,广州网页设计,广州网站设计