web前端学习教程，html蓝色大气全屏登录页面开发

色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗？下午小编教你从无到有的敲代码敲出自己博客最重要的项目高薪就业轻松2倍。

项目源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>蓝色登录界面HTML代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
 
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
 
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
 
<body>
 
 <div class="limiter">
 <div class="container-login100" style="background-image: url('images/img-01.jpg');">
 <div class="wrap-login100 p-t-190 p-b-30">
 <form class="login100-form validate-form">
 <div class="login100-form-avatar">
 <img src="images/avatar-01.jpg" alt="AVATAR">
 </div>
 
 <span class="login100-form-title p-t-20 p-b-45">Hello</span>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
 <input class="input100" type="text" name="username" placeholder="用户名" autocomplete="off">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-user"></i>
 </span>
 </div>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
 <input class="input100" type="password" name="pass" placeholder="密码">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-lock"></i>
 </span>
 </div>
 
 <div class="container-login100-form-btn p-t-10">
 <button class="login100-form-btn">登 录</button>
 </div>
 
 <div class="text-center w-full p-t-25 p-b-230">
 <a href="#" class="txt1">忘记密码？</a>
 </div>
 
 <div class="text-center w-full">
 <a class="txt1" href="#">
 立即注册
 <i class="fa fa-long-arrow-right"></i>
 </a>
 </div>
 </form>
 </div>
 </div>
 </div>
 
 <script src="vendor/jquery/jquery-1.12.4.min.js"></script>
 <script src="js/main.js"></script>
 
</body>
</html>

代码运行效果截图

大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字找我领取 24小时在线！

段时间没写文章了，这段时间比较忙，很抱歉。

今天的这个手机登录界面，使用了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">
 © 2019 IT学堂
</footer>

最终效果如下

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

码地址：https://gitee.com/itsoft7/itbi-vue

一、实现目标

登录页面的实现
主界面的布局
导航菜单的实现

二、了解vue的目录结构

浅谈一下vue的目录结构，对vue小白用，大神请绕过。项目建立后，脚手架自动根据模板生成了文件目录结构，具体文件结构可以在网上可以搜索到，在这里就不再赘述了，我只针对重要的几个进行说明。

index.html : 是项目的入口，是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代，所以会一直保留。比如可以实现加载Loading...等
main.js：是项目的主程序，在这里很多功能要实现，实例化Vue、初始化及存储全局变量、项目用的组件引入、样式文件引入等。
app.vue:是项目的主组件，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。

三者之间的联系是什么？

从上图简单看出三者之间联系，同时也体现出来vue的单页面模式，何为单页面应用（SPA），通俗一点说就是指只有一个主页面的应用（核心：index.html,main.js,app.vue），浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在app.vue（<router-view/>）。开发的每个模块都是一个组件，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新组件资源，就是通常所说的不是全面页面刷新。单页面优缺点并存

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo。
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
初次加载时耗时多。
页面复杂度提高很多。

三、界面实现

登录界面

主界面

导航菜单

四、实现的技术点

1.样式表使用了scss : 项目采用的lang="scss"，后报错TypeError: this.getResolve is not a function at由于当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更换掉就行了，换成如下版本"sass-loader": "^7.3.1",

2.路由模式采用了“history”：这样去掉了url地址中#号，具体代码需要修改router文件夹的index .js。

采用这种模式时，发布部署的时候一定要需要nginx的配合，后面文章会专门讲。

3.图标使用svg格式：

第一步：下载 "svg-sprite-loader": "^6.0.7",

第二步：修改配置文件

第三步：参照源码

4.使用elementUI：这ui使用也比较简单，具体使用方法可以通过官网了解,同样先下载依赖，然后在main.js重要初始化加载。

/*ElementUI*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

其中element-ui/lib/theme-chalk/index.css 是默认样式表，可以在官网按照自己喜欢的风格生成样式表，下载下来后单独引用即可，在使用过程需要自定义修改样式的需要单独自己创建一个样式文件，在默认样式表下单独自定义样式表，自定义的样式这样就可以覆盖默认的了，不建议直接默认的样式表上去修改。

4.Layout：layout是布局容器,可以根据应用场景定义自己的布局，其结构是:

布局说明

定义好后layout后如何和视图页面进行关联？在路由文件进行配置

五、总结

该文章不是一个演示文章，代码也不是为了写文章而写，我是想通过实际的项目给大家进行分享，代码已经完全公开，会不断的持续更新。

目前正在研究在vue使用mxgraph画流程图，正在研究中......

在线咨询

上一篇：界面控件DevExpress WinForms HTML & CSS模板-轻松创建警报通知
下一篇：HTML中的图片区域链接方法详解-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商