1. 程式人生 > >折800首頁的靜態頁面

折800首頁的靜態頁面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>電商</title>
<link rel="stylesheet" href="css/indix.css">
</head>


<body>
<!--右邊固定欄-->
<div class="r-fixed">
<div class="fix1">
      <p></p>
      <i>購物車</i>
      <b>0</b>
    </div>
<div class="fix2 size">
      <p class="on">我的訂單</p>      
    </div>
    <div class="fix3 size">
      <p class="on">我的優惠卷</p>      
    </div>
     <div class="fix4 size">
      <p class="on">我的收藏</p>      
    </div>
    <div class="fix5 size">
      <p class="on">我的訂單</p>      
    </div>
    <div class="fix6 size">
      <p class="on on-f">想領錢,先簽到
積分抵現又換禮</p>      
    </div>
    <div class="fix7 size">
      <p class="on"><img src="pic/ma.png"></p>      
    </div>
    <div class="fix8 size">
      <p class="on">常見問題</p>      
    </div>
    <div class="fix9 size">
      <p class="on">意見反饋</p>      
    </div>  

</div>
<div class="clear"></div>




<!--頭部廣告-->
<div class="top">
<img src="pic/banner.jpg"/>
</div>
<div class="clear"></div>
<!--頭部導航-->
<div class="top-menu">
<a href="#">團800旗下網站</a><span>|</span>
    <a href="#"><i class="ji"></i>手機版</a><span>|</span>
    <a href="#">QQ登入</a><span>|</span>
    <a href="#">登入免費註冊</a><span>|</span>
    <a href="#">我的訂單</a><span>|</span>
    <a href="#"><i class="huo"></i>購物車</a><span>|</span>
    <a href="#">幫助中心</a><span>|</span>
    <a href="#">賣家中心</a>
</div>
<div class="clear"></div>
<!--頭部導航-->
<div class="logo">
<img src="pic/logo_zhe800.png"/>
    <div class="input">
    <input type="text" class="input1">
    <input type="submit" value="搜尋" class="input2">
    </div>
    <img src="pic/toolbar_kuan.jpg" class="mg"/>
</div>
<!--商品導航-->
<div class="clear"></div>      
<div class="nav">
<ul>
<li><a href="#" class="on">首頁</a></li>
    <li><a href="#">品牌團</a></li>
    <li><a href="#">優品彙</a></li>
    <li><a href="#">淘寶精選</a></li>
    <li><a href="#">9塊9包郵</a></li>
    <li><a href="#">精選預告特賣商城</a></li>
    <li><a href="#">積分商城</a></li>
    </ul>
    <div class="img1">
    <img src="pic/dd.gif"/>
    <img src="pic/xn.jpg" class="xn"/>
    </div>
    <div class="img2"><img src="pic/toolbar_xiena.png"/></div>
</div>
<!--內容-->
<div class="clear"></div>
<div class="menu">
    <div class="menu-left">    
        <div class="menu-left1"><a href="#">女裝</a><span>、</span><a href="#">內衣<span class="aa">></span></a>
        <p><img src="pic/tt.png"></p>
        </div>
        <div class="menu-left1"> <a href="#">男裝</a><span>、</span><a href="#">鞋品<span class="aa">></span></a>
        <p><img src="pic/tt1.png"></p>
        </div>
        <div class="menu-left1"> <a href="#">兒童</a><span>、</span><a href="#">母嬰<span class="aa">></span></a>
        <p><img src="pic/tt2.png"></p>
        </div>
        <div class="menu-left1"><a href="#">家紡</a><span>、</span><a href="#">居家<span class="aa">></span></a>
        <p><img src="pic/tt3.png"></p>
        </div>
        <div class="menu-left1"><a href="#">美食</a><span>、</span><a href="#">箱包<span class="aa">></span></a>
        <p><img src="pic/tt4.png"></p>
        </div>
        <div class="menu-left1"><a href="#">數碼家電</a><span class="aa">></span>
        <p><img src="pic/tt5.png"></p>
        </div>
        <div class="menu-left1"><a href="#">美妝</a><span>、</span><a href="#">配飾 <span class="aa">></span></a>
        <p><img src="pic/tt7.png"></p>
        </div>
        <div class="menu-left1"><a href="#">運動</a><span>、</span><a href="#">中老年<span class="aa">></span></a>
        <p><img src="pic/tt6.png"></p>
        </div>
        <div class="menu-left1"><a href="#">今日上新</a><a href="#">最後搶</a><a href="#">排行榜</a></div>
        <div class="menu-left1"><a href="#">每日十件</a><a href="#">值得買</a><a href="#">限量搶</a>        
        </div>
        <div class="menu-right"><img src="pic/tl.jpg"/></div>
    </div>
