天猫商城应用自定义类代码

宽屏居中：

<div style="width:990px;height:模块高度px;"><div class="sn-simple-logo" style="width:1920px;left:-465px;">1920全屏代码，可以放工具生成的代码，也可以放DW做的自定义代码</div>
</div>

<div style="height:auto;"><div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;"><div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;">
<img src="图片地址" width="1920" height="xxxx" border="0" /></div></div>
</div>

京东宽屏居中：

<div style="width: 100%; overflow: hidden;" class="shop_topbanner"><div style="width: 1920px; height: auto"><div style="position: absolute; width: 1920px; height: auto; margin-left: -960px;left:50%;"><img src="这里是你的图片" alt="" height="xxxx" width="1920" /></div></div>
</div>

一侧悬浮：

<div class="J_TWidget" data-widget-config="{'duration':0.1,'activeTriggerCls':'\u00A0tm-isv-flower-mask','interval':0.1,'effect':'scrollx','activeIndex':2,'navCls':'nav_zhicheng','contentCls':'content_zhicheng','autoplay':true}" data-widget-type="Carousel" style="position:relative;"><ul class="content_zhicheng" style="display: none; width: 999999px; left: 0px; position: absolute; "><li  style="width: 950px; height: 10px; display: block; float: left; "> </li></ul><ul class="nav_zhicheng"><div class="tm-mcBodyMask tapp89 mui-mbar tm-isv-flower-mask" data-tfxfwc="x,309,148px" style="visibility:visible;top:148px;left:auto;right:50%;margin-right:542px;opacity:1;z-index:99;width:109px;height:506px;background: url(http://img04.taobaocdn.com/imgextra/i4/1049562762/T2uvhPXYNaXXXXXXXX-1049562762.png) 50% 0% no-repeat scroll;"><div class="rel" style="width:109px;height:506px;overflow:hidden;"></div></div></div></ul></div>

倒计时：

<div class="rel" style="width:990px;height:92px;background:url(图片地址) top center no-repeat;"> <a class="jdb abs" href="http://ddshop.tmall.com/p/rd687149.htm?&&&&&&&&&&scene=taobao_shop" style="display:block;width:700px;height:81px;top:3px;left:318px;border-color:#000000;border-style:solid;border:none;background-image:url(http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/spaceball.gif);z-index:99;float:left;" target="_blank" title=""></a><div class="jcdb abs J_TWidget" data-widget-config="{ "endTime": "2014-6-17 00:00:00", "interval": 1000, "timeRunCls": ".ks-countdown-run", "timeUnitCls":{ "d": ".ks-d", "h": ".ks-h", "m": ".ks-m", "s": ".ks-s" }, "minDigit": 2, "timeEndCls": ".ks-countdown-end" }" data-widget-type="Countdown" style="width:214px;height:28px;left:680px;z-index:99;float:right;margin:0px;padding:0px;margin-top:53px;margin-right:7px;"> <span class="ks-d" style="display:block;float:left;text-align:center;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-h" style="display:block;float:left;text-align:center;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-m" style="display:block;text-align:center;float:left;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span><span class="ks-s" style="display:block;text-align:center;float:left;width:28px;margin-left:20px;color:#FFFFFF;font-family:arial;font-weight:700;font-size:18px;">00</span> </div>
</div>

<div style="color:#00F; background-color:#CCC">
<div class="J_TWidget" data-widget-type="Countdown"  data-widget-config="{'endTime': '30000','interval': 1000, 'timeRunCls': '.ks-countdown-run', 'timeUnitCls':{'d': '.ks-d',       'h': '.ks-h',       'm': '.ks-m',       's': '.ks-s',       'i': '.ks-i'        },'minDigit': 1,'timeEndCls': '.ks-countdown-end'
}"><!-- 倒计时结束时隐藏--><!--可以写多个 --><div class="ks-countdown-run"> <span class="ks-d value" style=" display:inline; color:#333; vertical-align:middle; line-height:1em;">0</span>天 <span class="ks-h value">0</span>小时 <span class="ks-m value">0</span>分<!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 --><span class="ks-s value">00</span>秒 <span class="ks-i value"></span>毫秒 </div><div class="ks-countdown-run"></div><!-- 倒计时结束时显示--><!--可以写多个 --><div class="ks-countdown-end"> 倒计时结束了,干点什吧把什么隐藏起来，或者把什么显示出来 </div><div class="ks-countdown-end"> </div>
</div>
</div>

搜索框：

