HTML期末作业作业-仿商城个人中心网站模板(HTML+CSS+JavaScript)
商城个人中心网站模板学校网站模板 html学校网站模板 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">
</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>
</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获取更多源码!