效果图
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>注册</title><style>*{margin:0px;padding: 0px;}.input{padding: 5px;height: 38px;box-sizing: border-box;width: 400px;margin: 2px;}span{display:inline-block;height:35px;width: 70px;text-align:right;}input[type="button"]{height: 35px;width: 120px;padding: 2px 5px; box-sizing: border-box;}.col{margin: 10px;}.col4{margin:10px 80px;}.col3>input[type="text"]{width: 275px;}.submit{height:45px;width: 400px;color:white;background:rgb(91, 113, 241);font-family: "黑体";font-size: 18px;margin-left:80px;}a{text-decoration: none;}</style></head><body><div class="contrain"><div class="col"><span>用户:</span><input type="text" name="" id="" class="input" placeholder=" 请设置用户名"></div><div class="col"><span>手机号:</span><input type="text" class="input" id="telephone" placeholder="可用于登录及找回密码"></div><div class="col"><span>密码:</span><input type="text" name="" id="password" class="input" placeholder="请设置登录密码"></div><div class="col3 col"><span>验证码:</span><input type="text" name="" id="password_id" class="input" placeholder="请输入验证码"><input type="button" value="获取短信验证码" class="button" id="getId"></div><div class="col4"><input type="checkbox" name="" id="" class="right"><span style="display:inline;">阅读并接受<a href="#" id="one">《百度用户条例》</a>和<a href="#" id="two">《百度隐私保护声明》</a></span></div><div ><button id="submit" class="submit">注册</button></div></div></body></html>
成果图：
![[06月]追寻绿野仙踪：700字读后感与作文素材全览](https://700zi.400zi.cn/uploadfile/img/2024/06/10/ed98ed243a84d49aa68b769bfdaaf695.jpg)
