PrestaShop的基本HTML结构与CSS样式

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}