</div>
<!--品牌熱賣-->
<div class="clear"></div>
<div class="conter">
      <div class="conter1">品牌熱賣</div>     
      <div class="conter2"></div>
      <div class="conter3">今日線上品牌 981 個</div>
      <div class="conter4">
      <ul>                            
      <li><a href="#" class="conter-c">女裝</a></li>
        <li><a href="#" class="conter-c">家紡</a></li>
        <li><a href="#">兒童</a></li>
        <li><a href="#">美妝</a></li>
        <li><a href="#" class="conter-c">母嬰</a></li>
        <li><a href="#">男裝</a></li>
        <li><a href="#">箱包</a></li>
        <li><a href="#">內衣</a></li>
        <li><a href="#" class="conter-c">運動</a></li>
        <li><a href="#" class="conter-c">鞋品</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#" class="conter-c">中老年</a></li>
        <li><a href="#">配飾</a></li>
        <li><a href="#">數碼家電</a></li>
        <li><a href="#" class="conter-b">全部品牌</a></li>
      </ul>
      </div>  
</div>
<div class="image"> 
<a href="#" class="image1"><img src="pic/tu1.jpg"/><p>【梵繡】2件8折</p></a>
    <a href="#" class="image2"><img src="pic/tu2.jpg"/><p>【Cantorp】 滿2件8折</p></a>
    <a href="#" class="image3"><img src="pic/tu3.jpg"/><p>【古奇天倫】2件8.8折</p></a>
</div>




<!--各公司logo-->
<div class="g-logo">
<div>
    <img src="pic/logo1.jpg"/><img src="pic/logo2.jpg"/><img src="pic/logo3.jpg"/><img src="pic/logo4.jpg"/><img src="pic/logo5.jpg"/>
    <img src="pic/logo6.jpg"/><img src="pic/logo7.jpg"/><img src="pic/logo8.jpg"/><img src="pic/logo9.jpg"/><img src="pic/logo10.jpg"/>
    </div>
<div>
    <img src="pic/logo11.jpg"/><img src="pic/logo12.jpg"/><img src="pic/logo13.jpg"/><img src="pic/logo14.jpg"/><img src="pic/logo15.jpg"/>
    <img src="pic/logo16.jpg"/><img src="pic/logo17.jpg"/><img src="pic/logo18.jpg"/><img src="pic/logo19.jpg"/><img src="pic/logo20.jpg"/>
    </div>
</div>
<!--限量搶購-->
<div class="clear"></div>
<div class="conter">
 <div class="conter1">限量搶購</div>     
      <div class="conter4">    
      <ul>                            
      <li><a href="#" class="conter-b">00:00 開搶</a></li>
        <li><a href="#" class="conter-c">09:00 開搶</a></li>
        <li><a href="#" class="conter-c">11:00 開搶 </a></li>
        <li><a href="#" class="conter-c">13:00 開搶</a></li>
        <li><a href="#" class="conter-c">15:00 開搶</a></li>
        <li><a href="#" class="conter-c">17:00 開搶</a></li>
        <li><a href="#" class="conter-c">19:00 開搶 </a></li>
        <li><a href="#" class="conter-c">明日預告</a></li>          
      </ul>
      </div>
