div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
2024-05-09 11:20:04
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网页作品 购物网页作业成品 学生商城网站模板相关推荐
- HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学 ...
- HTML+CSS大作业——旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板 常见网页设计作业题材有 个人. 美 ...
- HTML5期末大作业：旅游出行网站设计——旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板
HTML5期末大作业:旅游出行网站设计--旅游网设计(15页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生旅游网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- B8HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板
HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- HTML5期末大作业：漫画网站设计——二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板
HTML5期末大作业:漫画网站设计--二次元漫画(8页) 漫画网页设计制作 简单静态HTML网页作品 我的漫画网页作业成品 学生漫画网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- HTML5期末大作业：动漫网站设计——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- HTML5期末大作业：汽车商城网站设计——汽车商城-功能齐全(42页) 大学生汽车商城网页设计模板代码 网购网页作业成品 汽车商城网站设计成品
HTML5期末大作业:汽车商城网站设计--汽车商城-功能齐全(42页) 大学生汽车商城网页设计模板代码 网购网页作业成品 汽车商城网站设计成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- 学生DW静态网页设计 旅游—我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文 新密旅游网页设计制作 简单静态HTML 文章目录 HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含 ...
- HTML+CSS大作业——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作 简单静态HTML网页作品 漫画作业成品 学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 文章目录 HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 一.作品展示 二.文件目录 三.代码实现 四. ...
最新文章
- 综合论文训练2021年评审意见
- 算法--2016搜狐面试：搜狐员工放假了，都玩什么？
- （Spring）整合mybatis
- 强网杯Web部分review
- 高程数据处理_珠峰长高了吗？新高程怎么算出来的？揭秘
- Linux系统编程（八）线程
- 通讯接口应用笔记2：MAX3160实现多协议通讯
- c 获取mysql安装路径_linux查看mysql安装路径
- Devexpress Chart series 点击时获取SeriesPoint的值
- 【点阵液晶编程连载三】点阵LCD 的驱动与显控
- isscalar matlab,大数的素性检测(用MATLAB仿真)
- java学习日记 集合框架
- Unable to add window -- token null is not for an application
- opipe--一款基于java的自定义“命令”管道
- 傻傻分不清之 Cookie、Session、Token、JWT这次让你彻底搞懂，还不懂你来找我
- 数字电子技术逻辑运算
- Web服务器性能压力测试工具
- Nightwish全部专辑320kbs全集下载
- IDEA中使用Git，文件不同颜色代表的含义
- python k线斜率计算_在Python中计算斜率的方法