web前端學(xué)習(xí)教程，html藍(lán)色大氣全屏登錄頁面開發(fā)

色大氣全屏背景通用登錄頁面html模板是一款適用于PC端和手機端的登錄界面模板、APP登錄界面模板?，F(xiàn)在就業(yè)非常重要的一個項目你準(zhǔn)備好了嗎？下午小編教你從無到有的敲代碼敲出自己博客最重要的項目高薪就業(yè)輕松2倍。

項目源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<title>藍(lán)色登錄界面HTML代碼</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--圖標(biāo)樣式-->
<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，圖片做練習(xí)的可以找我免費領(lǐng)取，如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個字找我領(lǐng)取 24小時在線！

段時間沒寫文章了，這段時間比較忙，很抱歉。

今天的這個手機登錄界面，使用了rem作為單位，自定義了字體，使用了模糊背景，半透明登陸框。效果是小編從網(wǎng)上看到的，就動手實現(xiàn)了下，分享給在座的諸位。小編才疏學(xué)淺，如果有什么不對或許要改進(jìn)的地方，還望各位不吝賜教。

我們先來看下效果圖：

一、準(zhǔn)備工作：

1、目錄簡單介紹下

images 放圖片
fonts 字體、字體圖標(biāo)
css 樣式表文件
base.css 基礎(chǔ)樣式
login.css login界面樣式
image
js javascript文件
flexible.js rem轉(zhuǎn)換px文件
login.js login頁面的其他js
login.html 登錄頁面

2、base.css文件：我們在 base.css 中定義字體、邊距、填充等，這里只指出一些關(guān)鍵點，想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。

① 通過效果圖，我們可以看到，placeholder提示文字是白色，所以在這里需要更改下：

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

② 定義字體，這里只用了ttf，因為手機下大部分都是webkit內(nèi)核，webkit內(nèi)核是支持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設(shè)置的字體大小無需我們設(shè)置。

3、flexible.js 文件可以將rem轉(zhuǎn)換成px，自動設(shè)置html的字體大小，這樣rem的值就會被瀏覽器根據(jù)html的字體大小實時解析成px，以適應(yīng)不同分辨率的手機。我們需要做兩步：

① 在頭部引入 flexible.js，讓它一上來就執(zhí)行：

<script type="text/javascript" src="./js/flexible.js"></script>

② 打開 flexible.js，找到最后一行，將兩個傳參改成設(shè)計稿的寬度，我這里設(shè)計稿是720，所以，修改如下：

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

那么，在量出設(shè)計稿的像素值，在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、引入相關(guān)css、js，這里不多說了。

至此，準(zhǔn)備工作完成了，下面開始編寫頁面了。

二、高斯模糊的背景

背景高斯模糊，就不能直接設(shè)置到body上，否則body里面的內(nèi)容都會高斯模糊，所以單獨寫個section，來設(shè)置

<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);
}

效果圖如下：

出問題了，高斯模糊導(dǎo)致周邊變淡，玩過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);
}

效果圖如下：

注：因為背景定位了，所以里面的內(nèi)容都要定位并且z-index都要比它高。

三、整體居中

頁面的內(nèi)容上下居中，無論什么分辨率，內(nèi)容始終在中間：

1、給body掛上 flex flex-middle，這個是在base里面定義好的flex樣式

<body class="flex flex-middle">

2、既然要垂直居中，body的高度肯定要100%，html也要設(shè)置，否則，body的100%沒作用：

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

3、這個wrap就是居中容器，所有的內(nèi)容都放里面：

<section class="wrap"></section>

三、頭部header

header比較簡單，要注意“Welcome”，有陰影，這里不能用盒子陰影box-shadow，而是用文字陰影text-shadow，它比box-shadow少個參數(shù)，即擴展。根據(jù)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>

效果如下

四、主體部分

這個主要是頭像、輸入框和提交按鈕，都比較簡單，就不多說了。邊框小編設(shè)置的粗細(xì)是0.5px，這里并不代表邊框粗細(xì)就是0.5px。因為現(xiàn)在手機大部分都是視網(wǎng)膜屏，物理分辨率都是邏輯分辨率的2倍多，這里設(shè)置的0.5px是邏輯分辨率，轉(zhuǎn)換成物理像素大概就是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>

六、版權(quán)

這個沒什么好說的，居中，定位在底部

.copy{
	position: absolute;
	bottom: .2rem;
	left: 0;
	right: 0;
	z-index: 2;
	font-size: .23rem;
}
<footer class="copy tc mt40">
 ? 2019 IT學(xué)堂
</footer>

最終效果如下

想要源碼的話可以關(guān)注我們，然后再私信我們，我們會發(fā)給您。關(guān)注IT學(xué)堂，有更多干貨哦！

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

