03-短信登录区域部分实现(不包含国码区域)

最新推荐文章于 2024-09-04 23:15:16 发布

bdog

最新推荐文章于 2024-09-04 23:15:16 发布

阅读量196

点赞数

分类专栏： # 02-注册登录区域文章标签： html css

本文链接：https://blog.csdn.net/qq_40200966/article/details/124304187

版权

博客详细介绍了如何实现短信登录界面，分为五大块：提示文字、手机号输入、验证码输入、登录按钮和底部提示。提供了HTML代码展示。

摘要由CSDN通过智能技术生成

短信登录区域部分实现

1. 最终的实现效果

在这里插入图片描述

2. 分块实现

在这里插入图片描述

该区域要分成一大块和5小块注册
首先这5个小块是在大块之中包裹着
第一小块是：上方的提示性文字(请认真阅读协议…)
第二小块是：手机号输入区域（input输入框区域）
第三小块是：输入验证码的区域(input验证码输入区域)
第四小块是：登录豆瓣的按钮区域（input登录按钮区域）
第五小块是：下方的提示性文字（收不到验证码）

3.代码展示

3.1 短信区域中所有的html

<!-- 当点击短信登录的时候，显示下方的这个div，下方的div隐藏起来了 -->
<div class="mes ">
	<div class="mes-show">
		<!-- 上方的提示性文字 -->
		<div class="mes-tip-word">
			<span>请仔细阅读</span>
			<a href="">豆瓣使用协议、豆瓣个人信息保护政策</a>
		</div>
		
		<!-- 手机号输入区域 -->
		<div class="mes-inp-phone-num">
			<form>
				<input type="text" placeholder="手机号"/>
			</form>
			<div class="">
				<!-- <span>+86</span> -->
			</div>
		</div>
			
		<!-- 输入验证码的区域 -->
		<div class="mes-inp-security-code">
			<form>
				<input type="text" placeholder=&