仿写-58同城注册页面（HTML+CSS）

本项目主要运用HTML和CSS语言（未使用js），仿写58同城的注册页面。

小练习非常适合初学者练习。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.fx58 {width: 100%;height: 100%;background-image: url(https://img.58cdn.com.cn/ui6/my/images/reg-bg.png);background-size: 100%;position: fixed;display: flex;justify-content: center;}.zhuti {width: 476px;height: 655px;}.topreturn {width: 476px;height: 44px;display: flex;align-items: center;justify-content: space-between;}.topreturn .fhsy {font-size: 12px;color: #ffffff;}.topreturn .yyzh {font-size: 12px;color: #ffffff;}.baise {width: 476px;height: 550px;background-color: #ffffff;padding-top: 62px;display: flex;justify-content: center;}.logo58 {display: flex;justify-content: center;margin-bottom: 38px;}.shuru {width: 350px;height: 40px;/* background-color: red; */display: flex;justify-content: space-between;align-items: center;border: 2px solid #EEEEEE;margin-top: 26px;}.shuru2 {width: 350px;height: 40px;/* background-color: red; */display: flex;justify-content: space-between;align-items: center;border: 2px solid #EEEEEE;margin-top: 15px;}input {margin-left: 18px;border: 0px;outline: none;}input::-webkit-input-placeholder {color: #D2D2D2;}button {width: 72px;height: 26px;margin-right: 10px;border: 0;color: #999999;font-size: 12px;border-radius: 4px;}.yhtishi{font-size: 12px;color: #CCCCCC;margin-top: 10px;}.xuanze{width: auto;height: 19.925px;margin-top: 25px;display: flex;justify-content: center;}.xzbut{width: 15px;height: 15px;border: 1px solid #CCCCCC;border-radius: 3px;}.xzbut:focus{background-image: url(https://img.58cdn.com.cn/git/teg-app-fe/passport-pc-ui/img/user-list-check.png);}.pt{font-size: 14px;color: #999999;}.ttp{font-size: 14px;color: red;}.down{width: 476px;height: 80px;display: flex;justify-content: space-around;align-items: center;}.downwz{font-size: 12px;color: #ffffff;}.queding{width: 350px;height: 40px;margin-top: 20px;background-color: #FF552E;color: #ffffff;}</style>
</head><body><div class="fx58"><div class="zhuti"><!-- 中间部分总体 --><div class="topreturn"><div class="fhsy">返回首页</div><div class="yyzh">已有账号？去登录</div></div><!-- 白色区域 --><div class="baise"><div class="basienei"><div class="logo58"><img src="    https://img.58cdn.com.cn/git/teg-app-fe/passport-pc/img/logo.png" alt=""></div><div class="shuru"><input type="text" placeholder="手机号"><button>获取动态码</button></div><div class="shuru"><input type="text" placeholder="动态码"></div><div class="shuru"><input type="text" placeholder="用户名"></div><div class="yhtishi">用户名：4-20个字符，支持汉字、字母、数字2种及以上组合</div><div class="shuru2"><input type="text" placeholder="设置密码"></div><div class="yhtishi">密码：8-16个非连续或重复的字符</div><div class="shuru2"><input type="text" placeholder="确认密码"></div>
<!-- 同意协议 --><div class="xuanze"><div class="xzbut" tabindex="1"></div><span class="pt">已阅读并同意</span><span class="ttp">《58同城使用协议》</span><span class="pt">&</span><span class="ttp">《隐私政策》</span></div><button class="queding">确定</button></div></div><div class="down"><div class="downwz">© 58.com</div><div class="downwz">联系客服</div><div class="downwz">帮助</div></div></div></div></body></html>

仿写-58同城注册页面（HTML+CSS）相关推荐

PC端品优购注册页面 resgister.css以及web服务器学习
注册页类名命名注册页面:register.html 注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化注册专区: registerarea 注册内容 reg-form 错误 ...
【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
java 注册成功跳转,写了个注册页面填了注册信息后点注册按钮居然不跳转，为什么？...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 JSP部分代码(包括判断注册信息是否填写完整的JS代码,在JSP代码的最后面) 会员登录 LOGIN 填写帐户信息 1 注册完成 2 *用户名: *设置密 ...
注册页面（CSS）效果图+代码
效果图代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
瞎几把写的QQ注册页面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>注册& ...
仿智联招聘注册页面输入框
原图效果实现效果代码首先来定义需要用到的自定义属性: <declare-styleable name="AnimatorLineEditText"><!-- ...
readfile读取串口数据_谈一谈使用字体库加密数据仿58同城
本文转载于 SegmentFault 社区作者:Aaron 对于前端同学来说其实做的更多的事情就是把数据整合好,按照UI同学的设计通过后端同学给的数据展示在网页中,这也就导致了很多人认为前端很简单, ...
使用HTML写一个完整的注册页面
在上一篇博客中,我简单地写了怎样通过使用HTML写一个简单的跳转登录页面,but,TMD太丑了,于是突发奇想+天马行空不如写一个完整注册页面和流程,呵呵,不废话直接上代码. 首先是第一个页面testl ...

仿写-58同城注册页面（HTML+CSS）

仿写-58同城注册页面（HTML+CSS）相关推荐

最新文章

热门文章