一、實現(xiàn)目標(biāo)

登錄頁面的實現(xiàn)
主界面的布局
導(dǎo)航菜單的實現(xiàn)

二、了解vue的目錄結(jié)構(gòu)

淺談一下vue的目錄結(jié)構(gòu)，對vue小白用，大神請繞過。項目建立后，腳手架自動根據(jù)模板生成了文件目錄結(jié)構(gòu)，具體文件結(jié)構(gòu)可以在網(wǎng)上可以搜索到，在這里就不再贅述了，我只針對重要的幾個進(jìn)行說明。

index.html : 是項目的入口，是隨后就被實例中的組件中的模板中的內(nèi)容所取代，所以我們會看到有那么一瞬間會顯示出index.html中正文的內(nèi)容。而index.html中的Title部分不會被取代，所以會一直保留。比如可以實現(xiàn)加載Loading...等
main.js：是項目的主程序，在這里很多功能要實現(xiàn)，實例化Vue、初始化及存儲全局變量、項目用的組件引入、樣式文件引入等。
app.vue:是項目的主組件，所有頁面都是在App.vue下進(jìn)行切換的。也是整個項目的關(guān)鍵，app.vue負(fù)責(zé)構(gòu)建定義及頁面組件歸集。

三者之間的聯(lián)系是什么？

從上圖簡單看出三者之間聯(lián)系，同時也體現(xiàn)出來vue的單頁面模式，何為單頁面應(yīng)用（SPA），通俗一點說就是指只有一個主頁面的應(yīng)用（核心：index.html,main.js,app.vue），瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在app.vue（<router-view/>）。開發(fā)的每個模塊都是一個組件，然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)，僅刷新組件資源，就是通常所說的不是全面頁面刷新。單頁面優(yōu)缺點并存

單頁面的優(yōu)點：

用戶體驗好，快，內(nèi)容的改變不需要重新加載整個頁面，基于這一點spa對服務(wù)器壓力較小。
前后端分離。
頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）。

單頁面缺點：

不利于seo。
導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實現(xiàn)前進(jìn)、后退。（由于是單頁面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）。
初次加載時耗時多。
頁面復(fù)雜度提高很多。

三、界面實現(xiàn)

登錄界面

主界面

導(dǎo)航菜單

四、實現(xiàn)的技術(shù)點

1.樣式表使用了scss : 項目采用的lang="scss"，后報錯TypeError: this.getResolve is not a function at由于當(dāng)前sass的版本太高，webpack編譯時出現(xiàn)了錯誤，這個時候只需要換成低版本的就行，下面說一下修改方法，很簡單，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更換掉就行了，換成如下版本"sass-loader": "^7.3.1",

2.路由模式采用了“history”：這樣去掉了url地址中#號，具體代碼需要修改router文件夾的index .js。

采用這種模式時，發(fā)布部署的時候一定要需要nginx的配合，后面文章會專門講。

3.圖標(biāo)使用svg格式：

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

第二步：修改配置文件

第三步：參照源碼

4.使用elementUI：這ui使用也比較簡單，具體使用方法可以通過官網(wǎng)了解,同樣先下載依賴，然后在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 是默認(rèn)樣式表，可以在官網(wǎng)按照自己喜歡的風(fēng)格生成樣式表，下載下來后單獨引用即可，在使用過程需要自定義修改樣式的需要單獨自己創(chuàng)建一個樣式文件，在默認(rèn)樣式表下單獨自定義樣式表，自定義的樣式這樣就可以覆蓋默認(rèn)的了，不建議直接默認(rèn)的樣式表上去修改。

4.Layout：layout是布局容器,可以根據(jù)應(yīng)用場景定義自己的布局，其結(jié)構(gòu)是:

布局說明

定義好后layout后如何和視圖頁面進(jìn)行關(guān)聯(lián)？在路由文件進(jìn)行配置

五、總結(jié)

該文章不是一個演示文章，代碼也不是為了寫文章而寫，我是想通過實際的項目給大家進(jìn)行分享，代碼已經(jīng)完全公開，會不斷的持續(xù)更新。

目前正在研究在vue使用mxgraph畫流程圖，正在研究中......

在線咨詢

上一篇：界面控件DevExpress WinForms HTML & CSS模板-輕松創(chuàng)建警報通知
下一篇：HTML中的圖片區(qū)域鏈接方法詳解-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

web前端學(xué)習(xí)教程，html藍(lán)色大氣全屏登錄頁面開發(fā)

項目源代碼：

代碼運行效果截圖

一、準(zhǔn)備工作：

二、高斯模糊的背景

三、整體居中

三、頭部header

四、主體部分

一、實現(xiàn)目標(biāo)

二、了解vue的目錄結(jié)構(gòu)