首页 > 建站教程 > Div+Css >  CSS写个精美的手机登录页面正文

CSS写个精美的手机登录页面

有段时间没写文章了,这段时间比较忙,很抱歉。
今天的这个手机登录界面,使用了rem作为单位,自定义了字体,使用了模糊背景,半透明登陆框。效果是小编从网上看到的,就动手实现了下,分享给在座的诸位。小编才疏学浅,如果有什么不对或许要改进的地方,还望各位不吝赐教。

我们先来看下效果图:


一、准备工作:

1、目录简单介绍下
images 放图片
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>
效果如下


五、主体部分
这个主要是头像、输入框和提交按钮,都比较简单,就不多说了。边框小编设置的粗细是0.5px,这里并不代表边框粗细就是0.5px。因为现在手机大部分都是视网膜屏,物理分辨率都是逻辑分辨率的2倍多,这里设置的0.5px是逻辑分辨率,转换成物理像素大概就是1px。
.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">
    <a href="http://www.5imoban.net" target="_blank">我爱模板网</a>
</footer>
最终效果如下


您可以点击这里,查看在线效果。