妹子近期的“小精灵小商店”新开，一直在室内装修，调节模版，因为自身有网页制作和PS的工作经验，因此室内装修下去还不是很费劲。坚信淘宝网的卖店不容易各个都熟练DIV CSS，因此在设计中一般用淘宝网自的“报表”其实就是“TABLE”来合理布局， 随说还可以可是还有许多欠缺，淘宝网的产品介绍页适用简单DIV CSS合理布局，因此人们就不必放了这个好专用工具。
报表合理布局与DIV CSS比照
1、载入速率：
报表合理布局载入速率要显著慢与DIV CSS，尤其是整篇只有一个报表，报表正中间在嵌入成千上万的报表。产品介绍页假如载入速率很慢可能并没有顾客会等的。
2、排版设计的协调能力：
DIV CSS排版设计的灵便大大的强过表格排版。CSS能够灵敏的完成各种各样的布局设计。
3、模版的维护保养：
DIV CSS基本上可以不改动合理布局，而立即攸CSS就可以更改模版，维护保养较为轻轻松松和简易。假如报表合理布局的模版，一但要改片那样就需要重新编辑，任务量非常大。不益于模版批量替换升级。
那样DIV CSS有那么多优点，大家为什么不用DIV CSS合理布局呢。妹子将作一个系列的步骤与分享给大家。
在编写前请大家开启商品编辑页面。并把“产品介绍”调节“源代码”表明。便是点一下编写菜单栏第一行，第一个按键“<->”。
DIV CSS合理布局案例
1、一行代码让产品介绍页总体垂直居中：
因为产品介绍页能够关掉左边频道目录，因此网页页面总宽由750像素变成了950象素，然来的排版设计有很有可能弄乱，因此用这一全自动垂直居中作用就能够二种情况下维持文件格式不会改变。
编码如下所示：
<div style="width:750px; margin:auto">
……
</div>
操作方法：
1、请将编码：<div style="width:750px; margin:auto">复制到编码最上层页一行。
2、请将编码：</div>复制到编码最后一行。
3、储存。开启商品网页页面，点一下“掩藏左边频道目录”您会看到无论网页页面如何转变你的商品的叙述页都是会全自动垂直居中，不什么应页面大小的变动而把文件格式乱掉。
垂直居中前：
垂直居中后：
关掉左边后，文件格式没有变。
2、一行代码让产品介绍页总体居左：
编码如下所示：
<div style="width:750px; float:left">
……
</div>
操作方法：跟上面一样。
3、一行代码让产品介绍页总体居右：
编码如下所示：
<div style="width:750px; float:right">
……
</div>
操作方法：跟上面一样。
这节应用的CSS作用分析：
1、<div>……</div>
是层界定标识，是一对发生。
2、style="……“
这也是CSS的界定标识，每一个CSS编码所有放到这里面，不然电脑浏览器是不认识的哦。
3、width:750px;
“width”是总宽的含意；“750PX”是750像素，由于叙述页默认设置总宽是750像素；
4、margin:auto
“margin”是外边距是意思；“auto”便是全自动的含意，
5、float:right/left
"float"这就是居左居右的含意，但是用完了还记得用“clear:both”清除浮动特性，至关重要哦，要不然文件格式用非常容易乱哦。