</div>
<div class="padding">
<a href="#" class="padding1"><img src="pic/xi1.jpg"/>
    <p>還剩35件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥32</i>
    <b>還剩55件</b>
    </a>    
    <a href="#" class="padding2 ff"><img src="pic/xi2.jpg"/>
    <p>還剩35件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥42</i>
    <b>還剩15件</b>
    </a>
    <a href="#" class="padding3 ff"><img src="pic/xi3.jpg"/>
    <p>還剩35件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥72</i>
    <b>還剩45件</b>
    </a>
    <a href="#" class="padding4 ff"><img src="pic/xi4.jpg"/>
    <p>還剩23件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥54</i>
    <b>還剩505件</b>
    </a>
    <a href="#" class="padding5 ff"><img src="pic/xi5.jpg"/>
    <p>還剩89件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥56</i>
    <b>還剩55件</b>
    </a>
    <a href="#" class="padding6"><img src="pic/xi6.jpg"/>
    <p>還剩35件 搶完恢復原價29.9元</p>
    <span>復古貓眼珍珠長款項鍊吊墜</span>
    <i>¥40</i>
    <b>還剩75件</b>
    </a>
</div>
<div class="clear"></div>
<!--熱銷推薦-->
<div class="conter">
      <div class="conter1">熱銷推薦</div>     
      <div class="conter2"></div>
      <div class="conter3"><a href="#">即將下架</a> <span>|</span><a href="#">人氣爆款</a><span>|</span><a href>每日更新</a></div>      
</div>


<div class="margin">
<a href="#" class="margin1"><img src="pic/xx1.jpg"/></a>
    <a href="#" class="margin2"><img src="pic/xx2.jpg"/></a>
    <a href="#" class="margin2"><img src="pic/xx3.jpg"/></a>
    <a href="#" class="margin2"><img src="pic/xx4.jpg"/></a>
    <a href="#" class="margin3"><img src="pic/xx5.jpg"/></a>
</div>


<!--今日已更新-->
<div class="clear"></div>
<div class="conter">
      <div class="conter1">今日已更新</div>     
      <div class="conter2"></div>
      <div class="conter3"><a href="#">13759款</a></div>
      <div class="conter4">
      <ul>               
      <li><a href="#" class="conter-c">預設</a></li>
        <li><a href="#">男</a></li>
        <li><a href="#">女</a></li>
        <li><a href="#" class="conter-c">辣媽</a></li>
        <li><a href="#">排序</a></li>
        <li><a href="#" class="conter-c conter-bk">最新</a></li>
        <li><a href="#" class="conter-c conter-b">最熱</a></li>        
      </ul>
      </div>  
</div>
<div class="clear"></div>
<div class="hot">
<div class="get">
        <div class="get-new"><img src="pic/new.png"></div>
    <div class="get1">
        <img src="pic/hot1.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>
<div class="get">
    <div class="get-miao"><img src="pic/homepage_xsqms_icon.png"></div>
    <div class="get1">
        <img src="pic/hot2.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>
<div class="get">
    <div class="get-miao"><img src="pic/homepage_xsqms_icon.png"></div>
        <div class="get1">
        <img src="pic/hot3.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get-new"><img src="pic/new.png"></div>
    <div class="get1">
        <img src="pic/hot4.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get1">
        <img src="pic/hot4.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>    
<div class="get">
    <div class="get1">
        <img src="pic/hot5.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get1">
        <img src="pic/hot6.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get1">
        <img src="pic/hot7.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get1">
        <img src="pic/hot8.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>   
<div class="get">
    <div class="get1">
        <img src="pic/hot9.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>
<div class="get">
    <div class="get1">
        <img src="pic/hot10.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>
<div class="get">
    <div class="get1">
        <img src="pic/hot11.jpg"/>
        <p>冬季男士棒球領棉服外套</p>
        </div>
        <div class="get2">            
            <span>¥14.3</span><i>即將恢復至17.8元</i><b>已售6702件</b>                      
        </div>
        <div class="clear"></div>       
        <div class="get3">          
             <b>包郵</b><span>|</span><b>返積分</b><span>|</span><i>退貨補貼優惠券</i><i>收藏</i><i>[詳情]</i>
        </div>
    </div>
