<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>购物车效果</title>
<link rel="shortcut icon" href="./assets/cart.ico">
<meta name="description" content="" />
<link rel="stylesheet" href="./css/basic.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="container">
<div class="zb-page">
<div class="zb-cate-list">
<ul>
<li class="active"><span>推荐</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
<li><span>空调</span></li>
<li><span>电饭煲</span></li>
<li><span>风扇</span></li>
</ul>
</div>
<div class="zb-goods-block">
<div class="zb-goods-list">
<div class="zb-goods-item">
<div class="zb-goods-img">
<img src="./assets/goods1.png">
</div>
<div class="zb-goods-info">
<div class="zb-goods-title zb-elp-2">家用电饭煲</div>
<div class="zb-goods-desc zb-elp-1">
凉之源 变频冷暖3匹1级能效挂机空调
</div>
<div class="zb-goods-sell">
月售 100 好评100%
</div>
<div class="zb-goods-bottom">
<div class="zb-goods-price">
<span class="zb-goods-price-unit">￥</span>
999
</div>
<div class="zb-goods-btn">
<div class="zb-iconfont zb-icon-jianhao zb-decrease"></div>
<div class="zb-goods-num">1</div>
<div class="zb-iconfont zb-icon-jiahao1 zb-increase"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="zb-fixed-bottom">
<div class="zb-page-cart">
<div class="zb-iconfont zb-icon-gouwuchefill zb-cart"></div>
<div class="zb-page-cart-num">0</div>
</div>
<div class="zb-page-bottom">
<div class="zb-bottom-left">
<div class="zb-bottom-total-price">￥0</div>
<div class="zb-bottom-delivery">配送费￥0</div>
</div>
<div class="zb-bottom-right">
还差￥0元起送
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
原生html+js+css添加购物车效果
需积分: 5 130 浏览量
2024-03-06
17:15:05
上传
评论
收藏 299KB ZIP 举报
cart.zip （14个子文件） 
cart assets 
goods4.png 44KB goods2.png 15KB
cart.ico 110KB cart.png 6KB goods5.png 176KB goods1.png 25KB goods3.png 12KB js data.js 945B index.js 7KB css iconfont.css 2KB cart.css 0B basic.css 920B index.css 6KB
index.html 3KB资源评论
