08课 dom css结构【淘宝sdk教程】

quanshiyinian · 发表于 2014-11-9 03:45:33

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

淘宝SDK高级模板视频教程，第8集截图。

知识要点：1.页面结构

2.区块（片块，坑）

3.模块

4.布局

这个蓝色的部分是淘宝开放给我们，可以让我们设计师，自己去开发的部分。那么详细的代码如下：
002_副本_C.jpg

具体代码如下：

<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-wrap J_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来充当模块，否则效果将不明显或者是报错。
360截图20141126231459192.jpg

<!--官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：
在模块内容和模块div标签本事在添加一层div,如红色框所示。
-->
<div class="box J_TBox">
<div class="shop-display">
<div class="hd"></div>
<div class="bd"></div>
</div>
</div>

复制代码

<!--
命名规则：
通栏布局（.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

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！