【练习】苏宁易购注册界面的实现

最新推荐文章于 2023-05-08 08:56:39 发布
最新推荐文章于 2023-05-08 08:56:39 发布
阅读量2.5k 收藏 16
点赞数 2
分类专栏： 前端练习项目 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46303867/article/details/106040524
版权

html代码+css代码

 <!DOCTYPE html>
    <html>
	<head>
		<meta charset="utf-8">
		<title>苏宁易购</title>
		<style>
			body{
				font-family: "microsoft yahei";
				background-color: rgb(248,248,248);
				font-size: 12px;
			}
			div.big{
				max-width: 860px;
				height: 450px;
				
				margin: 0 auto;
			}
			div.title{
				max-width: 860px;
				height: 76px;
			}
			div.bottom{
				background-color: white;
				border: 1px solid #C0C0C0;
				border-top: 3px solid #f90;
			}
			div.small{
				max-width: 333px;
				margin: 0 auto;
			}
			div.text{
				float: left;
				font-size: 18px;
				color: rgb(102,105,102);
				line-height: 76px;
			}
			div.text2{
				float: left;
				line-height: 20px;
			}
			div.input{
				margin: 0 auto;
				margin-top: 50px;
				max-width: 333px;
			}
			div.liwu{
				font-size: 14px;
				margin: 0 auto;
				line-height: 20px;
			}
			div.phone{
				border: 1px solid #C0C0C0;
				max-width: 333px;
				height: 37px;
				margin-bottom: 28px;
			}
			div.phone_1{
				height: 34px;
				width: 250px;
				float: left;
			}
			div.phone_2{
				height: 34px;
				width: 120px;
				float: left;
			}
			div.phone_3{
				line-height: 36px;
				width: 120px;
				float: right;
				background-color: rgb(245,245,245);
				text-align: center;
				
			}
			div.submit{
				width: 333px;
				margin-top: 60px;
				height: 37px;
			}
			div.qiye{
				margin-top: 5px;
				width: 333px;
				height: 19px;
				margin-bottom: 25px;
			}
			div.list{
				width: 333px;
				font-size: 10px;
			}
			a.logo{
				float: left;
				margin-right: 20px;
			}
			a.login{
				color: #333333;
				float: right;
				margin-top: 50px;
			}
			a.qiye{
				
				color: #1afa29;
				line-height: 19px;
			}
			a.login:hover,a.code:hover,a.list:hover{
				color: rgb(225,105,0);
			}
			
			a.code{
				color: #333333;
				font-size: 13px;
				
			}
			a.list{
				color: #333333;
			}
			img.liwu{
				width: 18px;
				height: 18px;
				float: left;
			}
			img.home{
				width: 16px;
				height: 16px;
				
			}
			label.head{
				float: left;
				width: 70px;
				margin-left: 8px;
				line-height: 37px;
			}
			input.phone{
				height: 100%;
				width: 100%;
				
			}
			input.submit{
				width: 100%;
				height: 100%;
				background-color: rgb(255,85,0);
			}
			input{
				border: 0px;
				background: 0px;
				outline: 0;
				background-color: white);
			}
			input[placeholder]{
				font-family:"microsoft yahei" ;
				font-size: 12px;
				color: rgb(202,202,202);
			}
			input[value]{
				font-size: 18px;
				color: white;
			}
			a{
				text-decoration:none;
			}
			p.list{
				text-align: center;
			}
			p.list2{
				text-align: center;
				color: #b2b2b2;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="title">
				<a href="https://www.suning.com/" class="logo"><img src="img/logo.png" height="72px"></a>
				<a href="https://www.suning.com/" class="login">我已经注册，马上登录></a>
				<div class="text">
					欢迎注册
				</div>
			</div>
			<div class="bottom">
				
				<div class="input">
					<div class="liwu">	
						
							<img src="img/礼物.png" class="liwu"/>
						
						<div class="text2"></div>
						注册领<strong style="color: #ff4400;">199</strong>元大礼包
					</div>
					<br/>
					<form action="so.do" method="post">
						<div class="phone">
						 <label class="head">手机号</label>
						 <div class="phone_1">
							 <input type="text" class="phone" maxlength="11" placeholder="建议使用常用的手机号"/>
						 </div>
						 </div>
						 <div class="phone">
						 <label class="head">手机验证码</label> 
						 <div class="phone_2">
						 							 <input type="text" class="phone" placeholder="请输入手机验证码"/>
						 </div>
						 <div class="phone_3">
						 							 <a href="" class="code">获取短信验证码</a>
						 </div>
						 </div>
						 <div class="phone">
							 <label class="head">设置密码</label>
							 <div class="phone_1">
								  <input type="text" class="phone" maxlength="11" placeholder="请输入密码"/>
							 </div>
						 </div>
						 <div class="submit">
						 	<input type="submit" value="提交注册" class="submit"/>
						 </div>
						<div class="qiye">
							<a href="https://reg.suning.com/company.do" class="qiye"><img src="img/楼房-大厦.png" class="home"> 企业用户注册></a>
						</div>
					</form>
				</div>
				
			</div>
			<div class="list1">
				<p class="list">
								<a href="" class="list">苏宁	互联&nbsp;<span>|</span>&nbsp;苏宁金融&nbsp;<span>|</span>&nbsp;苏宁支付&nbsp;<span>|</span>&nbsp;PP视频&nbsp;<span>|</span>&nbsp;红孩子&nbsp;<span>|</span>
								&nbsp;苏宁物流&nbsp;<span>|</span>&nbsp;手机苏宁&nbsp;<span>|</span>&nbsp;零售云&nbsp;<span>|</span>&nbsp;苏宁云&nbsp;<span>|</span>&nbsp;知识产权举报&nbsp;<span>|</span>&nbsp;投资者关系&nbsp;<span>|</span>&nbsp;苏宁智能
								</a>
							</p>
							<p class="list">
								<a href="" class="list">联系我们&nbsp;<span>|</span>&nbsp;诚聘英才&nbsp;<span>|</span>&nbsp;合作招商&nbsp;
								<span>|</span>&nbsp;广告平台&nbsp;<span>|</span>&nbsp;苏宁联盟&nbsp;<span>|</span>
								&nbsp;苏宁招标&nbsp;<span>|</span>&nbsp;友情链接&nbsp;<span>|</span>&nbsp;隐私政策&nbsp;
								<span>|</span>&nbsp;用户体验提升计划&nbsp;<span>|</span>&nbsp;股东会员认证</a>
							</p>
							<p class="list2">
								<a>Copyright© 2002-2020，苏宁易购集团股份有限公司版权所有&nbsp;<span>|</span>&nbsp;
								<img src="img/国徽.png" width="18px" height="18px" align="center"/>&nbsp苏公网安备 32010202010078号
								&nbsp;<span>|</span>&nbsp;苏ICP备10207551号-4
								</a>
							</p>
							<p class="list2">
								<a>
									合字B2-20180025&nbsp;<span>|</span>&nbsp;合字A1.B1.B2-20180017&nbsp;<span>|</span>&nbsp;
									出版物经营许可证新出发苏批字第A-243号&nbsp;<span>|</span>&nbsp;互联网药品信息服务资格证书（苏）-非经营性-2016-0005
								</a>
							</p>
							<p class="list2">
								<a>
									经营证照&nbsp;<span>|</span>&nbsp;网络文化经营许可证：苏网文〔2018〕10580-203号
									&nbsp;<span>|</span>&nbsp;互联网违法和不良信息举报邮箱：kfpt-yy@cnsuning.com&nbsp;<span>|</span>&nbsp;
									举报电话：02566996699-865948
								</a>
							</p>
							<p class="list2">
								<a>
									医疗器械网络交易服务第三方平台备案凭证-（苏）网械平台备字（2018）第00052号
								</a>
								
							</p>
							<p class="list2">
								<a>
									本网站直接或间接向消费者推销商品或者服务的商业宣传均属于&nbsp;"广告"&nbsp; （包装及参数、售后保障等商品信息除外）
								</a>
							</p>
							<p>
								<a>
									<img src="" />
								</a>
							</p>
			</div>
		</div>
	</body>
    </html>

结束语

  很多的实现方法仅仅用了所学的知识点，复杂化了其实现过程，相信之后的学习能让自己将该注册页面的实现过程简单化，模块化。
皮皮潇冲冲冲
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
利用JS实现简单的登录和注册页面
m0_57147195的博客
04-17 3635
利用JS实现页面的简易登录和注册功能
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
注册页面和登录界面所需的JS
hyy615545936的博客
03-23 710
一。注册页面    注册页面需要内容有两个密码，邮箱，手机号，QQ，如何完成用户间的体验 前提是使用jquery.validate.min.js插件 1.手机号码验证规则： jQuery.validator.addMethod("phone", function (value, element) {     var phone = /(^13\d{9}$)|(^14)
苏宁的Node.js实践：不低于Java的渲染性能、安全稳定迭代快
前端下午茶
10-08 276
作者 | 禹立彬 编辑 | 薛梁 前端 Node.js 的使用场景大多集中在前端工具上，当前的前端主要把它定位为辅助。苏宁易购使用 Node.js 作为前后端...
js苏宁易购注册页面 zjy
weixin_73158514的博客
01-04 202
js苏宁易购注册页面 苏宁易购zjy
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
qq_38514511的博客
05-08 95
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
网络爬虫-苏宁易购api_sign参数逆向解析
qq_39802740的博客
07-12 1110
失踪人口回归~~~ 今天给大家带来的是一个简单的js加密分析，废话不多说，先上目标站 [定向传送门](https://detail.vip.com/detail-1710615076-6919201301694309444.html 我们的目标就是采集到这个累计热卖xxx件。 右键查看源码可以发现并没有藏在静态的HTML中，可以分析出是通过XHR传递到页面上的，所以接下来我们进行抓包操作。 可以很轻松地找到这个接口，发现返回的数据里面有我们需要的，然后开始分析这个接口里面的参数，很明显我们发现了api_s
基于html+css+js开发的仿苏宁易购商城项目+源码
最新发布
05-14
基于html+css+js开发的仿苏宁易购商城项目+源码 基于html+css+js开发的仿苏宁易购商城项目+源码 ... HTML + CSS布局静态页面，JS实现轮播图，倒计时的动态特效，供日常练习。 细节说明已经写在代码的注释里了
jquery-仿苏宁易购每天首页出现广告弹出层.rar
07-11
本项目“jquery-仿苏宁易购每天首页出现广告弹出层.rar”是一个实例，演示如何利用jQuery来模拟苏宁易购电商网站上常见的广告弹出窗口效果。这个效果通常用于吸引用户的注意力，展示促销信息或者新品推荐。 首先，...
苏宁易购2-(remb+js布局)
03-08
在IT行业中，网页布局设计是前端开发的重要环节，而"苏宁易购2-(remb+js布局)"这个项目显然关注的是使用REM单位结合JavaScript来实现响应式布局的方法。在这个项目中，开发者可能需要掌握以下几个核心知识点： 1. *...
苏宁易购 源码
03-17
苏宁易购 源码，
javascript经典特效---jquery仿苏宁易购商城产品图片全方位展示功能.rar
03-26
jquery仿苏宁易购商城产品图片全方位展示功能.rar
scratch实现字母输入法练习.sb3
10-28
scratch实现字母输入法练习.sb3
HTML网页练习之网易邮箱注册页面
12-01
HTML网页练习之网易邮箱注册页面是一项旨在提升web前端技能的实践项目。在这个项目中，开发者使用HTML、CSS和JavaScript这三种核心技术，构建了一个类似于网易邮箱的实际注册页面。这个过程不仅涵盖了网页的基本结构...
苏宁易购首页制作1
Hong的博客
05-20 3580
Hong Shield的Web前端之路-苏宁易购首页制作1
移动端项目-苏宁易购
weixin_45662026的博客
12-01 351
【代码】移动端项目-苏宁易购。
用html+css制作简单好看的登陆注册界面
热门推荐
小袁同学的博客
07-19 6万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
web网页设计实例作业 ：博客后台系统网站设计——简单通用文章博客后台系统(5页) HTML+CSS+JavaScriptweb网页设计与开发
01-03 1053
HTML5期末大作业：博客后台系统网站设计——简单通用文章博客后台系统(5页) HTML+CSS+JavaScriptweb网页设计与开发 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值