天猫装修全屏、轮播、导航css代码

文章内索引
[隐藏]

天猫首页宽屏代码

<div style="height:540px;">
    <div class="sn-simple-logo" style="left:50%;top:auto;border:none;padding:0;">
        <div class="sn-simple-logo" style="left:-960px;top:auto;border:none;padding:0;">
            <img src="//gdp.alicdn.com/imgextra/i2/2110849581/TB2UX1AcVXXXXaRXXXXXXXXXXXX-2110849581.jpg" border="0" height="550" width="1920" />
        </div>
    </div>
</div>

天猫全屏轮播

<div class="J_TWidget mypopereeeacclD" data-widget-config="{"effect": "fade","circular": true ,"contentCls":"sj-teeeacclD","navCls":"sj-neeeacclD","autoplay":"true"}" data-widget-type="Tabs" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:472px;overflow:hidden;padding-top:0px;">
    <div class="sj-teeeacclD">
        <div class="J_TWidget ks-switchable-panel-internal532" data-widget-config="{"contentCls": "sj-contenteeeacclD","navCls": "sj-neeeacclD","triggerType": "click","effect": "fade","steps": 1,"autoplay": true,"circular": true ,"prevBtnCls":"prev1eeeacclD","nextBtnCls":"next1eeeacclDeeeacclD"}" data-widget-type="Carousel" style="display:block;opacity:1;z-index:9;">
            <div class="pa2">
                <ul class="sj-contenteeeacclD" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:482px;overflow:hidden;padding-top:0px;">
                    <li class="ks-switchable-panel-internal631" style="padding:0px;list-style-type:none;margin:0px;width:1920px;left:-465px;display:block;opacity:1;z-index:9;">
                        <div style="width:1920px;height:482px;overflow:hidden;">
                            <div style="width:1920px;height:482px;position:relative;" class="J_TWidget" data-widget-type="Carousel" data-widget-config="{"contentCls": "taobao-kaidian-com","navCls": "taobaokaidian-com","interval": 4,"effect": "scrollx","easing": "easeOutStrong","prevBtnCls":"prev","nextBtnCls":"next","autoplay": true,"viewSize":[1920],"circular": true}">
                                <div class="ux19201" style="height:482px;margin:0;padding:0;position:relative;width:1920px;">
                                    <div class="taobao-kaidian-com">
                                        <div>
                                             <a href="http://detail.tmall.com/item.htm?spm=a1z10.1.w5003-8572521508.1.XJIXFB&id=42800937602&scene=taobao_shop" target="_blank"><img src="http://img03.taobaocdn.com/imgextra/i3/2110849581/TB2zVFlbpXXXXbcXpXXXXXXXXXX-2110849581.jpg" border="0" height="482" width="1920" /></a>
                                        </div>
                                        <div>
                                             <a href="http://detail.tmall.com/item.htm?spm=0.0.0.0.XL5qVl&id=41947108847" target="_blank"><img src="http://img01.taobaocdn.com/imgextra/i1/2110849581/TB2Q44tbpXXXXcdXXXXXXXXXXXX-2110849581.jpg" border="0" height="482" width="1920" /></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="taobaokaidian-com" style="display:none;">

                                </div>
                                <div style="display:none;" class="J_TWidget" data-widget-type="Popup" data-widget-config="{"trigger":".ux19201","align":{"node":".ux19201","offset":[-490,0],"points":["cc","cc"]}}">
                                    <div style="font-size:100px;cursor:pointer;opacity:0.8;" class="prev">
                                         <span><img title="上一屏" src="http://img.taobao.com/L1/142/404953570/modules/tshop-um-bghb/assets/images/pre.png" /> </span>
                                    </div>
                                </div>
                                <div style="display:none;" class="J_TWidget" data-widget-type="Popup" data-widget-config="{"trigger":".ux19201","align":{"node":".ux19201","offset":[490,0],"points":["cc","cc"]}}">
                                    <div style="font-size:100px;cursor:pointer;opacity:0.8;" class="next">
                                         <span><img title="下一屏" src="http://img.taobao.com/L1/142/404953570/modules/tshop-um-bghb/assets/images/next.png" /> </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <ul class="sj-neeeacclD" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">
                <li class="ks-switchable-trigger-internal531 ks-switchable-trigger-internal630">

                </li>
                <li class="ks-switchable-trigger-internal531 ks-switchable-trigger-internal630">

                </li>
            </ul>
        </div>
    </div>
</div>

天猫导航样式

.skin-box-bd{background:transparent;}.skin-box-bd .link{background:transparent;}.skin-box-bd .menu-list{background:transparent;}.skin-box-bd .menu-list .menu-hover .link{background:#211119;}.skin-box-bd .menu-list .menu-hover .link .title{color:#CCCCCC;}.popup-content{background:#FFFFFF;}.popup-content .cats-tree .snd-pop-inner{background:#CCCCCC;}.popup-content .cats-tree .cat-hd-hover{background:#CCC;}.menu-list .menu.menu-selected{background:none repeat scroll 0 0 #211119;}.snd-pop-inner{height:100%;}.snd-pop-inner .fst-cat-bd{padding:0px;margin:0px;}.popup-content .cats-tree .fst-cat .cat-name{color:#333;text-decoration:none;}.snd-pop-inner .fst-cat-bd .snd-cat-name{color:#000000;text-decoration:none;}.menu-list .menu .link .title{color:#3A302C;}.menu-list .menu-selected .link .title{color:#FFF!important;}

/* 导航条背景色*/
.skin-box-bd, .skin-box-bd .menu-list{background: none repeat scroll 0 0 #353535;}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #353535;}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{border-right:none;}
/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .title{color:#f4f4f4}
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #353535;}
/*所有分类右边线*/
.all-cats .link{border-right:none;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color:#f4f4f4}
/*选中项*/
.skin-box-bd .tshop-pbsm-shop-nav-ch .menu-list .menu.menu-selected { background: none repeat scroll 0 0 #353535; }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

4 × 5 =