HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
作品介绍
1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码一、作品展示
二、文件目录
三、代码实现
<html><head><meta charset="utf-8"><title></title><meta name="keywords" content=""><meta name="description" content=""><link rel="stylesheet" href="css/safe/css.css" /><link rel="stylesheet" href="css/safe/common.min.css" /><link rel="stylesheet" href="css/safe/ms-style.min.css" /><link rel="stylesheet" href="css/safe/personal_member.min.css" /><link rel="stylesheet" href="css/safe/Snaddress.min.css" /><link rel="stylesheet" href="css/sui.css" /><script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script><script type="text/javascript" src="js/sui.js" ></script><style>a{color: #000000;}</style></head><body class="ms-body"><div id="" class="ng-top-banner"></div><div class="ng-toolbar"><div class="ng-toolbar-con wrapper"><div class="ng-toolbar-left"><a class="ng-bar-node ng-bar-node-backhome" id="ng-bar-node-backhome" style="display: block;"><span><img src="img/Home.png" style="margin-right: 10px;"/>返回买啦首页</span></a><div class="ng-bar-node-box ng-site-nav-box"><a href="" class="ng-bar-node ng-bar-node-site"><span><img src="img/daohang.png" style="margin-right: 5px;" />网站导航</span><em class="ng-iconfont down"></em></a><div class="ng-sn-site-nav ng-d-box site-nav-child" style="display:none;"><dl class="sn-site-list lnb"><dt>特色购物</dt><dd><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p></dd></dl><dl class="sn-site-list"><dt>主题频道</dt><dd><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p></dd></dl><dl class="sn-site-list"><dt>生活助手</dt><dd><p><a target="_blank">###<i class="hot"></i></a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p></dd></dl><dl class="sn-site-list"><dt>会员服务</dt><dd><p><a target="_blank">###<i class="hot"></i></a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p></dd></dl><dl class="sn-site-list rnb"><dt>更多热点</dt><dd><p><a target="_blank">###</a></p><p><a target="_blank">###</a></p><p><a target="_blank">###<i class="hot"></i></a></p></dd></dl><a href="" class="ng-close"><em class="ng-iconfont"></em></a></div></div></div><div class="ng-toolbar-right"><a href="" class="ng-bar-node username-bar-node username-bar-node-showside" id="" rel="nofollow" style="display:none;"><span id="">吉米小子</span><em class="hasmsg ng-iconfont"></em></a><div class="ng-bar-node-box username-handle" id="" style="display: block;"><a href="" rel="nofollow" class="ng-bar-node username-bar-node username-bar-node-noside"><span id="">吉米小子</span><em class="hasmsg ng-iconfont"></em><em class="ng-iconfont down"></em></a><div class="ng-d-box ng-down-box ng-username-slide" style="display:none;"><a href="" class="ng-vip-union" target="_blank" rel="nofollow">账号管理</a><a href="" rel="nofollow">退出登录</a></div></div><div class="ng-bar-node reg-bar-node" id="reg-bar-node" style="display: none;"><a href="" rel="nofollow" class="login">登录</a><a href="" target="_blank" class="login reg-bbb" rel="nofollow">注册</a></div><div class="ng-bar-node-box myorder-handle"><a class="ng-bar-node ng-bar-node-fix touch-href ng-bar-node-pr5"><span>我的买啦</span><em class="ng-iconfont down"></em></a><div class="ng-down-box ng-d-box myorder-child" style="display:none;"><a>待支付<em id="waitPayCounts"></em></a><a>待收货<em id="waitDeliveryCounts"></em></a><a>待评价<em id="waitEvaluation"></em></a><a>修改订单</a></div></div><a class="ng-bar-node ng-bar-node-mini-cart" rel="nofollow" href=""><span><img src="img/购物车.png" />购物车</span><span class="total-num-bg-box"><em></em><i></i></span></span></a><div class="ng-bar-node-box mysuning-handle"><a href="" rel="nofollow" name="" class="ng-bar-node ng-bar-node-fix touch-href ng-bar-node-pr5"><span>收藏夹</span><em class="ng-iconfont down"></em></a><div class="ng-down-box ng-d-box mysuning-child" style="display:none;"><a href="" rel="nofollow" target="_blank">我的二手</a><a href="" rel="nofollow">我的收藏</a></div></div><div class="ng-bar-node-box app-down-box"><a href="" target="_blank" rel="nofollow" class="ng-bar-node mb-suning touch-href"><span>关注买啦</span></a><div class="ng-mb-box ng-d-box mb-down-child" style="display:none;"><div class="ng-code-box"><p class="ng-tip"><a href="" rel="nofollow" target="_blank"></a></p><a target="_blank"><img src="" height="80" width="80"></a></div><div class="ng-app-box"><div class="ng-app-list"><a href="" target="_blank" rel="nofollow" class="ng-app"><img src="" title="###"></a><a href="" target="_blank" rel="nofollow" class="ng-app"><img src="" title="###"></a><a class="ng-app"><img src="" title="###"></a><a href="" target="_blank" rel="nofollow" class="ng-app"><img src="" title="###"></a></div></div><a href="" target="_blank" rel="nofollow"><img src="" height="35" width="242"></a><a href="" class="ng-close" rel="nofollow"><em class="ng-iconfont"></em></a></div></div><a href="" class="ng-bar-node ng-bar-node-pr5" target="_blank"><span>卖家中心</span><em class="ng-iconfont down"></em></a><div class="ng-bar-node-box service-handle"><a href="" class="ng-bar-node ng-bar-node-service ng-bar-node-fix touch-href ng-bar-node-pr5" rel="nofollow"><span>联系我们</span><em class="ng-iconfont down"></em></a><div class="ng-down-box ng-d-box service-center-child ng-ser-list" style="display:none;"><a>帮助中心</a><a>查找门店</a><a>退换货</a><a>帮客预约</a><a>建议反馈</a></div></div></div><div id="ng-minicart-slide-box"></div></div></div><header class="ms-header ms-header-inner ms-head-position"><article class="ms-header-menu"><style type="text/css">.nav-manage .list-nav-manage {position: absolute;padding: 15px 4px 10px 15px;left: 0;top: -15px;width: 90px;background: #FFF;box-shadow: 1px 1px 2px #e3e3e3, -1px 1px 2px #e3e3e3;z-index: 10;}.ms-nav li {float: left;position: relative;padding: 0 20px;height: 44px;font: 14px/26px "Microsoft YaHei";color: #FFF;cursor: pointer;z-index: 10;}</style><div class="header-menu"><div class="ms-logo"><a class="ms-head-logo" name="Myyigou_index_none_daohangLogo"><span style="font-size: 30px;color: #fff;font-weight: bold; line-height: 28px;;">我的买啦</span></a></div><nav class="ms-nav"><ul><li class=""><a href="" data-url="">首页</a><i class="nav-arrow"></i></li><li class="nav-manage selected"><a href="" data-url="">账户管理<em></em></a><i class="nav-arrow"></i><div class="list-nav-manage " hidden=""><p class="nav-mge-hover">账户管理<em></em></p></div></li><li class="ms-nav-msg"><a>消息</a><i class="nav-arrow"></i></li></ul><div class="ms-search"><form><input id="" type="text" value=""></form></div></nav></div></article><article class="ms-useinfo"><div class="header-useinfo" id=""><div class="ms-avatar"><div class="useinfo-avatar"><img src="img/头像.png"><div class="edit-avatar"></div><a class="text-edit-avatar">修改</a></div><a>sunshine</a></div><div class="ms-name-info"><div class="link-myinfo"><a>我的编号:99653</a></div><div class="info-member"><span class="name-member member-1"><i></i><a target="_blank" >注册会员</a></span><span style="margin-left: 20px;"><a target="_blank" >我的资料</a></span></div><div class="info-safety"><span class="safety-lv lv-3"><a >安全等级：<span>中</span></a></span><a class="bind-phone"><i style="background-image: url(img/修改手机.png);"></i>修改手机</a><a class="bind-email"><i style="background-image: url(img/绑定邮箱.png);"></i>修改邮箱</a><a class="manage-addr"><i style="background-image: url(img/地址管理.png);"></i>地址管理</a></div></div></div></article></header><div id="ms-center" class="personal-member"><div class="cont"><div class="cont-side"><div class="side-neck" style="margin-top: 20px;"><i></i></div><div class="ms-side" style="margin-top: 20px;" ><article class="side-menu side-menu-off"><dl class="side-menu-tree" style="padding-left: 50px;"><dt><img src="img/左侧/我的购物车.png" style="margin-right: 10px;margin-left: -20px;"/>我的购物车</dt><dt><img src="img/左侧/file.png" style="margin-right: 10px;margin-left: -20px;"/>订单管理</dt><dd><a>我的订单</a></dd><dd><a>我的收藏</a></dd><dd><a>我的评价</a></dd><dd><a>我的足迹</a></dd><dd><a>我的拍卖</a></dd><dd><a>我的优惠券</a></dd><dt><img src="img/左侧/我的买啦.png" style="margin-right: 10px;margin-left: -20px;"/>我的买啦</dt><dd><a>我的推荐</a></dd><dd><a style="color:#f70">我的钱包</a></dd><dd><a>我要提现</a></dd><dd><a>我的买豆</a></dd><dd><a>邀请管理</a></dd><dt><img src="img/左侧/v-card-3.png" style="margin-right: 10px;margin-left: -20px;"/>售后服务</dt><dd><a>退换货</a></dd><dd><a >意见/投诉</a></dd></dl><a ison="on" class="switch-side-menu icon-up-side"><i></i></a></article></div></div><div class="cont-main"><div class="main-wrap mt15" style="border: 0px;"><h3 style="background-color:#fafbff ;padding: 15px;width: 980px;"><strong>账户余额:<font style="font-size: 20px;color: #F37B1D;"> 1045.<font style="font-size: 12px;color: #F37B1D;font-weight: bold;">98元</font></font></strong><button style="margin-left:100px;padding: 5px; border: 1px #CCCCCC solid;border-radius: 5px;background-color:#f3f3f3;">充值</button><button style="margin-left:20px;padding: 5px; border: 1px #CCCCCC solid;border-radius: 5px;background-color:#f3f3f3;">提现</button><button style="margin-left:20px;padding: 5px; border: 1px #CCCCCC solid;border-radius: 5px;background-color:#f3f3f3;">转账</button></h3><div class="profile-info"><div class="control-group clearfix " style="margin-top: 21px;width: 1010px;"><div ><span style="margin-left:15px;"><font style="font-size: 14px;color: #333333; font-weight:bold;" >最近交易记录</font></span><a style="color: #007AFF;margin-left: 10px;margin-right: 20px;font-size: 14px;">充值记录</a><span style="color: #e3e3e3;">|</span><a style="color: #007AFF;margin-left: 20px;margin-right: 20px;font-size: 14px;">提现记录</a><span style="color: #e3e3e3;">|</span><a style="color: #007AFF;margin-left: 20px;font-size: 14px;">退款记录</a><div style="float:right;display: inline;margin-left:120px;border: 1px #ccc solid;display: inline-block;background-color: #F5F5F5;height: 25px;width: 150px;"> <input type="text" placeholder="余额收支明细" style="width:130px;border: 0px;background-color: #fff;line-height: 25px;border-right: 1px #ccc solid;" /><img src="img/搜索.png" style="height: 10px;width: 10px;" /></div> </div></div></div><div style="margin-top: 10px;background:#f3f5fa;height:50px;width:1014px;"><table class="sui-table table-bordered-simple" ><tr style="background-color: #f8f8f8;color: #797d7d;" ><th style="line-height:50px;" ><font style="font-size: 14px;margin-left:28px; ">分类</font></th><th style="line-height:50px;margin-left:135px;" nowrap><font style="font-size: 14px; ">创建时间</font></th><th style="line-height:50px;" nowrap><font style="font-size: 14px;margin-left: 41px; ">名称 | 对方 | 交易</font></th><th style="line-height:50px; "nowrap ><font style="font-size: 14px;margin-left:44px; ">金额 | 明细</font></th><th style="line-height:50px; " nowrap><font style="font-size: 14px;margin-left:35px; ">状态</font></th><th style="line-height:50px; " nowrap ><font style="font-size: 14px;margin-left:35px; ">操作</font></th></tr><tr ><td style="padding: 30px;font-size: 14px;">中国移动</td><td style="font-size: 14px">-04-15<br />10:00:00</td><td style="font-size: 14px;padding-left: 50px;">啦啦啦啦啦啦啦</td><td style="font-size: 14px;"><span style="margin-left: 41px;">+500</span></td><td style="font-size: 14px"><span style="margin-left: 28px;">交易成功</span></td><td style="font-size: 14px"><span style="margin-left: 35px;color: #007AFF;">详情</span></td></tr><tr ><td style="padding: 30px;font-size: 14px;">中国移动</td><td style="font-size: 14px;">-04-15<br />10:00:00</td><td style="font-size: 14px;padding-left: 50px"><span >啦啦啦啦啦啦啦</span></td><td style="font-size: 14px"><span style="margin-left: 41px;">-90</span></td><td style="font-size: 14px"><span style="margin-left: 28px;">交易成功</span></td><td style="font-size: 14px"><span style="margin-left: 35px;color: #007AFF;">详情</span></td></tr></table><p style="text-align:right;margin-top: 130px;width: 100%;"><span class="fenye" style="margin-right: 10px;"><</span><span class="fenye">1</span><span class="fenye">2</span><span class="fenye">3</span><span class="fenye">4</span><span class="fenye">5</span>.....<span class="fenye">></span>共1页，到<input type="text" value="1" style="width: 20px;margin-left: 10px;margin-right: 10px;" />页<button style="background-color: #f95555;padding: 3px;border: 0px;color: #fff;margin-left: 10px;">确认</button></p></div></div></div></div></div></div><div class="clear"></div><div class="ng-footer"><textarea class="footer-dom" id="footer-dom-02"></textarea><div class="ng-fix-bar"></div></div><style type="text/css">.fenye{border: 1px #ccc solid;padding: 3px; width: 20px;}.ng-footer {height:514px;margin-top: 0;}.ng-s-footer {height: 130px;background: none;text-align: center;}.ng-s-footer p.ng-url-list {height: 25px;line-height: 25px;}.ng-s-footer p.ng-url-list a {color: #666666;}.ng-s-footer p.ng-url-list a:hover {color: #f60;}.ng-s-footer .ng-authentication {float: none;margin: 0 auto;height: 25px;width: 990px;margin-top: 5px;}.ng-s-footer p.ng-copyright {float: none;width: 100%;}.root1200 .ng-s-footer p.ng-copyright {width: 100%;}</style><script type="text/javascript" src="js/safe/ms_common.min.js"></script></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
学生DW网页设计作业成品——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
