品優購專案--購物車結算頁面
阿新 • • 發佈：2018-12-11
效果圖
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品優購購物車結算</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/shoppingcar-settlement.css"> </head> <body> <div class="shoutcut"> <div class="w"> <div class="fl"> <ul> <li>品優購歡迎您！</li> <li> <a href="#">請登入</a> <a href="#" class="style-red">免費註冊</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的訂單</a></li> <li><div class="spacer"></div></li> <li><a href="#">我的品優購</a><i class="icomoon"></i></li> <li><div class="spacer"></div></li> <li><a href="#">品優購會員</a></li> <li><div class="spacer"></div></li> <li><a href="#">企業採購</a></li> <li><div class="spacer"></div></li> <li><a href="#">關注品優購</a><i class="icomoon"></i></li> <li><div class="spacer"></div></li> <li><a href="#">客戶服務</a><i class="icomoon"></i></li> <li><div class="spacer"></div></li> <li><a href="#">網站導航</a><i class="icomoon"></i></li> </ul> </div> </div> </div> <div class="header"> <div class="w"> <div class="logo fl"> <h1> <a href="index.html" title="品優購">品優購</a> </h1> </div> <span>購物車</span> <div class="set_inp"> <input type="text" placeholder="自營"> <button>搜尋</button> </div> </div> </div> <div class="main clearfix"> <div class="w"> <h2>全部商品 11</h2> <div class="sellhd"> <ul> <li><input type="checkbox" checked="checked">全選</li> <li>商品</li> <li>單價(元)</li> <li>數量</li> <li>小計(元)</li> <li>操作</li> </ul> </div> <div class="box"> <div class="boxhd"> <input type="checkbox"> <div class="czzy">傳智自營</div> <span>運費: ￥6.00 <em>還差￥99.00免運費</em></span> </div> <div class="boxbd"> <ul> <li class="short"> <ul> <li> <input type="checkbox"> <img src="img/setimg/01.gif" alt=""> </li> <li class="sho-pro"> <p>蘋果(Apple)MD463FE/A <br>MAC Thunderbolt雷電介面 至千兆乙太網轉<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 尺碼:Thunderbolt至千兆... </li> <li>248.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>248.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> </ul> </li> <li class="short special"> <ul> <li> <input type="checkbox"> <img src="img/setimg/02.gif" alt=""> </li> <li class="sho-pro"> <p>Apple Macbook Air 13.3 英寸膝上型電腦 <br>銀色(Corei5) 處理器/8GB記憶體<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 顏色MrcBook愛人<br> 尺寸:13.3英寸 </li> <li>8488.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>8488.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> <li class="shotop"> <h4>換購</h4> <span>活動商品購滿2888.00元,即可加價換購商品1件 ></span> <a href="#" class="shotop-a">檢視換購品</a> <a href="#">去湊單 ></a> </li> <li> <p>[贈品]聖迪威(Sendio)MacBook13.3寸螢幕保...x1</p> <p>[贈品]聖迪威(Sendio)MacBook13.3清潔套裝...x1</p> </li> </ul> </li> <li class="short"> <ul> <li> <input type="checkbox"> <img src="img/setimg/03.gif" alt=""> </li> <li class="sho-pro"> <p>半島鐵盒移動電源A2200 <br>白色2200mah<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 型號:A2200 </li> <li>19.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>19.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> </ul> </li> <li class="short"> <ul> <li> <input type="checkbox"> <img src="img/setimg/01.gif" alt=""> </li> <li class="sho-pro"> <p>蘋果(Apple)MD463FE/A <br>MAC Thunderbolt雷電介面 至千兆乙太網轉<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 尺碼:Thunderbolt至千兆... </li> <li>248.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>248.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> </ul> </li> <li class="short"> <ul> <li> <input type="checkbox"> <img src="img/setimg/04.gif" alt=""> </li> <li class="sho-pro"> <p>蘋果(Apple) iPhone6(a1586)16g <br>金色移動聯通<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 顏色:金色.. </li> <li>3799.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>3799.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> </ul> </li> </ul> </div> </div> <div class="box"> <div class="boxhd"> <input type="checkbox"> 神州數碼專營店 </div> <div class="boxbd"> <ul> <li class="short special"> <ul> <li> <input type="checkbox"> <img src="img/setimg/05.gif" alt=""> </li> <li class="sho-pro"> <p>DELL 戴爾Ins 15MR-75 28SS15英寸<br>銀色(Corei5) 處理器/8GB記憶體<br></p> <i></i><span>購買禮品包裝</span> </li> <li> 顏色:銀色<br> 尺寸:13.3英寸 </li> <li>8488.00</li> <li> <div class="youhuo"> <div class="yh1">-</div> <div class="yh2">1</div> <div class="yh3">+</div> </div> <div class="youhuo">有貨</div> </li> <li>8488.00</li> <li> <a href="#">刪除</a> <br> <a href="#">移到我的關注</a> </li> <li class="shotop"> <h4>換購</h4> <span>活動商品購滿2888.00元,即可加價換購商品1件 ></span> <a href="#" class="shotop-a">檢視換購品</a> <a href="#">去湊單 ></a> </li> <li> <p>[贈品]聖迪威(Sendio)MacBook13.3寸螢幕保...x1</p> <p>[贈品]聖迪威(Sendio)MacBook13.3清潔套裝...x1</p> </li> </ul> </li> </ul> </div> </div> <div class="lastset"> <div class="lastset-l fl"> <input type="checkbox">全選 <a href="#">刪除選中商品</a> <a href="#">移到我的關注</a> <a href="#">清除下櫃商品</a> </div> <div class="lastset-r fr"> <a href="#">結算</a> </div> <div class="lastset-m fr"> <p>已選擇0件商品 總價(不含運費) : <em>￥16283.00</em></p> <p>已節省: -￥20.00</p> </div> </div> <div class="delete"> <div class="delete-t"> 已刪除商品，您可以重新購買或加關注： </div> <div class="delete-b"> <span>聖迪威（Sendio）MacBook13.3清潔套...</span> <span>8488.00</span> <span>1</span> <span> <a href="#">重新購買</a> <a href="#">移到我的關注</a> </span> </div> </div> <div class="recommend"> <div class="rcd-hd"> <ul> <li><a href="#">猜你喜歡</a></li> <li><a href="#">特惠換購</a></li> </ul> </div> <div class="rcd-bd"> <ul> <li> <a href="#"> <img src="uploads/rcd-bd.gif" alt=""> <h4>飛科(FLYCO)FS7805鼻毛修剪器 電動鼻毛機 修鼻毛機</h4> <p>¥25.00</p> <button><i></i>加入購物車</button> </a> </li> <li> <a href="#"> <img src="uploads/rcd-bd.gif" alt=""> <h4>飛科(FLYCO)FS7805鼻毛修剪器 電動鼻毛機 修鼻毛機</h4> <p>¥25.00</p> <button><i></i>加入購物車</button> </a> </li> <li> <a href="#"> <img src="uploads/rcd-bd.gif" alt=""> <h4>飛科(FLYCO)FS7805鼻毛修剪器 電動鼻毛機 修鼻毛機</h4> <p>¥25.00</p> <button><i></i>加入購物車</button> </a> </li> <li> <a href="#"> <img src="uploads/rcd-bd.gif" alt=""> <h4>飛科(FLYCO)FS7805鼻毛修剪器 電動鼻毛機 修鼻毛機</h4> <p>¥25.00</p> <button><i></i>加入購物車</button> </a> </li> </ul> <div class="rcd-arl"><</div> <div class="rcd-arr">></div> </div> </div> </div> </div> <div class="footer"> <div class="w"> <div class="mod_service"> <ul> <li class="fl"> <i class="mod_service_icon mod_service_zheng fl"></i> <div class="mod_service_tit fl"> <h5>正品保障</h5> <p>正品保障,提供發票</p> </div> </li> <li class="fl"> <i class="mod_service_icon mod_service_ji fl"></i> <div class="mod_service_tit fl"> <h5>極速物流</h5> <p>極速物流,極速送達</p> </div> </li> <li class="fl"> <i class="mod_service_icon mod_service_wu fl"></i> <div class="mod_service_tit fl"> <h5>無憂售後</h5> <p>7天無理由退換貨</p> </div> </li> <li class="fl"> <i class="mod_service_icon mod_service_te fl"></i> <div class="mod_service_tit fl"> <h5>特色服務</h5> <p>私人訂製家電套餐</p> </div> </li> <li class="fl"> <i class="mod_service_icon mod_service_bang fl"></i> <div class="mod_service_tit fl"> <h5>幫助中心</h5> <p>您的購物指南</p> </div> </li> </ul> </div> <div class="mod_help"> <dl class="mod_help_item fl"> <dt>購物指南</dt> <dd><a href="#">購物流程</a></dd> <dd><a href="#">會員介紹</a></dd> <dd><a href="#">生活旅行/團購</a></dd> <dd><a href="#">常見問題</a></dd> <dd><a href="#">大家電</a></dd> <dd><a href="#">聯絡客服</a></dd> </dl> <dl class="mod_help_item fl"> <dt>配送方式</dt> <dd><a href="#">上門自提</a></dd> <dd><a href="#">211限時達</a></dd> <dd><a href="#">配送服務查詢</a></dd> <dd><a href="#">配送費收取標準</a></dd> <dd><a href="#">海外配送</a></dd> </dl> <dl class="mod_help_item fl"> <dt>支付方式</dt> <dd><a href="#">貨到付款</a></dd> <dd><a href="#">線上支付</a></dd> <dd><a href="#">分期付款</a></dd> <dd><a href="#">郵局匯款</a></dd> <dd><a href="#">公司轉賬</a></dd> </dl> <dl class="mod_help_item fl"> <dt>售後服務</dt> <dd><a href="#">售後政策</a></dd> <dd><a href="#">價格保護</a></dd> <dd><a href="#">退款說明</a></dd> <dd><a href="#">返修/退換貨</a></dd> <dd><a href="#">取消訂單</a></dd> </dl> <dl class="mod_help_item fl"> <dt>特色服務</dt> <dd><a href="#">奪寶島</a></dd> <dd><a href="#">DIY裝機</a></dd> <dd><a href="#">延保服務</a></dd> <dd><a href="#">品優購E卡</a></dd> <dd><a href="#">品優購通訊</a></dd> </dl> <div class="mod_help_item mod_help_app fr"> <dl> <dt>幫助中心</dt> <dd> <img src="img/app.png" alt=""> <p>品優購客戶端 </p> </dd> </dl> </div> </div> <div class="mod_copyright"> <p class="mod_copyright_links"> 關於我們 | 聯絡我們 | 聯絡客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情連結 | 銷售聯盟 | 品優購社群 | 品優購公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號京公網安備110108007702 </p> </div> </div> </div> </body> </html>
CSS部分
.header { height: 80px; } .header span { float: left; font-size: 20px; margin-top: 15px; } .set_inp { float: right; width: 540px; height: 36px; } .set_inp input { float: left; padding-left: 15px; width: 443px; height: 32px; border: 2px solid #B1191A; } .set_inp button { float: left; width: 74px; height: 36px; background-color: #B1191A; color: #fff; } .main h2 { height: 40px; font-size: 16px; color: #C71523; } .sellhd { height: 34px; line-height: 34px; border: 1px solid #DDDDDD; background-color: #F5F5F5; } .sellhd li { float: left; font-size: 12px; color: #656565; } .sellhd input { vertical-align: middle; margin-left: 5px; margin-right: 10px; } .sellhd li:nth-child(2) { margin-left: 210px; } .sellhd li:nth-child(3) { margin-left: 340px; } .sellhd li:nth-child(4), .sellhd li:nth-child(5), .sellhd li:last-child { margin-left: 110px; } .boxhd { height: 30px; line-height: 30px; padding-top: 15px; border-bottom: 2px solid #DDDDDD; margin-bottom: 20px; } .boxhd input { float: left; margin: 7px 7px 0 5px; } .czzy { float: left; width: 55px; height: 18px; background-color: #C71523; color: #fff; font-size: 12px; text-align: center; line-height: 18px; margin-top: 5px; } .boxhd span { float: right; font-size: 12px; color: #656565; } .boxhd span em { color: #C71523; } .short { position: relative; height: 108px; border: 1px solid #DDDDDD; } .short img { border: 1px solid #EDEDED; margin: 0 10px 0 18px; } .short input { vertical-align: top; } .short li { position: absolute; top: 14px; left: 0; font-size: 12px; } .short li:first-child { left: 5px; } .short li:nth-child(2) { left: 125px; } .short li:nth-child(3) { left: 380px; } .short li:nth-child(4) { left: 620px; } .short li:nth-child(5) { left: 750px; } .short li:nth-child(6) { left: 930px; } .short li:nth-child(7) { left: 1090px; } .sho-pro i { float: left; margin-right: 7px; margin-top: 5px; height: 17px; width: 18px; background: url(../img/setimg/001.gif) no-repeat; } .sho-pro span { float: left; color: #999; margin-top: 5px; } .boxbd .special { height: 200px; } .boxbd .special li:first-child, .boxbd .special li:nth-child(2), .boxbd .special li:nth-child(3) { top: 50px; } .boxbd .special li:nth-child(9) { top: 155px; left: 60px; color: #999; } .short:hover { background-color: #FEEDEF; } .shotop { margin-left: 5px; } .shotop h4 { float: left; width: 43px; height: 18px; border: 1px solid #C71523; color: #C71523; text-align: center; line-height: 18px; } .shotop span { float: left; margin: 0 15px; } .shotop-a { float: left; width: 70px; height: 20px; color: #fff; background-color: #C71523; text-align: center; line-height: 20px; margin-right: 10px; } .youhuo { width: 100px; height: 30px; text-align: center; line-height: 30px; color: #999; } .yh1, .yh2, .yh3 { height: 28px; border: 1px solid #E6E6E6; float: left; margin-left: -1px; } .yh1 { width: 28px; } .yh3 { width: 28px; color: #C71523; } .yh2 { width: 40px; } .lastset { margin-top: 20px; height: 50px; border: 1px solid #DDDDDD; } .lastset-l { line-height: 50px; } .lastset-l input { margin-left: 5px; margin-right: 15px; vertical-align: middle; } .lastset-l a { margin-left: 18px; } .lastset-m em { font-size: 16px; color: #E50012; } .lastset-m p:last-child { margin-left: 150px; } .lastset-r a { display: inline-block; margin-left: 30px; line-height: 50px; text-align: center; font-size: 16px; width: 110px; height: 50px; background-color: #E50012; color: #fff; } .delete-t { height: 50px; line-height: 50px; font-size: 12px; } .delete-b { height: 32px; line-height: 32px; background-color: #FFFDED; padding-left: 15px; } .delete-b span { float: left; } .delete-b span:nth-child(2) { margin-left: 350px; } .delete-b span:nth-child(3) { margin-left: 150px; } .delete-b span:last-child { float: right; } .delete-b span:last-child a { margin-left: 20px; } .rcd-hd { height: 38px; border: 1px solid #DDD; margin: 20px auto; background-color: #F1F1F1; } .rcd-hd a { float: left; width: 87px; height: 38px; font-size: 12px; line-height: 38px; text-align: center; } .rcd-hd li:first-child a { background-color: #E50012; color: #fff; } .rcd-bd { height: 267px; padding-left: 41px; position: relative; } .rcd-bd li a { float: left; width: 246px; height: 305px; border: 1px dashed #DDD; margin-left: -1px; margin-bottom: 25px; } .rcd-bd img { display: block; width: 81px; height: 165px; margin: 20px auto 5px; } .rcd-bd h4 { font-size: 12px; margin: 0 20px; font-weight: 400; } .rcd-bd p { margin-bottom: 10px; text-align: center; color: #E50012; } .rcd-bd button { display: block; width: 120px; height: 35px; border: 1px solid #ccc; background-color: #fff; color: #666; margin: 0 auto; } .rcd-bd button { font-family: 'icomoon'; } .rcd-arl, .rcd-arr { position: absolute; top: 50%; margin-top: -25px; width: 20px; height: 50px; line-height: 50px; font-size: 30px; background-color: rgba(0,0,0,.3); color: #fff; } .rcd-arl { left: 0; } .rcd-arr { right: 0; }