PrestaShop的HTML与CSS样式,一直都在不断地改进,最近翻看了一下几个不同版本PrestaShop的源码,觉得版本1.5.4.1的HTML结构和CSS样式,都比较符合本大众口味,特别仔细地看了看,特做如下笔记:
原始的HTML结构
<div id="page" class="container_9 clearfix">
<!-- Header -->
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="#" title="">
<img class="logo" src="" alt="" width="" height="" />
</a>
<div id="header_right" class="grid_9 omega">
</div>
</div>
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
</div>
<!-- Center -->
<div id="center_column" class=" grid_5">
</div>
<!-- Right -->
<div id="right_column" class="column grid_2 omega">
</div>
</div>
<!-- Footer -->
<div id="footer" class="grid_9 alpha omega clearfix">
<p class="center clearBoth"><a href="#"></a></p>
</div>
</div>
原始的CSS样式
/* ************************************************************************************************
struture
************************************************************************************************ */
#page {}
#header {z-index:10}
#columns {z-index:1}
#left_column {}
#center_column {}
#right_column {}
#footer {}
另有一个妨960的样式表文件grid_prestashop.css文件,补充了"container_9"等样式。
这个样式表文件,完全可以合并过来,经过合并并整理,形成一个大众口味的HTML结构与样式。
整理后的HTML结构
<div id="page" class="clearfix">
<!-- Header -->
<div id="header">
<a id="header_logo" href="#" title="">
<img class="logo" src="" alt="" width="" height="" />
</a>
<div id="header_right">
</div>
</div>
<div id="columns" class="clearfix">
<!-- Left -->
<div id="left_column">
</div>
<!-- Center -->
<div id="center_column">
</div>
<!-- Right -->
<div id="right_column">
</div>
</div>
<!-- Footer -->
<div id="footer" class="clearfix">
<p class="center clearBoth"><a href="#"></a></p>
</div>
</div>
整理后的CSS样式
/* ################################################################################################
/* PRESTASHOP1.5.4.1 CSS #
################################################################################################ */
/*
/* 重置样式
************************************************************************************************ */
html{color:#000;background:#FFF;}
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}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit}
del,ins{text-decoration:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:baseline}
sub{vertical-align:baseline}
legend{color:#000}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}
.ie7 input, .ie7 select{line-height:18px}
a {cursor:pointer}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden
}
.clearfix:after {clear: both}
.clearfix {zoom: 1}
/*
/* 布局样式
************************************************************************************************ */
#page {margin:0 auto;width:980px;}
#header {position: relative; float: left; width:980px;z-index:10}
#header_logo{position:absolute; top:30px; z-index:1}
#header_right{position: relative; float: right;}
#columns {position: relative; float: left;width:980px;z-index:1}
#left_column {position: relative; float: left; width:202px; margin-right:20px;}
#center_column {position: relative; float: left; width:535px; margin-right:20px;}
#right_column {position: relative; float: left; width:202px;}
#footer {position: relative; float: left; width:980px;}
/*
/* 常用样式
************************************************************************************************ */
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:#fff
}
body.content_only {
background: #FFF;
}
/* 位置 *************************************************************************************** */
.hidden {display:none}
.f_left {float:left}
.f_right {float:right}
p.center {text-align:center}
.clearBoth {clear:both}
/* 标题 **************************************************************************************** */
h1 {
margin-bottom:20px;
font-size:24px;
line-height: 22px
}
h2 {
padding-bottom:20px;
font-size:18px
}
h3 {
padding-bottom:20px;
font-size:16px
}
.title_block {
padding-bottom:20px;
font-size:14px
}
.hide-left-column #left_column {display:none}
.hide-left-column #center_column {width:757px}
/* 文本 **************************************************************************************** */
p {padding-bottom:20px}
p em {font-style:italic}
.warning {
margin:0 0 10px 0;
padding:10px;
border:1px solid #e6db55;
font-size:13px;
background:#ffffe0
}
.success {
margin:0 0 10px 0;
padding:10px;
border:1px solid #5cff74;
font-size:13px;
background: #d3ffab;
}
.error {
margin:0 0 10px 0;
padding:10px;
border:1px solid #990000;
font-size:13px;
background:#ffcccc
}
.error ol {margin-left:20px}
.error p.lnk {
margin-top:20px;
padding:0;
font-size:11px
}
.required {color:#990000}
/* 链接 **************************************************************************************** */
a, a:active, a:visited {
color:#333;
text-decoration:none;
outline: medium none
}
a:hover {text-decoration:underline}