- <
- >
* { margin:0; padding:0; } .main-area .main-wrap { width:1090px; margin:0 auto; } .main-area .main-wrap .scale { position:relative; margin:50px 0; float:left; } .main-area .main-wrap .scale .small { width:400px; height:400px; position:relative; border:1px solid #ddd; float:left; } .main-area .main-wrap .scale .small .smallpic { width:100%; height:100%; } .main-area .main-wrap .scale .small .smallmove { background:rgba(255,255,0,0.3); position:absolute; left:0; top:0; display:none; cursor:move; } .main-area .main-wrap .scale ul { position:absolute; bottom:-92px; left:0; margin-top:20px; width:400px; } .main-area .main-wrap .scale ul li { list-style:none; float:left; height:64px; line-height:64px; border:1px solid #ddd; width:64px; margin-left:20px; text-align:center; } .main-area .main-wrap .scale ul li img { width:100%; height:100%; } .main-area .main-wrap .scale ul li:nth-of-type(1) { width:33px; position:relative; margin-left:0; left:0; top:0; } .main-area .main-wrap .scale ul li:nth-of-type(5) { margin-right:0; position:absolute; right:0; top:0; width:33px; } .main-area .main-wrap .scale .big { width:400px; height:400px; position:absolute; top:0; left:430px; border:1px solid #ccc; float:left; margin-left:20px; overflow:hidden; display:none; } .main-area .main-wrap .scale .big .bigpic { position:absolute; left:0; top:0; } .main-area .main-wrap .pro_info { float:left; margin:50px 0 0 50px; width:638px; height:550px; text-align:left; font-size:12px; } .main-area .main-wrap .pro_info>section { padding:10px 0; margin:10px 0; } .main-area .main-wrap .pro_info .pro-title { padding-bottom:5px; margin-bottom:10px; font-size:20px; font-weight:900; } .main-area .main-wrap .pro_info .left-tit { color:#999; font-size:12px; margin-right:50px; } .main-area .main-wrap .pro_info .price-area { width:100%; line-height:30px; padding:10px 0; background:#ddd; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } .main-area .main-wrap .pro_info .price-area .sell-price { color:#f00; font-size:30px; display:inline-block; vertical-align:middle; } .main-area .main-wrap .pro_info .price-area .freepost { display:inline-block; width:24px; height:18px; line-height:18px; padding:0 5px; margin:0 10px; background-color:pink; color:#fff; border-radius:3px; } .main-area .main-wrap .pro_info .activity .newactivity { width:48px; height:18px; padding:0 5px; background-color:#f00; color:#fff; margin-right:10px; } .main-area .main-wrap .pro_info .activity i { color:#f00; } .main-area .main-wrap .pro_info .postage .city { display:inline-block; width:70px; height:20px; line-height:20px; border:1px solid #999; text-align:center; } .main-area .main-wrap .pro_info .service { color:#333; } .main-area .main-wrap .pro_info .amount-box .num-goods { display:inline-block; border:1px solid #999; text-align:center; } .main-area .main-wrap .pro_info .amount-box .num-goods button { display:inline-block; width:25px; line-height:22px; font-size:20px; color:#333; border:none; outline:none; cursor:pointer; } .main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(1) { border-right:1px solid #999; } .main-area .main-wrap .pro_info .amount-box .num-goods button:nth-of-type(2) { border-left:1px solid #999; } .main-area .main-wrap .pro_info .amount-box .num-goods input { display:inline-block; border:none; width:40px; line-height:18px; text-align:center; vertical-align:text-bottom; outline:none; } .main-area .main-wrap .pro_info .buybtns { font-size:18px; text-align:center; } .main-area .main-wrap .pro_info .buybtns .buynow { display:inline-block; width:156px; height:46px; line-height:46px; border:2px solid #f00; background-color:#ffeced; color:#f00; margin-right:50px; } .main-area .main-wrap .pro_info .buybtns .buynow:hover { background-color:#fffaf8; } .main-area .main-wrap .pro_info .buybtns .addcart { margin-left:50px; display:inline-block; width:180px; height:50px; line-height:50px; background-color:#f00; color:#fff; } .show { display:block !important; } .hide { display:none !important; }
更新时间:2019-08-12 09:33:24
这里的图片是引用的本站的图片,可以自己替换成需要的图片即可
简单易懂 替换方便
jquery代码还可以做成插件的形式方便使用