HTML5期末大作业：仿天猫购物网站设计——仿天猫购物商城(7页) 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板
文章目录
- HTML5期末大作业：仿天猫购物网站设计——仿天猫购物商城(7页) 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车页面</title>
<script src="study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="study/css/main.css"/>
<script src="study/js/js/main.js"></script>
</head>
<body>
<!--顶部导航栏-->
<nav class="top">
<div class="middle">
<a href="index.html">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="dl.html">请登录</a>
<a href="zc.html">免费注册</a>
<span class="pull-right">
<a href="dd.html">我的订单</a>
<a href="gwc.html"><span class="glyphicon glyphicon-shopping-cart redColor"></span>购物车<strong>0</strong>件</a>
</span>
</div>
</nav>
<!--搜索栏-->
<div class="simpleSearchOutDiv">
<a href="index.html">
<img src="img/site/simpleLogo.png" class="simpleLogo" id="simpleLogo">
</a>
<div class="simpleSearchDiv pull-right">
<input type="text" name="keyword" placeholder="平衡车 原汁机">
<button type="button" class="searchButton">搜天猫</button>
<div class="searchBelow">
<span>
<a href="产品页面.html">
冰箱
</a>
<span>|</span>
</span>
<span>
<a href="产品页面.html">
空调
</a>
<span>|</span>
</span>
<span>
<a href="产品页面.html">
女表
</a>
<span>|</span>
</span>
<span>
<a href="产品页面.html">
男表
</a>
</span>
</div>
</div>
<div style="clear:both"></div>
</div>
<!--购物车页面-->
<div class="cartDiv">
<div class="cartTitle pull-right">
<span>已选商品 (不含运费)</span>
<span class="cartTitlePrice">￥0.00</span>
<button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button>
</div>
<div class="cartProductList">
<table class="cartProductTable">
<thead>
<tr>
<th class="selectAndImage">
<img src="img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
全选
</th>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th width="120px">金额</th>
<th class="operation">操作</th>
</tr>
</thead>
<tbody>
<tr class="cartProductItemTR" oiid="936" style="background-color: rgb(255, 255, 255);">
<td>
<img src="img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
<a href="#nowhere" style="display:none"><img src="img/site/cartSelected.png"></a>
<img src="img/productSingle_middle/3665.jpg" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
<div class="cartProductLinkInnerDiv">
<img title="支持信用卡支付" src="img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="img/site/promise.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemOringalPrice">￥7580.0</span>
<span class="cartProductItemPromotionPrice">￥5306.0</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="365" class="hidden orderItemStock ">75</span>
<span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
<a href="#nowhere" class="numberMinus" pid="365">-</a>
<input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
<a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
</div>
</td>
<td>
<span pid="365" oiid="936" class="cartProductItemSmallSumPrice">
￥5,306.00
</span>
</td>
<td>
<a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
</td>
</tr>
<tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);">
<td>
<img src="img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
<a href="#nowhere" style="display:none"><img src="img/site/cartSelected.png"></a>
<img src="img/productSingle_middle/8510.jpg" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
<div class="cartProductLinkInnerDiv">
<img title="支持信用卡支付" src="img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="img/site/promise.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemOringalPrice">￥235.0</span>
<span class="cartProductItemPromotionPrice">￥152.75</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="809" class="hidden orderItemStock ">17</span>
<span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
<a href="#nowhere" class="numberMinus" pid="809">-</a>
<input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
<a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
</div>
</td>
<td>
<span pid="809" oiid="935" class="cartProductItemSmallSumPrice">
￥152.75
</span>
</td>
<td>
<a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cartFoot">
<img src="img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
<span>全选</span>
<!-- <a href="#">删除</a> -->
<div class="pull-right">
<span>已选商品 <span class="cartSumNumber">0</span> 件</span>
<span>合计 (不含运费): </span>
<span class="cartSumPrice">￥0.00</span>
<button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button>
</div>
</div>
</div>
<!--公共页面页脚1-->
<div style="display: block;" class="footer" id="footer">
<div class="footer_ensure" id="footer_ensure">
<a href="#nowhere">
<img src="img/site/ensure.png">
</a>
</div>
<div class="footer_desc" id="footer_desc">
<div class="descColumn">
<span class="descColumnTitle">购物指南</span>
<a href="#nowhere">免费注册</a>
<a href="#nowhere">开通支付宝</a>
<a href="#nowhere">支付宝充值</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">天猫保障</span>
<a href="#nowhere">发票保障</a>
<a href="#nowhere">售后规则</a>
<a href="#nowhere">缺货赔付</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">支付方式</span>
<a href="#nowhere">快捷支付</a>
<a href="#nowhere">信用卡</a>
<a href="#nowhere">蚂蚁花呗</a>
<a href="#nowhere">货到付款</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">商家服务</span>
<a href="#nowhere">商家入驻</a>
<a href="#nowhere">商家中心</a>
<a href="#nowhere">天猫智库</a>
<a href="#nowhere">天猫规则</a>
<a href="#nowhere">物流服务</a>
<a href="#nowhere">喵言喵语</a>
<a href="#nowhere">运营服务</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">手机天猫</span>
<a href="#nowhere"><img src="img/site/ma.png"></a>
</div>
</div>
<div class="clearfix"></div>
<!--公共页面页脚2-->
<div id="copyright" class="copyright">
<div class="coptyrightMiddle">
<div class="white_link">
<a href="#nowhere" style="padding-left:0px">关于天猫</a>
<a href="#nowhere"> 帮助中心</a>
<a href="#nowhere">开放平台</a>
<a href="#nowhere"> 诚聘英才</a>
<a href="#nowhere">联系我们</a>
<a href="#nowhere">网站合作</a>
<a href="#nowhere">法律声明</a>
<a href="#nowhere">知识产权</a>
<a href="#nowhere"> 廉正举报 </a>
</div>
<div class="white_link">
<a href="#nowhere" style="padding-left:0px"> 阿里巴巴集团</a><span class="slash">|</span>
<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
<a href="#nowhere">天猫 </a><span class="slash">|</span>
<a href="#nowhere"> 聚划算</a><span class="slash">|</span>
<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
<a href="#nowhere">1688</a><span class="slash">|</span>
<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
<a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span>
<a href="#nowhere"> 阿里通信 </a><span class="slash">|</span>
<a href="#nowhere"> YunOS </a><span class="slash">|</span>
<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
<a href="#nowhere"> 万网 </a><span class="slash">|</span>
<a href="#nowhere"> 高德 </a><span class="slash">|</span>
<a href="#nowhere"> 优视 </a><span class="slash">|</span>
<a href="#nowhere"> 友盟 </a><span class="slash">|</span>
<a href="#nowhere"> 虾米 </a><span class="slash">|</span>
<a href="#nowhere"> 天天动听 </a><span class="slash">|</span>
<a href="#nowhere"> 来往 </a><span class="slash">|</span>
<a href="#nowhere"> 钉钉 </a><span class="slash">|</span>
<a href="#nowhere"> 支付宝 </a>
</div>
<div class="license">
<span>增值电信业务经营许可证： 浙B2-20110446</span>
<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
<div>
<img src="img/site/copyRight1.jpg">
<img src="img/site/copyRight2.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
更多推荐
HTML+CSS静态页面网页设计作业 仿天猫购物商城(7页) 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板
发布评论