<!--頁碼-->
<div class="clear"></div>
    <div class="footer1">
        <a href="#">上一頁</a>
        <a href="#" class="on">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">...</a>
        <a href="#" >下一頁</a>
    </div>
    
    <div class="margin">
        <a href="#" class="margin1"><img src="pic/xx1.jpg"/></a>
        <a href="#" class="margin2"><img src="pic/xx2.jpg"/></a>
        <a href="#" class="margin2"><img src="pic/xx3.jpg"/></a>
        <a href="#" class="margin2"><img src="pic/xx4.jpg"/></a>
        <a href="#" class="margin3"><img src="pic/xx5.jpg"/></a>
    </div>
 <!--公司外鏈-->   
<div class="footer2">
     <div class="footer2-1">
      <p>關於我們</p>
        <a href="#">關於我們</a>
        <a href="#">誠聘英才</a>
        <a href="#">網站服務條款</a>
        <a href="#">使用者服務協議</a>
        <a href="#">聯絡我們</a>
     </div>
     <div class="footer2-1">
      <p>購物指南</p>
        <a href="#">新手玩轉折800</a>
        <a href="#">訂單查詢</a>
        <a href="#">會員介紹</a>
        <a href="#">積分攻略</a>
        <a href="#">幫助中心</a>
     </div>   
<div class="footer2-1">
      <p>消費者保障</p>
        <a href="#">人工驗貨</a>
        <a href="#">退貨退款政策</a>
        <a href="#">運費補貼卡</a>
        <a href="#">無憂售後</a>
        <a href="#">先行賠付</a>
     </div>
     <div class="footer2-1">
      <p>商務合作</p>
        <a href="#">商家報名</a>
        <a href="#">友情連結</a>
        <a href="#">廉正舉報</a>       
     </div>
     <div class="footer2-1">
      <p>下次怎麼來?</p>
        <a href="#"><span class="footer2-f">記住域名:</span><span>zhe800.com</span></a>
        <a href="#"><span class="footer2-f">百度搜索:</span></a>
        <input type="text" placeholder="折800" class="footer2-on1"><input type="submit" value="搜尋" class="footer2-on2">
        <a href="#"><span class="footer2-f">下載桌面快捷方式</span></a>
        <a href="#"><span class="footer2-f">收藏本站:</span>加入收藏</a>
        <a href="#"><span class="footer2-f">訂閱本站:</span></a>
        <input type="text" placeholder="輸入您的郵件" class="footer2-t"><input type="submit" value="訂閱"  class="">
     </div>
     <div class="footer2-1">
      <p>下載手機版</p>
        <img src="pic/erweima.png">
        <a href="#">掃描下載折800</a>
        <a href="#">把折扣握在手心</a>
        <a href="#">把潮流帶在身邊</a> 
     </div>  
<div class="clear"></div>
<div class="footer3">
    <p>友情連結:</p>
        <a href="#">搖籃網</a>
        <a href="#">火車票</a>
        <a href="#">千圖網</a>
        <a href="#">童鞋會</a>
        <a href="#">移動版</a>
        <a href="#" class="on">更多>></a>
</div>
<div class="footer4"> 
    <a href="#">京ICP證120075號</a>
         <p>京ICP備10051110號-5</p>
         <a href="#">京公網安備11010502025623</a>
         <p>營業執照110105013673175</p>
         <p>食品流通許可證SP1101051510352397</p>   
</div>


<div class="footer5">   
    <p>出版物經營許可證</p>
        <p>Copyright©2011-2015</p>
        <p>版權所有</p>
        <p>ZHE800.COM</p>        
</div>
<div class="footer6">   
    <p class="footer6-1"></p>
        <p class="footer6-2"></p>
        <p class="footer6-3"></p>               
</div>






</body>

</html>

CSS樣式:

