短信登录区域部分实现
1. 最终的实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b6195167fb36e068d76eda08f8d78e97.png)
2. 分块实现
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/083dc512c87dac34b47926dceb7eda4b.png)
- 该区域要分成一大块和5小块注册
- 首先这5个小块是在大块之中包裹着
- 第一小块是:上方的提示性文字(请认真阅读协议…)
- 第二小块是:手机号输入区域(input输入框区域)
- 第三小块是:输入验证码的区域(input验证码输入区域)
- 第四小块是:登录豆瓣的按钮区域(input登录按钮区域)
- 第五小块是:下方的提示性文字(收不到验证码)
3.代码展示
3.1 短信区域中所有的html
<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="">
</div>
</div>
<div class="mes-inp-security-code">
<form>
<input type="text" placeholder=&