sumi2005 / prestashop / PrestaShop的基本HTML结构与CSS样式

0 0

   

PrestaShop的基本HTML结构与CSS样式

2015-01-04  sumi2005

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

原始的HTML结构

  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样式

  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结构

  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样式

  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.     displayblock;  
  31.     height0;  
  32.     overflowhidden  
  33. }  
  34. .clearfix:after {clearboth}  
  35. .clearfix {zoom: 1}  
  36.   
  37.   
  38. /*  
  39. /*  布局样式 
  40. ************************************************************************************************ */  
  41. #page {margin:0 auto;width:980px;}  
  42.     #header {positionrelativefloatleftwidth:980px;z-index:10}  
  43.         #header_logo{position:absolute; top:30pxz-index:1}  
  44.         #header_right{positionrelativefloatright;}  
  45.     #columns {positionrelativefloatleft;width:980px;z-index:1}  
  46.         #left_column {positionrelativefloatleftwidth:202pxmargin-right:20px;}  
  47.         #center_column {positionrelativefloatleftwidth:535pxmargin-right:20px;}  
  48.         #right_column {positionrelativefloatleftwidth:202px;}  
  49.     #footer {positionrelativefloatleftwidth:980px;}  
  50.   
  51.   
  52.   
  53. /*  
  54. /*  常用样式 
  55. ************************************************************************************************ */  
  56. body{  
  57.     font:normal 11px/14px ArialVerdanasans-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-height22px  
  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.     outlinemedium none  
  133. }  
  134.     a:hover {text-decoration:underline}  

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多