<div class="st" style="height:67px; background:url(http://img04.taobaocdn.com/imgextra/i4/1049562762/TB2F40eXpXXXXXQXFXXXXXXXXXX-1049562762.jpg) no-repeat;"><form action="http://ddshop.tmall.com/?search=y&scene=taobao_shop" method="post" name="SearchForm"><div class="input" style="width:245px;float:left; margin-left:549px; margin-top:15px;"><input style="margin-top:2px; border:0px;width:310px;height:33px; font-size:16px; padding-left:5px; font-weight:bold;" value="奶粉" name="keyword" /></div><div class="submit l"><button style="width:70px;background:url(http://img02.taobaocdn.com/imgextra/i2/1049562762/TB2Q66OXXXXXXcrXFXXXXXXXXXX-1049562762.jpg) no-repeat;height:34px; border:0px;margin-left:60px; margin-top:17px;" title="搜索" type="submit" class="crumbSearch-btn J_TCrumbSearchBtn"></button></div></form></div>

去除自定义之间的10px

<div style="height:436px;width:990px;"><div class="sn-simple-logo" style="width:990px;height:446px;left:auto;top:auto;margin:0;padding:0;border:0;"><div class="sn-simple-logo" style="top:-10px;margin:0;padding:0;border:0;"><img src="http:高度为446px的图片地址" /></div></div>
</div>

调用导航中css的方法：

<div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_ddshop','contentCls':'con_ddshop','autoplay':true}">
<div style="position:relative;">
<ul class="con_ddshop" style="display:none;position:absolute;width:999999px;left:0;">
<li style="width:1920px;height:auto;display:block;float:left;"></li>
</ul>
</div>
<div style="width:1920px;height:auto;">
<ul class="nav_ddshop">
<li class="tshop-pbsm-shop-nav-ch"></li>
</ul>
</div>
</div>

css3过渡效果：

.transition{transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;}

天猫商城应用自定义类代码相关推荐

自定义数组操作工具类代码示例
自定义一个操作数据的工具类,其实工具类的编写很简单,将方法静态化,将构造方法私有化就可以了. 工具类代码: class MyArrays{private MyArrays() {}/** 返回数组中最 ...
python对数组排序代码实现_Python自定义类的数组排序实现代码
首先把实现方法写出来,其实很简单,只需要一句代码即可: 复制代码代码如下: productlist.sort(lambda p1, p2:cmp(p1.getPrice(), p2.getPrice ...
编写程序描述影视歌三栖艺人需求说明：请使用面向对象的思想，设计自定义类，描述影视歌三梄艺人。实现思路及关键代码 1)分析影视歌三栖艺人的特性 a)可以演电影 b)可以演电视剧 c)可以唱歌
编写程序描述影视歌三栖艺人需求说明:请使用面向对象的思想,设计自定义类,描述影视歌三梄艺人. 实现思路及关键代码 1)分析影视歌三栖艺人的特性 a)可以演电影 b)可以演电视剧 c)可以唱歌 2)定 ...
6、NC自定义参照类代码
** 6.NC自定义参照类代码 ** package nc.ui.hfet.refmodel; import nc.ui.bd.ref.AbstractRefModel; import nc.vo.p ...
滚动代码循环滚动代码如何怎么样做淘宝轮播代码滚动天猫店铺装修自定义内容代码设置
滚动代码循环滚动代码如何怎么样做淘宝轮播代码滚动天猫店铺装修自定义内容代码设置
天猫商城在线购物系统
天猫商城在线购物系统本博文对Gitee开源项目 SpringBoot迷你天猫商城(Mini-Tmall)中的商品管理和商品分类管理进行讲解. 在此也感谢开源项目作者@贤趣项目小组在此附上原项目链接 ...
模仿天猫商城的J2EE商城网站项目后端——servlet+filter配合详细分析
目录模仿天猫商城的J2EE商城网站项目后端2--需求分析代码工作流程图(也是整个项目的代码工作流程图) 举例分析 1 后台servlet过滤器BackServletFilter对其进行拦截,并进行 ...
JavaWeb代码审计实战之迷你天猫商城系统详细分析版，实战应用级系统的Log4j2shell代码审计
嗨,大家好,我是闪石星曜CyberSecurity创始人Power7089. 欢迎大家搜索并关注我的VX:闪石星曜CyberSecurity 本文是[炼石计划@Java代码审计]内部圈子原创课程,公益 ...
VS2010 MFC中改变static字体颜色、大小、背景颜色（自定义类），及手动关联变量的方法...
在MFC的Dialog工程中生成一个CStatic的自定义类,类名例如为:CColorStatic 定义必要的变量: protected:COLORREF m_crText; // 字体颜色COLOR ...
matlab 自定义对象,面向对象：MATLAB的自定义类 [MATLAB]
这几天刚刚开始学习MATLAB的面向对象编程.以前做的事情都是用MATLAB写一些简单的脚本或者函数,这方面MATLAB成熟的函数和直截了当的矩阵运算方法和语法都很容易上手,方便人专注于算法本身.前几 ...

天猫商城应用自定义类代码

天猫商城应用自定义类代码相关推荐

最新文章

热门文章