PrestaShop的基本HTML结构与CSS样式

PrestaShop的HTML与CSS样式，一直都在不断地改进，最近翻看了一下几个不同版本PrestaShop的源码，觉得版本1.5.4.1的HTML结构和CSS样式，都比较符合本大众口味，特别仔细地看了看，特做如下笔记：

原始的HTML结构

[html] view plaincopyprint?

1. <div id="page" class="container_9 clearfix">  
2.   
3.     <!-- Header -->  
4.     <div id="header" class="grid_9 alpha omega">  
5.         <a id="header_logo" href="#" title="">  
6.             <img class="logo" src="" alt="" width="" height=""  />  
7.         </a>  
8.         <div id="header_right" class="grid_9 omega">  
9.   
10.         </div>  
11.     </div>  
12.   
13.     <div id="columns" class="grid_9 alpha omega clearfix">  
14.         <!-- Left -->  
15.         <div id="left_column" class="column grid_2 alpha">  
16.   
17.         </div>  
18.   
19.         <!-- Center -->  
20.         <div id="center_column" class=" grid_5">  
21.               
22.         </div>  
23.   
24.         <!-- Right -->  
25.         <div id="right_column" class="column grid_2 omega">  
26.   
27.         </div>  
28.     </div>  
29.   
30.     <!-- Footer -->  
31.     <div id="footer" class="grid_9 alpha omega clearfix">  
32.         <p class="center clearBoth"><a href="#"></a></p>  
33.     </div>  
34.       
35. </div>  

原始的CSS样式

[css] view plaincopyprint?

1. /* ************************************************************************************************ 
2.         struture 
3. ************************************************************************************************ */  
4. #page {}  
5.     #header {z-index:10}  
6.     #columns {z-index:1}  
7.         #left_column {}  
8.         #center_column {}  
9.         #right_column {}  
10.     #footer {}  

另有一个妨960的样式表文件grid_prestashop.css文件，补充了"container_9"等样式。

这个样式表文件，完全可以合并过来，经过合并并整理，形成一个大众口味的HTML结构与样式。

整理后的HTML结构

[html] view plaincopyprint?

1. <div id="page" class="clearfix">  
2.   
3.     <!-- Header -->  
4.     <div id="header">  
5.         <a id="header_logo" href="#" title="">  
6.             <img class="logo" src="" alt="" width="" height=""  />  
7.         </a>  
8.         <div id="header_right">  
9.   
10.         </div>  
11.     </div>  
12.   
13.     <div id="columns" class="clearfix">  
14.         <!-- Left -->  
15.         <div id="left_column">  
16.   
17.         </div>  
18.   
19.         <!-- Center -->  
20.         <div id="center_column">  
21.               
22.         </div>  
23.   
24.         <!-- Right -->  
25.         <div id="right_column">  
26.   
27.         </div>  
28.     </div>  
29.   
30.     <!-- Footer -->  
31.     <div id="footer" class="clearfix">  
32.         <p class="center clearBoth"><a href="#"></a></p>  
33.     </div>  
34.       
35. </div>  

整理后的CSS样式

[css] view plaincopyprint?

1. /* ################################################################################################ 
2. /*  PRESTASHOP1.5.4.1 CSS                                                                         # 
3. ################################################################################################ */  
4.   
5. /*  
6. /*  重置样式 
7. ************************************************************************************************ */  
8. html{color:#000;background:#FFF;}  
9. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}  
10. table{border-collapse:collapse;border-spacing:0}  
11. fieldset,img{border:0}  
12. address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit}  
13. del,ins{text-decoration:none}  
14. caption,th{text-align:left}  
15. h1,h2,h3,h4,h5,h6{font-size:100%}  
16. q:before,q:after{content:''}  
17. abbr,acronym{border:0;font-variant:normal}  
18. sup{vertical-align:baseline}  
19. sub{vertical-align:baseline}  
20. legend{color:#000}  
21. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}  
22. input,button,textarea,select{font-size:100%}  
23.   
24. .ie7 input, .ie7 select{line-height:18px}  
25. a {cursor:pointer}  
26.   
27. .clearfix:before,  
28. .clearfix:after {  
29.     content: ".";  
30.     display: block;  
31.     height: 0;  
32.     overflow: hidden  
33. }  
34. .clearfix:after {clear: both}  
35. .clearfix {zoom: 1}  
36.   
37.   
38. /*  
39. /*  布局样式 
40. ************************************************************************************************ */  
41. #page {margin:0 auto;width:980px;}  
42.     #header {position: relative; float: left; width:980px;z-index:10}  
43.         #header_logo{position:absolute; top:30px; z-index:1}  
44.         #header_right{position: relative; float: right;}  
45.     #columns {position: relative; float: left;width:980px;z-index:1}  
46.         #left_column {position: relative; float: left; width:202px; margin-right:20px;}  
47.         #center_column {position: relative; float: left; width:535px; margin-right:20px;}  
48.         #right_column {position: relative; float: left; width:202px;}  
49.     #footer {position: relative; float: left; width:980px;}  
50.   
51.   
52.   
53. /*  
54. /*  常用样式 
55. ************************************************************************************************ */  
56. body{  
57.     font:normal 11px/14px Arial, Verdana, sans-serif;  
58.     color:#222;  
59.     background:#fff  
60. }  
61. body.content_only {  
62.     background: #FFF;  
63. }  
64.   
65. /* 位置 *************************************************************************************** */  
66. .hidden {display:none}  
67. .f_left {float:left}  
68. .f_right {float:right}  
69. p.center {text-align:center}  
70. .clearBoth {clear:both}  
71.   
72. /* 标题 **************************************************************************************** */  
73. h1 {  
74.     margin-bottom:20px;  
75.     font-size:24px;  
76.     line-height: 22px  
77. }  
78. h2 {  
79.     padding-bottom:20px;  
80.     font-size:18px  
81. }  
82. h3 {  
83.     padding-bottom:20px;  
84.     font-size:16px  
85. }  
86. .title_block {  
87.     padding-bottom:20px;  
88.     font-size:14px  
89. }  
90.   
91. .hide-left-column #left_column {display:none}  
92. .hide-left-column #center_column {width:757px}  
93.   
94. /* 文本 **************************************************************************************** */  
95. p {padding-bottom:20px}  
96.   
97. p em {font-style:italic}  
98.   
99. .warning {  
100.     margin:0 0 10px 0;  
101.     padding:10px;  
102.     border:1px solid #e6db55;  
103.     font-size:13px;  
104.     background:#ffffe0  
105. }  
106. .success {  
107.     margin:0 0 10px 0;  
108.     padding:10px;  
109.     border:1px solid #5cff74;  
110.     font-size:13px;  
111.     background: #d3ffab;  
112. }  
113. .error {  
114.     margin:0 0 10px 0;  
115.     padding:10px;  
116.     border:1px solid #990000;  
117.     font-size:13px;  
118.     background:#ffcccc  
119. }  
120. .error ol {margin-left:20px}  
121. .error p.lnk {  
122.     margin-top:20px;  
123.     padding:0;  
124.     font-size:11px  
125. }  
126. .required {color:#990000}  
127.   
128. /* 链接 **************************************************************************************** */  
129. a, a:active, a:visited {  
130.     color:#333;  
131.     text-decoration:none;  
132.     outline: medium none  
133. }  
134.     a:hover {text-decoration:underline}