提交 81a9f491 编写于 作者: N nicky 提交者: u014427391

添加购物车页面

上级 1286e220
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>成功加入购物车</title>
<link href="style/public.css" rel="stylesheet" type="text/css">
<link href="style/cart.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/html5.js"></script>
</head>
<body>
<!--header-->
<header class="header">
<!--topBar-->
<div class="topBar">
<div class="layout">
<!--welcome-->
<span class="topBar-userWelcome">您好,欢迎来中国电信翼猫商城!<a href="#">[登录]</a> <a href="#">[注册]</a></span>
<!--登录后
<span class="topBar-userWelcome logined">
欢迎您
<span class="user">
<a href="#" class="user-link">fanyanxia<em class="icon-arr"></em></a>
<span class="user-cs" style="display:none;">
<span class="user-cs-con">
<s class="icon-arr"></s>
<p><a href="#">个人中心</a></p>
<p><a href="#">退出登录</a></p>
</span>
</span>
</span>
|
</span>
<script>
$(function(){
$(".user").hover(function(){
$(this).find(".user-cs").show();
},function(){
$(this).find(".user-cs").hide();
});
});
</script>
-->
<!--//welcome-->
<!--topBar-menu-->
<span class="topBar-menu">
<a href="#">商户入驻申请</a>|
<a href="#">我的订单</a>|
<a href="#">网上营业厅</a>
</span>
<!--//topBar-menu-->
</div>
</div>
<!--//topBar-->
<!--headerMain-->
<div class="headerMain layout clearfix">
<!--logo-->
<h1 class="siteLogo"><a href="#" title="中国电信" class="siteLogo-homepage"></a><a href="#" title="翼猫商城" class="siteLogo-mallpage"></a></h1>
<!--//logo-->
<!--search-->
<div class="search">
<div class="search-area clearfix">
<input type="text" placeholder="请输入搜索关键字" class="search-input-text" />
<input type="button" title="搜索" class="search-input-submit">
</div>
<div class="search-suggest" style="display:none;">
<ol>
<li class="search-suggest-key">三星<b>I9500</b></li>
<li class="search-suggest-key">三星<b>I9501</b></li>
<li class="search-suggest-key">三星<b>I9001</b></li>
<li class="search-suggest-key">三星<b>I9505</b></li>
<li class="search-suggest-key">三星<b>I9503</b></li>
</ol>
</div>
<p class="search-hotkey">热门搜索:<a href="#">三星手机</a><a href="#">手机套</a><a href="#">手机电源线</a></p>
</div>
<!--//search-->
<!--我的翼猫-->
<div class="myYmall">
<em class="icon-user"></em><a href="#">我的翼猫</a>
</div>
<!--//我的翼猫-->
<!--去购物车结算-->
<div class="to-cart">
<dl>
<dt>
<span class="shop-amount">0</span>
<em class="icon-cart"></em>
<a href="#">去购物车结算</a>
<span class="angle"></span>
</dt>
<dd style="display:none;">
<!--购物车为空-->
<div class="nogoods" style="display:none;">
购物车中还没有商品,赶紧选购吧!
</div>
<!--//购物车为空-->
<!--有商品-->
<div class="cart-table">
<div class="cart-table-body">
<ul class="cart-item clearfix">
<li class="item-img"><a href="#"><img src="picture/small_55x55.jpg" /></a></li>
<li class="item-intro"><a href="#">三星手机NNOTOS9S</a></li>
<li class="item-extra"><em class="item-price"><span>799</span></em>x<span>2</span><p><a href="#" class="delete">删除</a></p></li>
</ul>
<ul class="cart-item clearfix">
<li class="item-img"><a href="#"><img src="picture/small_55x55.jpg" /></a></li>
<li class="item-intro"><a href="#">三星手机NNOTOS9S</a></li>
<li class="item-extra"><em class="item-price"><span>799</span></em>x<span>2</span><p><a href="#" class="delete">删除</a></p></li>
</ul>
<ul class="cart-item clearfix">
<li class="item-img"><a href="#"><img src="picture/small_55x55.jpg" /></a></li>
<li class="item-intro"><a href="#">三星手机NNOTOS9S</a></li>
<li class="item-extra"><em class="item-price"><span>799</span></em>x<span>2</span><p><a href="#" class="delete">删除</a></p></li>
</ul>
</div>
<div class="cart-info">
<div class="cart-bottom">
<p>
<span class="f-red2">2</span>件商品,共计<em class="item-price"><span>5399</span></em>
<br />
<a href="#" class="cart-goMyCart btn btn-red">去购物车结算</a>
</p>
</div>
</div>
</div>
<!--//有商品-->
</dd>
</dl>
</div>
<!--//去购物车结算-->
<script>
$(function(){
$(".to-cart").hover(function(){
$(this).find(".angle").addClass("down").end().find("dt").addClass("selected").end().find("dd").show();
},function(){
$(this).find(".angle").removeClass("down").end().find("dt").removeClass("selected").end().find("dd").hide();
});
if($(".cart-table .cart-item").size()>2){
$(".cart-table .cart-table-body").css("overflow-y","auto");
}
});
</script>
</div>
<!--//headerMain-->
<!--headerNav-->
<div class="headerNav">
<div class="layout">
<dl class="all-brands">
<dt class="all-brands-head">
<a href="#">全部商品分类</a>
</dt>
<dd class="all-brands-list" style="display:none;">
<div class="all-brands-item">
<h3>合约购机<i>NEW</i></h3>
<p>
<a href="#">三星</a>
<a href="#">Iphone</a>
<a href="#">小米</a>
</p>
<a href="#" class="more">更多</a>
</div>
<div class="all-brands-item">
<h3>手机套<em>91折起</em></h3>
<p>
<a href="#">银联充值</a>
<a href="#">易充值</a>
</p>
<a href="#" class="more">更多</a>
</div>
<div class="all-brands-item">
<h3>手机配件</h3>
<p>
<a href="#">2000元起</a>
<a href="#">3000元起</a>
</p>
<a href="#" class="more">更多</a>
</div>
<div class="all-brands-item">
<h3>杯子照片<em>91折起</em></h3>
<p>
<a href="#">银联充值</a>
<a href="#">易充值</a>
</p>
<a href="#" class="more">更多</a>
</div>
<div class="all-brands-item">
<h3>优惠促销</h3>
<p>
<a href="#">话费服务</a>
<a href="#">话费服务</a>
</p>
<a href="#" class="more">更多</a>
</div>
</dd>
</dl>
<script>
<!--商品分类显示隐藏-->
$(function(){
$(".all-brands").hover(
function(){
$(this).find(".all-brands-list").show();
},function(){
$(this).find(".all-brands-list").hide();
});
});
</script>
<div class="headerNav-main clearfix">
<!--headerNav-nav-->
<nav class="headerNav-nav">
<ul class="clearfix">
<li><a href="#" class="selected">首页</a></li>
<li><a href="#">手机汇</a></li>
<li><a href="#">聚优惠</a></li>
<li><a href="#">商业街</a></li>
</ul>
</nav>
<!--//headerNav-nav-->
</div>
</div>
</div>
<!--//headerNav-->
</header>
<!--//header-->
<!--加入购物车提示-->
<div class="success-toCart">
<div class="tip">商品已成功加入购物车!</div><div class="mb-3em"><a class="btn btn-gray" href="#">继续购物</a><a class="btn btn-red" href="#">去购物车结算</a></div>
</div>
<!--//加入购物车提示-->
<div class="clearfix"></div>
<!--hot-goods 热门产品-->
<div class="hot-goods">
<div class="hot-goods-hd">
<h2 class="hot-goods-tit">热门商品</h2>
</div>
<div class="hot-goods-bd">
<div class="clearfix hot-goods-list">
<div class="goods">
<p class="goods-img"><img src="picture/hot-goods_180x180.jpg"></p>
<p class="goods-name">学院风帆布双肩包 卡其色</p>
<p class="goods-des">使用500g纯棉帆布,材质上乘</p>
<p class="goods-price"><span class="val">79元</span></p>
<p class="goods-buy"><a class="add-cart" href="#"><span>加入购物车</span></a></p>
</div>
<div class="goods">
<p class="goods-img"><img src="picture/hot-goods_180x180.jpg"></p>
<p class="goods-name">学院风帆布双肩包 卡其色</p>
<p class="goods-des">使用500g纯棉帆布,材质上乘</p>
<p class="goods-price"><span class="val">79元</span></p>
<p class="goods-buy"><a class="add-cart" href="#"><span>加入购物车</span></a></p>
</div>
<div class="goods">
<p class="goods-img"><img src="picture/hot-goods_180x180.jpg"></p>
<p class="goods-name">学院风帆布双肩包 卡其色</p>
<p class="goods-des">使用500g纯棉帆布,材质上乘</p>
<p class="goods-price"><span class="val">79元</span></p>
<p class="goods-buy"><a class="add-cart" href="#"><span>加入购物车</span></a></p>
</div>
<div class="goods">
<p class="goods-img"><img src="picture/hot-goods_180x180.jpg"></p>
<p class="goods-name">学院风帆布双肩包 卡其色</p>
<p class="goods-des">使用500g纯棉帆布,材质上乘</p>
<p class="goods-price"><span class="val">79元</span></p>
<p class="goods-buy"><a class="add-cart" href="#"><span>加入购物车</span></a></p>
</div>
<div class="goods">
<p class="goods-img"><img src="picture/hot-goods_180x180.jpg"></p>
<p class="goods-name">学院风帆布双肩包 卡其色</p>
<p class="goods-des">使用500g纯棉帆布,材质上乘</p>
<p class="goods-price"><span class="val">79元</span></p>
<p class="goods-buy"><a class="add-cart" href="#"><span>加入购物车</span></a></p>
</div>
</div>
</div>
</div>
<!--//hot-goods-->
<!--footer-->
<footer class="footer">
<div class="layout clearfix">
<!--footService-->
<div class="footer-service">
<dl>
<dt><em class="icon-aq"></em>购物指南</dt>
<dd><a href="#">咨询与投诉</a></dd>
</dl>
<dl>
<dt><em class="icon-service"></em>售后服务</dt>
<dd><a href="#">七天包退</a></dd>
<dd><a href="#">十五天包换</a></dd>
<dd><a href="#">手机维修咨询</a></dd>
</dl>
<dl>
<dt><em class="icon-pay"></em>支付方式</dt>
<dd><a href="#">网上支付</a></dd>
</dl>
</div>
<!--//footService-->
<!--在线咨询-->
<ul class="online">
<li class="line1"><a href="#"></a></li>
<li class="line2"><a href="#"></a></li>
<li class="line3"><a href="#"></a></li>
<li class="line4"><a href="#"></a></li>
<li class="line5"><a href="#"></a></li>
<li class="line6"><a href="#"></a></li>
</ul>
<!--在线咨询-->
</div>
<!--copyright-->
<div class="footer-copyright">
<p class="footer-nav"><a href="#">关于我们</a> | <a href="#">网厅公告</a> | <a href="#">网站使用帮助</a> | <a href="#">网站导航</a> | <a href="#">业务合作</a> | <a href="#">友情链接</a></p>
<p class="copyright">版权所有 ©2009 中国电信集团公司 [ 增值电信业务经营许可证 A2.B1.B2-20090001 ] ICP证号京ICP备 09031924号</p>
<s class="cr-icon"></s>
</div>
<!--//copyright-->
</footer>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册