本日的这个手机登录界面,利用了rem作为单位,自定义了字体,利用了模糊背景,半透明上岸框。
效果是

我们先来看下效果图:

一、准备事情:

1、目录大略先容下

images 放图片

html编程手机网页前端教程CSS写个精巧的手机登录页面 Webpack

fonts 字体、字体图标

css 样式表文件

base.css 根本样式

login.css login界面样式

image

js javascript文件

flexible.js rem转换px文件

login.js login页面的其他js

login.html 登录页面

2、base.css文件:我们在 base.css 中定义字体、边距、添补等,这里只指出一些关键点,想要源码的话可以关注我们,然后再私信我们,我们会发给您。

① 通过效果图,我们可以看到,placeholder提示笔墨是白色,以是在这里须要变动下:

input::-webkit-input-placeholder{color:#fff;}

② 定义字体,这里只用了ttf,由于手机下大部分都是webkit内核,webkit内核是支持ttf格式的字体的。

@font-face { font-family: 'PingFangSC-Regular'; src: url('../fonts/PingFangSC-Regular.ttf'); font-weight: normal; font-style: normal;}

③ 初始化字体大小,字体类型等

body,input{font-size: .26rem;font-family:'PingFangSC-Regular';color:#fff;}

注:1、其他的边距、浮动、flex等,就不在这里写了,源码里面的base.css文件写的很清楚

2、rem单位,后面会有阐明

3、由于有 flexible.js ,这里的html设置的字体大小无需我们设置。

3、flexible.js 文件可以将rem转换成px,自动设置html的字体大小,这样rem的值就会被浏览器根据html的字体大小实时解析成px,以适应不同分辨率的手机。
我们须要做两步:

① 在头部引入 flexible.js,让它一上来就实行:

<script type=\公众text/javascript\"大众 src=\"大众./js/flexible.js\"大众></script>

② 打开 flexible.js,找到末了一行,将两个传参改成设计稿的宽度,我这里设计稿是720,以是,修正如下:

;(function(designWidth, maxWidth) {...})(720, 720);

那么,在量出设计稿的像素值,在css中,除以100,便是rem。

4、新建login.html,放在根目录,在header头部加入下面的代码,让页面宽度即是手机宽度,并且禁止缩放:

<meta name=\"大众viewport\"大众 content=\"大众maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width\"大众 />

5、在login.html的header加入下面的代码,禁止手机将页面中的号码格式化,否则影响都雅:

<meta name=\"大众format-detection\"大众 content=\"大众telephone=no,email=no,date=no,address=no\"大众>

6、引入干系css、js,这里不多说了。

至此,准备事情完成了,下面开始编写页面了。

二、高斯模糊的背景

背景高斯模糊,就不能直接设置到body上,否则body里面的内容都会高斯模糊,以是单独写个section,来设置

<section class=\公众bg\"大众></section>.bg{background:url(../images/bg.jpg) no-repeat center/cover;position: fixed;z-index: 1;top:0;left:0;right:0;bottom:0;filter:blur(15px);}

效果图如下:

出问题了,高斯模糊导致周边变淡,玩过PS的都知道这个问题。
我们只须要将背景容器放大点,超出body就行了,以是,修正后的css如下:

.bg{background:url(../images/bg.jpg) no-repeat center/cover;position: fixed;top:0;left:0;right:0;bottom:0;filter:blur(15px);transform:scale(1.1);}

效果图如下:

注:由于背景定位了,以是里面的内容都要定位并且z-index都要比它高。

三、整体居中

页面的内容高下居中,无论什么分辨率,内容始终在中间:

1、给body挂上 flex flex-middle,这个是在base里面定义好的flex样式

<body class=\公众flex flex-middle\公众>

2、既然要垂直居中,body的高度肯定要100%,html也要设置,否则,body的100%没浸染:

body,html{height: 100%;}.wrap{padding:0 .85rem;position: relative;z-index: 2;}

3、这个wrap便是居中容器,所有的内容都放里面:

<section class=\公众wrap\"大众></section>三、头部header

header比较大略,要把稳“Welcome”,有阴影,这里不能用盒子阴影box-shadow,而是用笔墨阴影text-shadow,它比box-shadow少个参数,即扩展。
根据UI,丈量的尺寸都除以100便是rem的值,如130px,这里就写1.3rem就可以了

.header h1{font-weight: normal;font-size: 1rem;text-shadow: 0 0 4px rgba(0,0,0,.5);text-align: center;}.header p{font-size: .22rem;text-align: center;line-height: 1.8}<header class=\"大众header\"大众> <h1>Welcome</h1> <p> Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus. </p></header>

效果如下

四、主体部分

这个紧张是头像、输入框和提交按钮,都比较大略,就不多说了。
边框

.avatar{width: 1.5rem;height: 1.5rem;display: block;margin: auto;border-radius: 999px;border:.5px solid #fff;box-shadow: 0 0 4px 0 rgba(0,0,0,.3);}.row {height:.85rem;line-height: .85rem;width: 100%;text-align: center;border-radius: 999px;box-shadow: 0 0 4px 0 rgba(0,0,0,.3);}.row .ipt{background: transparent;border:.5px solid #fff;}.row .submit{background:linear-gradient(to bottom,#25af61,#149c4f);border:0 none;display: block;border:.5px solid #33c773;}<section class=\"大众main mt110\"大众> <img class=\"大众avatar\公众 src=\公众./images/avatar.jpg\"大众> <section class=\"大众row mt25\公众> <input type=\"大众text\公众 class=\"大众ipt\公众 placeholder=\公众User Name\"大众> </section> <section class=\"大众row mt25\公众> <input type=\"大众password\"大众 class=\公众ipt\公众 placeholder=\"大众Password\"大众> </section> <section class=\"大众row mt25\"大众> <a href=\公众javascript:;\"大众 class=\公众submit\"大众>Login</a> </section></section>

六、版权

这个没什么好说的,居中,定位在底部

.copy{position: absolute;bottom: .2rem;left: 0;right: 0;z-index: 2;font-size: .23rem;}<footer class=\"大众copy tc mt40\"大众> © 2019 IT学堂</footer>

终极效果如下

想要源码的话可以关注我们,然后再私信我们,我们会发给您。
关注IT学堂,有更多干货哦!