猫眼APP登录页静态界面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/public.css"><link rel="stylesheet" href="./CSS/login.css"><script src="./JS/auto-size.js"></script>
</head><body><!-- div1 --><div class="top"></div><!-- 顶部 --><header class="login_reg"><div><a href="javascript:history.go(-1)"><img src="./IMG/fanhuijiantou.gif" alt="返回箭头"></a><p>登录</p></div><p><a href="#21">忘记密码</a></p></header><!-- 包含logo部分 --><!-- div2 --><div><div><img src="./IMG/maotou.png" alt="猫眼"></div><a href="#34">美团账号登录</a></div><form action="#" method="POST"><!-- 上输入 --><div><label for="account">用户名：</label><input type="text" id="account" placeholder="邮箱/手机号/用户名" required></div><!-- 下输入 --><div><label for="pas">密&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="pas" placeholder="密码" required></div></form><!-- div3 --><div><a href="./reying.html">登录</a><div><a href="./regist.html">立即注册</a><a href="#24">手机号快捷登录&nbsp;></a></div></div><!-- div4 --><div><div><span>......................</span><p>第三方账号登录</p><span>......................</span></div><div><figure><img src="./IMG/weixin.gif" alt="微信"><figcaption>微信</figcaption></figure><figure><img src="./IMG/QQ.gif" alt="QQ"><figcaption>QQ</figcaption></figure><figure><img src="./IMG/weibo.gif" alt="微博"><figcaption>微博</figcaption></figure><figure><img src="./IMG/baidu.gif" alt="百度"><figcaption>百度</figcaption></figure></div></div><div class="bottom"></div>
</body></html>

@mixin f_ce_ce {display: flex;justify-content: center;align-items: center;
}
@mixin  f_be_ce {display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
body {>div:nth-of-type(2) {margin-top: 2.24rem;height: 4.3rem;box-sizing: border-box;padding: 0.72rem 0.38rem 0.35rem;background-color: #f5f5f5;>div {@include f_ce_ce;height: 1.95rem;width: 1.95rem;margin: 0 auto;box-sizing: border-box;border: 7px solid #e7e7e7;border-radius: 50%;margin-bottom: 0.8rem;>img {height: 1.77rem;width: 1.77rem;}}>a {color: #989898;}}>form {background-color: white;height: 3rem;box-sizing: border-box;border-top: 2px #e4e4e4 solid;border-bottom: 2px #e4e4e4 solid;padding-left: 0.45rem;font-size: 0.47rem;>div {height: 1.5rem;box-sizing: border-box;padding: 0.5rem 0;margin-right: 0.45rem;@include f_be_ce;>label {line-height: 1;display: inline-block;width: 2rem;}>input {flex: 1;font-size: 0.47rem;border: 0;&::-webkit-input-placeholder {color: #cbcbcb;}&:focus {outline: none;}}}>div:nth-of-type(1) {border-bottom: 2px #e4e4e4 solid;}}>div:nth-of-type(3) {padding: 0.6rem 0.45rem 1.07rem;>a {text-align: center;line-height: 1.35rem;display: inline-block;width: 100%;height: 1.35rem;background-color: #f14e40;box-sizing: border-box;border-radius: 20px;font-size: 0.45rem;color: white;}>div {margin-top: 0.45rem;@include f_be_ce;>a {color: #f14e40;font-size: 0.38rem;}}}  >div:nth-of-type(4) {font-size: 0.48rem;width: 9.3rem;margin: 0 auto;margin-top: 1rem;margin-bottom: 2.6rem;>div:nth-of-type(1) {@include f_ce_ce;color: #969696;>span {line-height: 1;margin-top: -0.25rem;;}p {flex: 1;text-align: center;}}>div:nth-of-type(2) {@include f_be_ce;width: 7.5rem;margin: 0 auto;margin-top: 0.6rem;>figure {>img {width:  1.2rem;height: 1.2rem;}>figcaption {padding-top: 0.36rem;text-align: center;font-size: 0.44rem;}}}}
}

猫眼APP登录页静态界面相关推荐

猫眼APP选座静态界面布局
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
UI培训教程分享：APP启动页UI界面设计
本期为大家分享的ui培训教程是关于APP启动页面的UI设计方面,作为一名合格的UI设计师,APP产品的启动页是需要会的,下面就来看看详细的教程吧. UI培训教程分享:APP启动页UI界面设计启动页面 ...
UI素材模板|App搜索页UI界面设计版式
无论是在app还是在web端,搜索都是一个发现内容的重要方式.与web端不同,app上的搜索功能在设计方面有自己独特的展现方式. 下面就看看这些App搜索页UI界面设计吧. 工作搜索App免费UI ...
java登录页-视图界面_地图界面-Java集合
java登录页-视图界面 A Map stores data in key and value association. Both key and values are objects. The ke ...
精致的App登录页设计欣赏给你灵感
很多新手设计登录/注册页的时候,更多是站在视觉角度考量,尝试各种的风格诸如极简.拟物.微质感等,而忽视了用户体验设计. 设计没思路,那么就需要从这几个方面着手: 了解产品的背景,产品未来发展方向. ...
6.1添加首页和登录页静态模版
把css,js和图片等放到根目录下static文件夹里.index.html和login.html放到templates文件夹里. 把静态文件中的 ../ 全部替换成 /static/ 修改配置文件, ...
Thinkphp5乐兔CRM之Mockplus 原型设计的登录页
2019独角兽企业重金招聘Python工程师标准>>> 这次的CRM客户关系销售管理系统项目没有选择用Axure来做原型,而是用Mockplus来设计.登录页的界面很简单,只有手机号 ...
Axure教程：一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博.微信.QQ.支付宝登录页面,注册页面,用户协议和隐私条款.该原型使用简单,交互完善 ...
怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面发布时间:2020-12-02 17:09:10 来源:亿速云阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...

猫眼APP登录页静态界面

猫眼APP登录页静态界面相关推荐

最新文章

热门文章