08课 dom css结构【淘宝sdk教程】
http://v.youku.com/v_show/id_XODIyNjQ0OTk2.html淘宝SDK高级模板视频教程，第8集截图。知识要点：1.页面结构 2.区块（片块，坑） 3.模块 4.布局这个蓝色的部分是淘宝开放给我们，可以让我们设计师，自己去开发的部分。那么详细的代码如下：
具体代码如下：
<font size="3"><html>
<head>
</head>
<body>
<div id="site-nav">淘宝导航栏</div>
<div id="header">淘宝页头</div>
<div id="content" class="tb_shop"><!--设计师设计的不是完整的页面，开放给设计师的页面区域是在这个里面的-->
<div id="hd"><!--店铺页头--></div>
<div id="bd">
<!--店铺内容-->
<div class="layout grid-xxx">
<!--布局-->
<div class="main-wrap J_TRegion">
<!--区块-->
<!--这里只能是模块，可以有多个模块-->
<div class="box J_TBox"></div>
<!--模块内容-->
</div>
</div>
</div>
<div id="ft"><!--店铺尾页--></div>
</div>
<div id="footer">淘宝尾页</div>
</body>
</html></font>
区块（片区、坑）的代码抒写<font size="3"><!--布局-->
<div class="main-wrap J_TRegion">
<!--区块-->
<!--这里只能是模块，可以有多个模块-->
<div class="box J_TBox"></div>
<!--模块内容-->
</div> </font>说明：
css规范：class="main-wrapJ_TRegion"中，J_TRegion是设计区域时必须添加的样式，其他的样式名如“main_wrap”是设计师可以自己添加的样式：
一个区块内是可以添加多个模块的：
片区的代码书写：
<font size="3"><div class="layout grid-m">
<div class="col-main">
<div class="main-wrap J_TRegion">
<div class="box J_TBox"></div>
<div class="box J_TBox"></div>
<div class="box J_TBox"></div>
<div class="box J_TBox"></div>
<div class="box J_TBox"></div>
</div>
</div>
</div></font>这个就是片区哦
模块的代码书写：
<font size="3"><div class="box J_TBox">
<!--这里是模块内容-->
</div></font>说明：css规范；class="box J_TBox"中，J_TBox 是设计模块时必须添加的样式名，其他的样式名如“box”是设计师自己可以添加的样式。 自定义样式。.box{......} 中的内容建议不要涉及float、position 等这样对模块的位置进行定义的样式
建议不要用table来充当模块，否则效果将不明显或者是报错。
<!--官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：
在模块内容和模块div标签本事在添加一层div,如红色框所示。
-->
<!--官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：
在模块内容和模块div标签本事在添加一层div,如红色框所示。
-->
<div class="box J_TBox">
<div class="shop-display">
<div class="hd"></div>
<div class="bd"></div>
</div>
</div>
<!--
1、淘宝店铺有系统布局
设计师在设计简易模版的时候，只能通过布局管理添加系统支持的布局。
2、设计师在设计sdk模版的时候，设计师可以设计自己的布局，系统对sdk的布局没有做任何的限制。此时设计师可以
3，参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。
-->
<!--
命名规则：
通栏布局（.grid-m）
两栏布局 (.grid-sXmO)
三栏布局 (.grid-sXmOeY)#footer {
width: 950px;
margin: 0 auto;
}
.col-main {
float: left;
width: 100%;
min-height: 1px;
}
.col-sub, .col-extra {
float: left;
}
.layout:after, .main-wrap:after, .col-sub:after, .col-extra:after, .box:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.layout, .main-wrap, .col-sub, .col-extra, .box {
*zoom: 1;
}
/* 两栏布局 */
.grid-s5m0 .main-wrap { margin-left: 200px; }
.grid-s5m0 .col-sub { width: 190px; margin-left: -100%; }
/* to move */
.ks-imagezoom-lens {
background: url("http://img04.taobaocdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png") repeat scroll 0 0 transparent;
cursor: move;
z-index: 1;
}
.ks-imagezoom-viewer {
border: 1px solid #CCCCCC;
overflow: hidden;
text-align: center;
z-index: 999;
}
.ks-imagezoom-loading {
background: url(http://img03.taobaocdn.com/tps/i3/T11ihLXhJoXXXXXXXX-16-16.gif) no-repeat scroll center center #FFFFFF;
}
.ks-imagezoom-icon {
height: 23px;
width: 23px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
background: url(http://img02.taobaocdn.com/tps/i2/T1uJNuXX8tXXXXXXXX-23-23.png) no-repeat scroll left top transparent;
z-index:2;
}
/* detail util css */
.clear, .tb-clear, .tb-clearfix {
*zoom: 1;
}
.clear:after, .tb-clear:after, .tb-clearfix:after {
content:'\20';
display:block;
height:0;
clear:both;
}
.hidden, .tb-hidden{
display:none;
}
/* hide sub logo for detail */
#page #logo .sub-logo {display: none;}
/** 两栏布局 **/
.grid-s5m0 .main-wrap { margin-left: 200px; }
.grid-s5m0 .col-sub { width: 190px; margin-left: -100%; }
.grid-m0s5 .main-wrap { margin-right: 200px; }
.grid-m0s5 .col-sub { width: 190px; margin-left: -190px; }
/** 三栏布局 **/
.grid-s5m0e5 .main-wrap { margin: 0 200px 0 200px; }
.grid-s5m0e5 .col-sub { width: 190px; margin-left: -100%; }
.grid-s5m0e5 .col-extra { width: 190px; margin-left: -190px; }
.grid-e5m0s5 .main-wrap { margin: 0 200px 0 200px; }
.grid-e5m0s5 .col-sub { width: 190px; margin-left: -190px; }
.grid-e5m0s5 .col-extra { width: 190px; margin-left: -100%; }
.grid-m0s5e5 .main-wrap { margin-right: 400px; }
.grid-m0s5e5 .col-sub { width: 190px; margin-left: -390px; }
.grid-m0s5e5 .col-extra { width: 190px; margin-left: -190px; }
.grid-m0e5s5 .main-wrap { margin-right: 400px; }
.grid-m0e5s5 .col-sub { width: 190px; margin-left: -190px; }
.grid-m0e5s5 .col-extra { width: 190px; margin-left: -390px; }
.grid-s5e5m0 .main-wrap { margin-left: 400px;; }
.grid-s5e5m0 .col-sub { width: 190px; margin-left: -100%; }
.grid-s5e5m0 .col-extra { width: 190px; margin-left: -750px; }
.grid-e5s5m0 .main-wrap { margin-left: 400px; }
.grid-e5s5m0 .col-sub { width: 190px; margin-left: -750px; }
.grid-e5s5m0 .col-extra { width: 190px; margin-left: -100%; }
这个上面就是规则；具体的可以查看这个地址:http://a.tbcdn.cn/p/tshop/base.css
页:
[1]