HTML期末作业作业-仿商城个人中心网站模板(HTML+CSS+JavaScript)
商城个人中心网站模板,全套模板,包括注册、登录、个人中心首页、实名认证、购物车、我的成长值、意见投诉、自营店铺、我的购物券、店铺收藏、安全设置等多个网站模板页面。
效果演示
代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" href="css/amazeui.min.css" /><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/amazeui.min.js"></script><link rel="stylesheet" href="css/login.css" /><link rel="stylesheet" href="css/mui.min.css" /><script type="text/javascript" src="js/mui.min.js" ></script><script type="text/javascript" src="js/login.js" ></script><title></title><style>.bottomLine{border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;padding-top:8px;/*padding-bottom:10px;*/}.bot{/*margin-top: 5px;*/margin-bottom: 49px;/*text-align: center;*/color: #7b6f5b;}</style></head><body><div class="am-g" style="margin-top:30px;"><div style="width: 1200px;margin: 0 auto;"><div class="logo" ><img src="img/logo.png" /></div><div style="float: right;margin-right: 60px;margin-top: 18px;"><span style="float: right;font-size: 12px;margin-left: 5px;color: #7d7d7d;"><span style="background-image: url(img/massageicon.png);width: 20px;height: 20px;margin-top:4px;float: left;background-repeat: no-repeat;margin-right: 8px;"></span>对登录页面的建议</span></div></div></div><div class="am-g content" style="margin-top: 43px;"><div style="width:1200px;margin:0 auto;position: relative;z-index: 999;"><div class="loginDiv " style="display: block;" id="login" ><div class="am-u-sm-12" style="padding-right: 0rem"><img src="img/erweima.png" style="float: right;height: 58px;" id="loginimg"/ > </div><div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;"><h4 style="font-weight: normal;">欢迎登录</h4><span class="left1"></span> <input type="text" class="am-form-field" placeholder="邮箱/手机号/用户名" style="padding-left: 50px;margin-top: 48px;font-size: 12px;"/></div> <div class="am-u-sm-12" style="margin-top: 21px;padding-left: 30px;padding-right: 30px;"><span class="left2"></span> <input type="password" class="am-form-field" placeholder="请输入密码"style="padding-left: 50px;font-size: 12px;"/></div> <div class="am-u-sm-12" style="margin-top: 12px;padding-left: 30px;padding-right: 30px;font-size: 12px;color: #757575;"><input type="checkbox" style="margin-top:1px;vertical-align:middle;"/><span style="margin-bottom:-1px;margin-left: 10px;font-size: 12px;vertical-align: middle;">自动登录</span></div> <div class="am-u-sm-12" style="margin-top: 45px;padding-left: 30px;padding-right: 30px;"><button type="button" class="am-btn am-btn-warning" style="width: 100%;border-radius: 5px;font-size: 16px;" >登录</button> </div><div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;"><p style="width: 100%;margin-top: 15px;font-size: 12px;color: #333333;">忘记登录密码 <span style="float: right;">免费注册</span></p></div></div><!--扫码页面--><div class="loginDiv" style="display: none;" id="erm" ><div class="am-u-sm-12" style="padding-right: 0rem"><img src="img/pc_2.png" style="float: right;" id="ermimg" /> </div><div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;margin-top: 30px;text-align: center;"><h4 >手机扫码,安全登录</h4></div> <div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;margin-top: 50px;text-align: center;"><img src="img/aerweima.png" /></div> <div class="am-u-sm-12" style="margin-top: 50px;padding-left: 30px;padding-right: 30px;text-align: center;"><p style="font-size: 14px;">请使用买啦网客户端扫描二维码登录</p><p style="text-align: center;"><span style="background-image: url(img/Download-512.png);float: left;width: 20px;height: 20px;margin-top:5px;background-repeat: no-repeat;margin-left: 100px;"></span><a style="float: left;font-size: 12px;"> 下载买啦客户端</a></p> </div> <div class="am-u-sm-12" style="margin-top: 10px;padding-left: 30px;padding-right: 30px;margin-bottom: 100px;"></div></div></div></div><div class="am-g " style="margin-top: 81px;text-align: center;font-size: 12px;"><div class="bottomLine" style="margin:0 auto;width:700px;height: 35px;"><span style="float: left;word-spacing:0.52rem; text-align: center; width: 100%;">关于我们 | 联系我们 | 商家入驻 | 友情链接 | 站点地图 | 手机商城 | 销售联盟 | 商城社区 | 企业文化 | 帮助中心 </span></div></div> <div class="am-g" ><div class="bot "><div style="margin:0 auto;width:700px;height: 30px;"><p style="font-size: 12px;float: left; line-height: 10px;">© 2005-2016 买啦网 版权所有 ,并保留所有权利 <span style="margin-left: 30px;">买啦 Tel :4008125181 </span><span style="margin-left: 20px;">E-mai:maila@163.com</span> </p></div></div></div></body></html>
做好的网页效果,如何通过发链接给别人看?
1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
前端 零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉ 3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !
更多HTML期末学生作业文章
1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)
2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)
3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
HTML期末作业作业(下载)
1.web前端期末节课大作业~html学生信息管理系统模板
2.web前端期末节课大作业 ~HTML学校后台用户登录界面模板
3.web前端期末节课大作业 ,~小米官网竖直分类导航菜单
4.web前端期末节课大作业~HTML5大学生网上报到系统响应式模板
5.web前端期末节课大作业~自考大学官网HTML模板
6.web前端期末节课大作业 ~小米商城官网首页模板
7.web前端期末节课大作业-绿色IT技术在线教育响应式模板
8.web前端期末节课大作业~HTML教育培训机构网站模板
9.web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
10.web前端期末节课大作业 ~HTML5响应式少儿舞蹈培训学校网站模板
11.web前端期末节课大作业~红色教育培训画室HTML网站模板
[12.HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)] (https://blog.csdn.net/ruan365392777/article/details/118080654)
更多源码
❤100款表白源码演示地址
HTML期末作业作业-仿商城个人中心网站模板(HTML+CSS+JavaScript)相关推荐
- HTML期末作业-仿家居装饰公司HTML网站模板(HTML+CSS+JavaScript)
HTML期末作业-仿家居装饰公司HTML网站模板(HTML+CSS+JavaScript) 绿色家居装饰工程公司HTML网站模板,DIV+CSS布局设计,全套模板,包括首页.公司简介.新闻资讯.经典案 ...
- javascript网站期末作品~html电影资讯博客网站模板(HTML+CSS+JavaScript)在线电影网页设计
javascript网站期末作品~电影资讯博客网站模板(HTML+CSS+JavaScript) 一款黑色响应式的电影新闻资讯,电影热点资讯,电影博客类型网页模板html.望大家学习使用(首页/电影/ ...
- HTML5期末大作业:个人商城网站设计——商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:个人商城网站设计--商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 ...
- HTML+CSS大作业——商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:个人商城网站设计--商城个人中心网站模板(56页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 一.作品展示 二.文件目录 三.代码实现 <!doctype ...
- HTML5期末大作业:商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业:商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5响应式手机模板:【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板 手机网站模板 电商网站手机模板 响应式手机网站 html5手机网站模板 ...
- HTML期末作业-仿美食菜谱网站模板(HTML+CSS+JavaScript)
HTML期末作业-仿美食菜谱网站HTML模板(HTML+CSS+JavaScript) 美食菜谱网站模板,DIV+CSS布局设计,自适应分辨率,兼容PC端和移动端,全套模板,包括首页.饮食健康.美食达 ...
- JavaScript期末大作业 极简个人相册留言博客模板(HTML+CSS+JavaScript)
最新文章
- 20210928 对角化的充要条件
- Cpp / 右值、纯右值、将亡值
- IOS之Masonry约束的使用
- Spring,Reactor和ElasticSearch:使用伪造的测试数据进行标记
- Spring数据分析思维课
- 行政区村界线_市政府批复!崇川区部分行政区划调整
- response.sendRedirect(quot;http://www.baidu.comquot;);重定向
- python计算器函数图像_Python图形计算器,python,图像,化
- linux 下显示隐藏文件夹
- HAOI2017 八纵八横——线段树分治+线性基
- 谷歌Cloud、Paly 中的XSS 漏洞可导致账户劫持
- mca版Quiver快速入门
- 安卓adb工具的使用
- vue中this.$router.params接收传值为空咋办
- TPM 2.0规范系列解读——Part 1体系结构第(四)读:TPM架构
- Web开发基础——CSS
- openwrt下的网络设置过程
- 按钮(click button)
- 轻量级插件ResourceChecker
- unity跨场景保存(跨场景BGM的连续播放)