HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
文章目录
- 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">
2016-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;">
2016-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号 获取更多源码
更多推荐
div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
发布评论