body,div,p ,ul,li,span,b,i,img{margin:0px;padding:0px;font-size:12px;font-family:"微軟雅黑";}
*{margin:0px;padding:0px;}
ul,li{list-style:none;}
i{font-style:normal;}
b{font-weight:normal;}
a{text-decoration:none;}
/*頭部廣告部 */
.top{width:1350px;height:220px;}
.top img{width:1350px;height:220px;}
/*右邊固定欄border:#936 1px solid;*/
.r-fixed{width:34px;height:1000px;background:#000;position:fixed;right:0px;z-index:80;}
.r-fixed .fix1{background:#000;width:34px;height:110px;margin-top:50px;}
.r-fixed .fix1:hover{background:#AF000A;}
.r-fixed .fix1 p{float:left;display:block;width:34px;height:24px;background:url(../pic/big_bg_img_v3.png) no-repeat -157px -395px;}
.r-fixed .fix1 i{float:left;display:block;width:14px;text-align:center;margin-left:10px;font-size:14px;color:#FFF;}
.r-fixed .fix1 b{float:left;display:block;width:20px;height:20px;line-height:20px;margin-left:7px;color:#FFF;background:#AF000A;text-align:center;border-radius:50%;margin-top:5px;}
.r-fixed .fix1:hover b{background:#FFF;color:#AF000A;}
.r-fixed .fix2{position:relative;background-position:-229px -388px;}
.r-fixed .size{height:43px;width:34px;background-color:#000;background-image:url(../pic/big_bg_img_v3.png);background-repeat:no-repeat;}
.r-fixed .size:hover{background-color:#AF000A;}
.r-fixed .size .on{position:absolute;width:91px;height:43px;right:34px;background:#AF000A;line-height:43px;color:#FFF;font-size:14px;text-align:center;border-radius:3px 0px 0px 3px;display:none;}
.r-fixed .size:hover .on{display:block;}
.r-fixed .fix3{position:relative;background-position:-785px -0px;}
.r-fixed .fix4{position:relative;background-position:-775px -395px;}
.r-fixed .fix5{position:relative;background-position:-545px -390px;}
.r-fixed .fix6{position:relative; top:50px;background-position:-300px -390px;}
.r-fixed .fix6 .on-f{font-size:12px;line-height:21px;}
.r-fixed .fix7{position:relative; top:50px;background-position:-365px -386px;}
.r-fixed .fix7 img{position:absolute;right:0px;}
.r-fixed .fix8{position:relative; top:50px;background-position:-428px -390px;}
.r-fixed .fix9{position:relative; top:50px;background-position:-598px -390px;}


/*頭部導航 */
.top-menu{width:700px;height:30px;line-height:30px;margin-right:70px;margin-left:500px;}
.top-menu a{height:30px;display:block;float:left;color:#999;margin:0px 12px; }
.top-menu span{width:2px;height:30px;color:#999;float:left;}
.top-menu .ji{width:20px;height:20px;display:inline-block;background:url(../pic/mobile_icon.png) no-repeat;vertical-align:middle;}
.top-menu .huo{width:20px;height:20px;display:inline-block;background:url(../pic/cart_icon.png) no-repeat;vertical-align:middle;}
.clear{clear:both;}
/*logo搜尋 */
.logo{width:1200px;height:45px;margin:0px auto;}
.logo img{float:left;}
.logo .input{width:482px;height:36px;float:left;margin-top:8px;margin-left:20px;}
.logo .input input{outline:none;}
.logo .input .input1{height:35px;width:400px;border:#F00 1px solid;float:left;}
.logo .input .input2{height:37px;line-height:35px;width:80px;background:#F00;color:#FFF;margin-left:0px;float:left;border:0px;font-size:24px;text-align:center;}
.logo .mg{width:400px;height:45px;margin-left:40px;}
/*商品導航 */
.nav{width:1200px;height:63px;margin:0px auto;broder:0px;border-bottom:#F00 2px solid;}
.nav ul{float:left;width:700px;color:#FFF;margin-top:29px;}
.nav ul li{float:left; font-size:16px; }
.nav ul li a{float:left; display:block; padding:0px 15px;height:34px;line-height:34px;color:#666;}
.nav ul li .on{background:#F00;color:#FFF;}
.nav ul li a:hover{color:#F00;}
.nav ul li a:hover.on{color:#FFF;}
.nav .img1{float:left;margin-left:120px;margin-top:29px;position:relative;}
.nav .img1 .xn{position:absolute;top:35px;left:-380px;display:none;z-index:100;}
.nav .img1:hover .xn{display:block;}
.nav .img2{float:right;margin-left:50pxpx;}
/*內容 */
.menu{width:1200px;height:350px;margin:0px auto;position:relative;broder:0px;}
.menu .menu-left{width:170px;height:350px;float:left;background:#9B908E}
.menu .menu-left1{width:170px;height:35px;line-height:35px;float:left;font-size:14px;text-align:center;position:relative;}
.menu .menu-left1:hover{color:#FFF;background:#333333;}
.menu .menu-left a{color:#FFF;}
.menu .menu-left span{color:#FFF;}
.menu .menu-left .aa{padding-left:40px;float:right;}
.menu .menu-left p{width:385px;height:350px;position:absolute;z-index:80;top:0px;left:170px;display:none;}
.menu .menu-left .menu-left1:hover p{display:block;}
.menu .menu-right{float:left;width:1030px;height:350px;position:absolute;right:0px;top:0px; }
/*品牌熱賣 */
.conter{width:1200px;height:60px;margin:0px auto;border-bottom:#F00 1px solid;}
.conter .conter1{font-size:20px;float:left;margin-top:30px;}
.conter .conter2{width:10px;height:10px;background:#F00;border-radius:50%;float:left;margin-top:40px;margin-left:5px;}
.conter .conter3{font-size:14px;float:left;margin-top:37px;margin-left:5px;}
.conter .conter4{width:900x;float:right; }
.conter .conter4 ul{margin-top:40px;}
.conter .conter4 ul li{float:left;}
.conter .conter4 ul li a{float:left;font-size:14px;height:20px;line-height:20px;display:block;padding:0px 10px;text-align:center;color:#999;}
.conter .conter4 ul li a.conter-c{color:#F00;}
.conter .conter4 ul li a.conter-b{background:#F00;color:#FFF;}
.conter .conter4 ul li a.conter-bk{border-left:#F00 1px solid;border-top:#F00 1px solid;}


.image{width:1200px;height:150px;margin:0px auto;position:relative;margin-top:10px;}
.image a{position:relative;}
.image a.image1{float:left;}
.image a.image2{float:left;margin:0px 12px;}
.image a.image3{float:right;}
.image a:hover img{transition:all 0.6s;opacity:0.5;}
.image a p{ float:left;width:392px;height:20px;line-height:20px;text-align:center;background:rgba(51,51,51,0.5);position:absolute;color:#FFF;bottom:4px;}


.g-logo{width:1204px;height:120x;margin:0px auto;}
/*限量搶購 */
.padding{width:1200px;height:245px;margin:0px auto;margin-top:10px;}
.padding a{float:left;position:relative;}
.padding a.ff{float:left;margin:0px 3px;}
.padding a.padding1{float:left;}
.padding a.padding6{float:right;}
.padding a p{position:absolute;width:195px;height:20px;background:rgba(51,51,51,0.5);color:#FFF;bottom:0px;display:none;}
.padding a:hover p{display:block;}
.padding a span{float:left;position:absolute;width:195px;height:20px;background:#FFF;color:#999;bottom:-16px;display:block;}
.padding a i{float:left;position:absolute;width:100px;height:20px;background:#FFF;color:#F00;bottom:-36px;display:block;padding-left:10px;font-size:18px;}
.padding a b{;position:absolute;width:80px;height:20px;background:#FFF;color:#999;bottom:-42px;right:0px;display:block;padding-left:50px}
/*熱銷推薦*/
.conter3 a{font-size:12px;color:#F00;}
.conter3 a:hover{text-decor}
.conter3 span{color:#F00;}


.margin{width:1200px;height:130px;margin:0px auto;margin-top:20px;}
.margin .margin1{float:left;}
.margin .margin1{float:left;}
.margin .margin3{float:right;}
/*今日已更新*/
.hot{width:1200px;margin:0px auto;margin-top:10px;}
.hot .get{width:283px; height:365px;border:transparent 1px solid;float:left;margin-right:20px;position:relative;}
.hot .get:nth-child(4n){margin-right:0px;}
.hot .get .get-new{position:absolute;top:0px;left:0px;}
.hot .get .get-miao{position:absolute;top:0px;left:0px;}
.hot .get .get1{width:283px;}
.hot .get .get1 img{float:left;width:283px;}
.hot .get .get1 p{float:left;width:283px;height:30px;}
.hot .get .get2{width:283px;height:20px;line-height:20px;}
.hot .get .get2 span{float:left;font-size:16px;color:#F00;display:inline-block;color:#F00;margin-left:10px;}
.hot .get .get2 i{font-style:normal;float:left;height:20px;margin-left:10px;font-size:10px;color:#FFF;background:#F00;display:inline-block;margin-left:30px;border-radius:6%;}
.hot .get .get2 b{float:right;font-weight:normal;height:20px;display:inline-block;color:#000;}
.hot .get .get3{width:283px;height:20px;line-height:20px;display:none;border-top:#CCC 2px dotted;margin-top:5px;}
.hot .get:hover .get3{display:block;}
.hot .get:hover{border:#F00 1px solid;}
.hot .get .get3 b{float:left;display:inline-block;color:#F00;margin-left:5px;}
.hot .get .get3 span{float:left;display:inline-block;color:#F00;margin-left:10px}
.hot .get .get3 i{float:left;display:inline-block;margin-left:15px}
/*頁碼*/
.footer1{width:515px;height:50px;margin:0px auto;margin-top:50px;}
.footer1 a{float:left;height:50px;line-height:50px;font-size:24px;border:#F00 1px solid;border-right:#F00 0px solid;padding:0px 20px;color:#999;}
.footer1 a:last-child{border:#F00 1px solid;}
.footer1 a:hover{background:#F00;color:#FFF;}
.footer1 a.on{background:#F00;color:#FFF;}
/*底部連線*/
.footer2{width:1200px;height:220px;margin:0px auto;margin-top:10px;border-top:#F00 3px solid;}
.footer2 .footer2-1{width:198px;height:220px;float:left;margin-top:30px;}
.footer2 .footer2-1 p{float:left;display:block;width:200px;font-size:16px;color:#333;}
.footer2 .footer2-1 a{float:left;display:block;width:200px;font-size:12px;color:#666;}
.footer2 .footer2-1 a:hover{text-decoration:underline;}
.footer2 .footer2-1 a span{color:#F00;margin-left:5px;float:left;}
.footer2 .footer2-1 a .footer2-on1{float:left;width:50px;}
.footer2 .footer2-1 a .footer2-on2{float:left;width:30px;height:20px;line-height:20px;}
.footer2 .footer2-1 a .footer2-f{float:left;font-size:12px;color:#666;}
.footer2 .footer2-1 .footer2-t{float:left;width:90px;height:25px;line-height:20px;}


.footer3{width:700px;height:20px;line-height:20px;text-align:center;margin:0px auto;margin-top:10px;}
.footer3  p{float:left;display:inline-block;margin:0px 10px;color:#666;}
.footer3 a{float:left;display:inline-block;margin:0px 10px;color:#666;}
.footer3 a.on{float:right;margin-right:100px;}
.footer3 a:hover{text-decoration:underline;}


.footer4{width:900px;height:20px;line-height:20px;text-align:center;margin:0px auto;margin-top:10px;}
.footer4 p{float:left;display:inline-block;margin:0px 15px;color:#666;}
.footer4 a{float:left;display:inline-block;margin:0px 15px;color:#666;}
.footer4 a.on{float:right;margin-right:150px;}
.footer4 a:hover{text-decoration:underline;}


.footer5{width:500px;height:20px;line-height:20px;text-align:center;margin:0px auto;margin-top:10px;}
.footer5  p{float:left;display:inline-block;margin:0px 5px;color:#666;}


.footer6{width:245px;height:30px;line-height:20px;text-align:center;margin:0px auto;margin-top:10px;}
.footer6 p{float:left;display:inline-block;color:#666;margin:0px 5px;}
.footer6 .footer6-1{width:70px;height:25px;background:url(../pic/big_bg_img_v3.png) no-repeat -885px -624px;}
.footer6 .footer6-2{width:70px;height:25px;background:url(../pic/big_bg_img_v3.png) no-repeat -885px -660px;}
.footer6 .footer6-3{width:70px;height:25px;background:url(../pic/big_bg_img_v3.png) no-repeat -885px -698px;}