15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:仿天猫购物网站设计——仿天猫购物商城(7页)

HTML5期末大作业:仿天猫购物网站设计——仿天猫购物商城(7页)

时间:2023-06-09 08:06:01 | 来源:网站运营

时间:2023-06-09 08:06:01 来源:网站运营

HTML5期末大作业:仿天猫购物网站设计——仿天猫购物商城(7页):

HTML5期末大作业:仿天猫购物网站设计——仿天猫购物商城(7页) 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

@TOC

一、作品展示







二、文件目录







三、代码实现

<!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>






四、获取更多源码




五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站





六、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



关键词:设计,商城,作业

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