900字范文 > HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页商品详情

HTML网页设计期末课程大作业 ---H5移动端电商购物网页设计35页面(包括主页商品详情

时间：2021-11-03 14:19:47

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

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

🧡作者主页

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

文章目录

基于HTML5+CSS制作 H5移动端电商购物网页设计35页面(包括主页，商品详情，转账，付款，购物车等页面) 功能齐全作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码

一、作品展示

二、文件目录

三、代码实现

<!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><div class="loading"><div class="loader"><div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div></div></div><body><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><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><div class="settlement clearfloat"><div class="zuo clearfloat fl box-s">合计：<span>￥1420</span></div><a href="#" class="fl db">立即结算</a></div><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></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="">会员一折网</a><a href="">云牛品</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="">会员一折网</a><a href="">云牛品</a><script language="javascript" type="text/javascript">document.write("<\/div>")</script></div></html>