HTML5期末大作业网页设计：电商购物网站设计(56页) HTML+CSS+JavaScript 毕业设计、课程设计适用...
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作品介绍
1.网页作品简介 ：毕业设计、课程设计适用 HTML、css、js代码完整，图片完整，点击可实现网页链接，功能完整。
全套模板，总共包括注册、登录、个人中心首页、实名认证、安全设置、购物车、意见投诉、自营店铺、我的购物券、店铺收藏等56个网站模板页面，可直接使用。
2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。
3.网页作品布局：网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言，并使用JavaScript制作了表单判断(提交时表单不能为空)。
文章目录
- HTML5期末大作业网页设计：电商购物网站设计(56页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、web前端(学习资料)
- 五、源码获取
- 六、更多源码
二、文件目录
三、代码实现
<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>
progress {
width: 300px;
border: 1px solid #ffffff;
background-color: #e6e6e6;
color: #0064B4;
/*IE10*/
}
progress::-moz-progress-bar {
background: #FFFFFF;
}
progress::-webkit-progress-bar {
background: #ccc;
}
progress::-webkit-progress-value {
background: #FF7700;
}
a{
color: #000000;
}
.sui-table th, .sui-table td {
padding: 16px 8px;
line-height: 18px;
text-align: center;
vertical-align: middle;
border-top: 1px solid #e6e6e6;
}
.sui-nav.nav-tabs > .active > a {
font-weight: bold;
border:1px #fff solid;
background-color: #fff;
border-bottom-color: transparent;
cursor: default;
font-weight: bold;
color: #F2873B;
}
.sui-nav.nav-tabs > li > a {
color: #333333;
line-height: 18px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
border: 1px #fff solid;
border-bottom: 1px #fff solid;
height: 30px;
width: 110px;
text-align: center;
padding-top: 10px;
font-size: 14px;
}
.sui-nav.nav-tabs {
border-bottom: 1px solid #CECECE;
padding-left: 5px;
}
.sui-nav.nav-tabs > .active > a:hover {
font-weight: bold;
cursor: default;
font-weight: bold;
color: #F37B1D;
}
.sui-nav.nav-tabs > li {
margin-bottom: -1px;
background-color: #fff;
border-bottom: 1px #ccc solid;
}
.sui-nav.nav-tabs > .active {
border-bottom: 0;
}
.sui-nav.nav-tabs > li + li {
margin-left: -3px;
}
</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: 30px;">
<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>我的钱包</a>
</dd>
<dd>
<a>我要提现</a>
</dd>
<dd>
<a style="color:#f70">我的买豆</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;">
<div style="width: 1017px;height: 135px;background-image: url(img/我的买豆/组-38.png);">
<p style="text-align: center;font-size: 14px;color: #333333;margin-left: -28px; line-height: 23px;;">买豆专区</p>
<div style="float: left;margin-left: 21px;">
<div style="float: left;margin-left: 107px;">
<img src="img/我的买豆/猪的图标.png" />
</div>
<div style="float: left;margin-left: 32px;margin-top:15px;">
<dl style="font-size: 14px;font-weight:bold;color: #333333;margin-top: -10px;">可有买豆：<font style="color: #F88600;font-size: 25px;">996</font></dl>
<dl style="font-size: 12px;color: #333333;margin-top: 10px;">可抵现9.96元 100元买豆=1元</dl>
</div>
</div>
<div style="float: left;">
<div style="float: left;margin-left: 160px;">
<img src="img/我的买豆/矢量智能对象.png" />
</div>
<div style="float: left;margin-left: 32px;margin-top: 15px;">
<dl style="font-size: 14px;font-weight:bold;color: #333333;">兑换商品：买豆换购开始了！</dl>
<dl style="font-size: 12px;color: #333333;margin-top: 5px;"><span style="color: #fff;background-color: #F88600;border-radius: 5px;width: 100px;height: 20px;display: block;line-height: 20px;text-align: center;">点击兑换</span></dl>
</div>
</div>
</div>
<div style=" font-size:14px;color:#333333;width: 1017px;height: 50px;background-color: #f5f5f5;margin-top:20px;">
<span style="margin-left:40px ;line-height: 50px;font-weight: bold; padding-bottom: 14px;
border-bottom: 2px #f88600 solid;">买豆明细</span>
<span style="margin-left:100px ;line-height: 50px;font-weight: bold;">买豆收入</span>
<span style="margin-left:100px ;line-height: 50px;font-weight: bold;">买豆支出</span>
<input type="text" style="width: 150px;float: right;margin-top: 16px;margin-right: 20px;" placeholder="最近三个月买都记录" />
</div>
<table class="sui-table table-bordered-simple" style="width: 1017px;margin-top: 20px;font-size: 14px;color: #333333;">
<tbody>
<tr>
<td>产生时间</td>
<td>类型</td>
<td>收入/收入</td>
<td>当前买豆数量</td>
</tr>
<tr style="font-size: 12px;color:#686868;">
<td>待付款</td>
<td>9999.00</td>
<td>999</td>
<td>99999.00</td>
</tr>
<tr style="font-size: 12px;color:#686868;">
<td>已发货</td>
<td>9999.00</td>
<td>999</td>
<td>99999.00</td>
</tr>
<tr style="font-size: 12px;color:#686868;">
<td>已成功</td>
<td>9999.00</td>
<td>999</td>
<td>99999.00</td>
</tr>
</tbody>
</table>
<div>
<p style=" width: 90px;background-color: #fff; float: left;font-size: 14px;font-weight: bold; margin-top: 20px; margin-left: 12px;">买豆兑换</p> <span style=" width: 56px;font-size: 8px; float: left;position: absolute;background-image: url(img/我的买豆/多边形-4.png); display: block;text-align: right; color: #fff;margin-left: 70px; margin-top: 16px;">热门兑换</span>
</div>
<div style="margin-top: 100px;">
<div style="float: left; ">
<div style="background-image: url(img/我的买豆/组-39.png);width: 219px;height: 344px;padding: 3px">
<img src="img/wdxx_01.png" style="width: 216px;height:230px;"/>
<span style="margin-left:163px;background-color:#fa6e4c;padding: 3px;color: #fff;margin-top: -25px;position: absolute;float: right;">596买豆</span>
<dl style="color: #333333;font-size: 12px;position: absolute;margin-top:0px;margin-left: 00px;">使用条件：满40.00</dl>
<dl style="color: #333333;font-size: 16px;font-weight:bold;position: absolute;margin-top:20px;margin-left: 00px;">￥50</dl>
<span style="padding: 2px;background-color:#F88600;color:#fff;display: block;text-align: center;margin-left: 40px;margin-top: 60px;width: 130px;height: 30px;line-height: 30px;border-radius: 5px;">立即换购</span>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div style="background-image: url(img/我的买豆/组-39.png);width: 219px;height: 344px;padding: 3px;">
<img src="img/wdxx_01.png" style="width: 216px;height:230px;"/>
<span style="margin-left:163px;background-color:#fa6e4c;padding: 3px;color: #fff;margin-top: -25px;position: absolute;float: right;">596买豆</span>
<dl style="color: #333333;font-size: 12px;position: absolute;margin-top:0px;margin-left: 00px;">使用条件：满40.00</dl>
<dl style="color: #333333;font-size: 16px;font-weight:bold;position: absolute;margin-top:20px;margin-left: 00px;">￥50</dl>
<span style="padding: 2px;background-color:#F88600;color:#fff;display: block;text-align: center;margin-left: 40px;margin-top: 60px;width: 130px;height: 30px;line-height: 30px;border-radius: 5px;">立即换购</span>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div style="background-image: url(img/我的买豆/组-39.png);width: 219px;height: 344px;padding: 3px;">
<img src="img/wdxx_01.png" style="width: 216px;height:230px;"/>
<span style="margin-left:163px;background-color:#fa6e4c;padding: 3px;color: #fff;margin-top: -25px;position: absolute;float: right;">596买豆</span>
<dl style="color: #333333;font-size: 12px;position: absolute;margin-top:0px;margin-left: 00px;">使用条件：满40.00</dl>
<dl style="color: #333333;font-size: 16px;font-weight:bold;position: absolute;margin-top:20px;margin-left: 00px;">￥50</dl>
<span style="padding: 2px;background-color:#F88600;color:#fff;display: block;text-align: center;margin-left: 40px;margin-top: 60px;width: 130px;height: 30px;line-height: 30px;border-radius: 5px;">立即换购</span>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div style="background-image: url(img/我的买豆/组-39.png);width: 219px;height: 344px;padding: 3px;">
<img src="img/wdxx_01.png" style="width: 216px;height:230px;"/>
<span style="margin-left:163px;background-color:#fa6e4c;padding: 3px;color: #fff;margin-top: -25px;position: absolute;float: right;">596买豆</span>
<dl style="color: #333333;font-size: 12px;position: absolute;margin-top:0px;margin-left: 00px;">使用条件：满40.00</dl>
<dl style="color: #333333;font-size: 16px;font-weight:bold;position: absolute;margin-top:20px;margin-left: 00px;">￥50</dl>
<span style="padding: 2px;background-color:#F88600;color:#fff;display: block;text-align: center;margin-left: 40px;margin-top: 60px;width: 130px;height: 30px;line-height: 30px;border-radius: 5px;">立即换购</span>
</div>
</div>
</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">
.yuan{
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #64bdc5;
display: block;
text-align: center;
vertical-align: middle;
line-height: 30px;
color: #fff;
font-size: 18px;
margin-top: 50px;
}
.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>
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻
本文标签：
作业毕业设计网页设计网站设计期末
发表评论