HTML+CSS实现小米账号注册界面

HTML+CSS实现小米账号注册界面
话不多说，先上图：

HTML部分源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="login.css"><title>小米账号-注册</title>
</head><body><!-- 首部部分 start--><div class="top"><a href="index.html" class="title"></a><h4>注册小米账号</h4><div class="middle"><form enctype="multipart/form-data"><div style="width:500px;float:left;margin:0 20px;"><br /><span class="p">*</span><label for="username" class="l">用户名:</label><div style="position:relative;display:inline;"><input id="username" type="text" style="height:30px;width:250px;padding-right:50px;"></div><br /><br /><span class="p">*</span><label for="phonenumber" class="l">手机号:</label><div class="d"><input id="phonenumber" type="text" class="i"></div><br /><br /><span class="c">*</span><label for="login_password" class="l">登录密码:</label><div class="d"><input id="login_password" type="text" class="i"></div><br /><br /><span class="c">*</span><label for="confirm_password" class="l">确认密码:</label><div class="d"><input id="confirm_password" type="text" class="i"></div><br /><br /><span class="p">*</span><label for="ver_code" class="l">验证码:</label><div class="d"><input id="ver_code" type="text" class="i"></div><br /><br /><input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" /><span style="font-size:10px;">我已阅读并同意《用户注册协议》</span><br /><br /><input type="submit" value="同意以上协议并注册"style="margin-left:100px;height:30px;width:300px;background-color:#FF6700;display:inline-block; border:none;color:white;font-size: 14px;" /></div></form></div></div><!-- 首部部分 end --><!-- 尾部部分 start --><div class="footer"><ul><li><a href="#">简体</a><span>|</span></li><li><a href="#">繁体</a><span>|</span></li><li><a href="#">English</a><span>|</span></li><li><a href="#">常见问题</a><span>|</span></li><li><a href="#">隐私政策</a></li></ul></div><!-- 尾部部分 end -->
</body></html>

CSS部分源代码如下：

*{margin: 0;padding: 0;
}
a{text-decoration: none;
}
li{list-style: none;
}
body{background-color: #F9F9F9;
}
.top{width: 786px;height: 520px;background-color: white;margin: 0 auto;padding: 0 34px 30px 34px;
}
.title{display: block;width: 55px;height: 55px;background-image: url(images/mi-logo.png);background-color: #FF6700;background-position: 50%;margin: 0 auto;margin-bottom: 40px;
}
.top h4{display: block;color: #333;width: 786px;height: 45px;line-height: 45px;font-size: 30px;font-weight: normal;text-align: center;
}
.middle{margin: 0 0 0 130px;color: #757575;
}
.middle input{border:1px solid #757575;
}
.p{color:red;margin-left:20px;display:inline-block;
}
.c{color:red;margin-left:4px;display:inline-block;
}
.l{font-size:18px;
}
.d{display:inline;
}
.i{height:30px;width:300px;
}
.footer{display: block;height: 30px;margin: 100px 0 0 600px;}
.footer li{float: left;
}
.footer li a ,
.footer li span {color: #757575;font-size: 14px;
}
.footer li a{display: inline-block;height: 19px;padding: 0 10px;text-align: center;
}
.footer li a:hover{color: #FF6700;
}

HTML+CSS实现小米账号注册界面相关推荐

winform做的单机登录界面和账号注册界面
代码: public partial class LoginForm : DevExpress.XtraEditors.XtraForm{public LoginForm(){Logger.Recor ...
HTML+CSS+JS 实现登录注册界面
文章目录案例一滑动样式案例二滑动样式案例三动态样式案例四普通样式案例五滑动样式案例六普通样式具体怎么获取呢? 案例一滑动样式 login.html <!DOCTYPE ...
java 百度账号注册界面_基于百度AI开放平台的人脸识别的注册登录(1)
百度ai开放平台首页 2.选择产品服务,人脸与人体识别,人脸识别选项.打开后如图所示人脸识别 3.点击立即使用 3.jpg 4.点击创捷应用创建应用这一页大家按自己需求填写即可 5.创建完成后点 ...
java 百度账号注册界面_基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)...
人脸注册.人脸搜索使用百度AI接口.不支持H5活体检测(需要活体检测请参考百度AI-H5活体检测) 只是为了演示.所以是IP.最好用火狐浏览器访问.谷歌提示异常作者就不专门修改了.大家可以直接下载源码 ...
CSS编写静态网易注册界面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【Web】HTML 账号注册页面
使用CSS的选择器功能美化账号注册界面 HTML代码 <!doctype html> <html> <head> <title>sign in</ ...
C#窗体程序连接SQL Server数据库实现账号登录、账号注册、修改密码、账号注销和实名认证(不定时更新)
目录一.配置数据库文件和程序代码二.配置C#窗体控件布局和源代码 1.窗体Form1:账号登录界面 2.窗体Form2:账号注册界面 3.窗体Form3:主界面 4.窗体Form4:修改密码界面 ...
C#窗体程序通过泛型List实现账号登录、账号注册、账号注销、修改密码（不定时更新）
文章目录一.配置窗体控件布局和源代码 1.窗体Form2:账号注册界面 2.窗体Form1:账号登录界面 3.窗体Form3:主界面 4.窗体Form4:修改密码界面 5.窗体Form5:账号注销界 ...
基于boostrap的登录注册界面制作（html+css）
这里写自定义目录标题基于boostrap的登录界面制作 1. 安装bootstrap以及fontawesome环境 2. 表单设计 3. CSS样式基于boostrap的登录界面制作 1. 安装b ...
php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...

HTML+CSS实现小米账号注册界面

HTML+CSS实现小米账号注册界面相关推荐

最新文章

热门文章