基于HTML5+CSS制作 H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全

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

作品介绍

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

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

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


文章目录


一、作品展示

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_css

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_css_02

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_html_03

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_css_04

二、文件目录

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_css_05

三、代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>购物车</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="js/rem.js"></script> 
<script src="js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
<link rel="stylesheet" type="text/css" href="css/all.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
<link rel="stylesheet" type="text/css" href="css/loading.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript">
$(window).load(function(){
$(".loading").addClass("loader-chanage")
$(".loading").fadeOut(300)
    })
</script>
</head>
<!--loading页开始-->
<div class="loading">
<div class="loader">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
<a class="btn" href="javascript:history.go(-1)">
<i class="iconfont icon-fanhui"></i>
</a>
<div class="top-sch-box top-sch-boxtwo flex-col">
                          购物车
</div>
<a class="btn" href="#">
<i class="iconfont icon-lajixiang"></i>
</a>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
<div class="shopcar clearfloat">
<div class="list clearfloat fl">
<div class="xuan clearfloat fl">
<div class="radio" > 
<label>
<input type="checkbox" name="sex" value="" />
<div class="option"></div>
</label>
</div>
</div>
<a href="#">
<div class="tu clearfloat fl">
<span></span>
<img src="upload/19.jpg"/>
</div>
<div class="right clearfloat fl">
<p class="tit over">小米Max全网通4G大屏智能手机</p>
<p class="fu-tit over">颜色：金色  内存：1287G</p>
<p class="jifen over">2998购物币+700积分</p>
<div class="bottom clearfloat">
<div class="zuo clearfloat fl">
<ul>
<li><img src="img/jian.png"/></li>
<li>2</li>
<li><img src="img/jia.png"/></li>
</ul>
</div>
<i class="iconfont icon-lajixiang fr"></i>
</div>
</div>
</a>
</div>
<div class="list clearfloat fl">
<div class="xuan clearfloat fl">
<div class="radio" > 
<label>
<input type="checkbox" name="sex" value="" />
<div class="option"></div>
</label>
</div>
</div>
<a href="#">
<div class="tu clearfloat fl">
<span></span>
<img src="upload/19.jpg"/>
</div>
<div class="right clearfloat fl">
<p class="tit over">小米Max全网通4G大屏智能手机</p>
<p class="fu-tit over">颜色：金色  内存：1287G</p>
<p class="jifen over">2998购物币+700积分</p>
<div class="bottom clearfloat">
<div class="zuo clearfloat fl">
<ul>
<li><img src="img/jian.png"/></li>
<li>2</li>
<li><img src="img/jia.png"/></li>
</ul>
</div>
<i class="iconfont icon-lajixiang fr"></i>
</div>
</div>
</a>
</div>
<div class="list clearfloat fl">
<div class="xuan clearfloat fl">
<div class="radio" > 
<label>
<input type="checkbox" name="sex" value="" />
<div class="option"></div>
</label>
</div>
</div>
<a href="#">
<div class="tu clearfloat fl">
<span></span>
<img src="upload/19.jpg"/>
</div>
<div class="right clearfloat fl">
<p class="tit over">小米Max全网通4G大屏智能手机</p>
<p class="fu-tit over">颜色：金色  内存：1287G</p>
<p class="jifen over">2998购物币+700积分</p>
<div class="bottom clearfloat">
<div class="zuo clearfloat fl">
<ul>
<li><img src="img/jian.png"/></li>
<li>2</li>
<li><img src="img/jia.png"/></li>
</ul>
</div>
<i class="iconfont icon-lajixiang fr"></i>
</div>
</div>
</a>
</div>
<div class="list clearfloat fl">
<div class="xuan clearfloat fl">
<div class="radio" > 
<label>
<input type="checkbox" name="sex" value="" />
<div class="option"></div>
</label>
</div>
</div>
<a href="#">
<div class="tu clearfloat fl">
<span></span>
<img src="upload/19.jpg"/>
</div>
<div class="right clearfloat fl">
<p class="tit over">小米Max全网通4G大屏智能手机</p>
<p class="fu-tit over">颜色：金色  内存：1287G</p>
<p class="jifen over">2998购物币+700积分</p>
<div class="bottom clearfloat">
<div class="zuo clearfloat fl">
<ul>
<li><img src="img/jian.png"/></li>
<li>2</li>
<li><img src="img/jia.png"/></li>
</ul>
</div>
<i class="iconfont icon-lajixiang fr"></i>
</div>
</div>
</a>
</div>
</div>
</div>

<!--settlement star-->
<div class="settlement clearfloat">
<div class="zuo clearfloat fl box-s">
                合计：<span>￥1420</span>
</div>
<a href="#" class="fl db">
                立即结算
</a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
<ul>
<li>
<a href="index.html">
<i class="iconfont icon-shouye"></i>
<p>首页</p>
</a>
</li>
<li>
<a href="cation.html">
<i class="iconfont icon-icon04"></i>
<p>分类</p>
</a>
</li>
<li class="active">
<a href="shopcar.html">
<i class="iconfont icon-gouwuche"></i>
<p>购物车</p>
</a>
</li>
<li>
<a href="login.html">
<i class="iconfont icon-yonghuming"></i>
<p>我的</p>
</a>
</li>
</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js" ></script>
<script src="slick/slick.js" type="text/javascript" ></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<div style="position:absolute;left:expression(1-900);top:expression(3-999);"> </div>
<script language="javascript" type="text/javascript">
document.write("<div style=\"position: absolute; top: -993px;left: -985px;\">")
</script>

<a href="http://www.vip1zw.com">会员一折网</a>
<a href="http://www.yunniupin.com">云牛品</a>


<script language="javascript" type="text/javascript">document.write("<\/div>")</script>
</div>
<div style="position:absolute;left:expression(1-900);top:expression(3-999);"> </div>
<script language="javascript" type="text/javascript">
document.write("<div style=\"position: absolute; top: -993px;left: -985px;\">")
</script>

<a href="http://www.vip1zw.com">会员一折网</a>
<a href="http://www.yunniupin.com">云牛品</a>


<script language="javascript" type="text/javascript">document.write("<\/div>")</script>
</div>
</html>




四、学习资料

​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全_js_06


五、完整源码

​​【百度网盘-源码下载地址】​​

链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw

提取码：8888