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

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

項(xiàng)目源代碼：

<!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="請(qǐng)輸入用戶名">
 <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="請(qǐng)輸入密碼">
 <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="#">
 立即注冊(cè)
 <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>

代碼運(yùn)行效果截圖

大家需要這個(gè)項(xiàng)目css代碼，js，圖片做練習(xí)的可以找我免費(fèi)領(lǐng)取，如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個(gè)字找我領(lǐng)取 24小時(shí)在線！

段時(shí)間沒(méi)寫(xiě)文章了，這段時(shí)間比較忙，很抱歉。

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

我們先來(lái)看下效果圖：

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

1、目錄簡(jiǎn)單介紹下

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

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

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

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

② 定義字體，這里只用了ttf，因?yàn)槭謾C(jī)下大部分都是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、其他的邊距、浮動(dòng)、flex等，就不在這里寫(xiě)了，源碼里面的base.css文件寫(xiě)的很清楚

2、rem單位，后面會(huì)有解釋

3、由于有 flexible.js ，這里的html設(shè)置的字體大小無(wú)需我們?cè)O(shè)置。

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

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

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

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

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

那么，在量出設(shè)計(jì)稿的像素值，在css中，除以100，就是rem。

4、新建login.html，放在根目錄，在header頭部加入下面的代碼，讓頁(yè)面寬度等于手機(jī)寬度，并且禁止縮放：

<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加入下面的代碼，禁止手機(jī)將頁(yè)面中的號(hào)碼格式化，否則影響美觀：

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

6、引入相關(guān)css、js，這里不多說(shuō)了。

至此，準(zhǔn)備工作完成了，下面開(kāi)始編寫(xiě)頁(yè)面了。

二、高斯模糊的背景

背景高斯模糊，就不能直接設(shè)置到body上，否則body里面的內(nèi)容都會(huì)高斯模糊，所以單獨(dú)寫(xiě)個(gè)section，來(lái)設(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);
}

效果圖如下：

出問(wèn)題了，高斯模糊導(dǎo)致周邊變淡，玩過(guò)PS的都知道這個(gè)問(wèn)題。我們只需要將背景容器放大點(diǎn)，超出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);
}

效果圖如下：

注：因?yàn)楸尘岸ㄎ涣耍岳锩娴膬?nèi)容都要定位并且z-index都要比它高。

三、整體居中

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

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

<body class="flex flex-middle">

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

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

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

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

三、頭部header

header比較簡(jiǎn)單，要注意“Welcome”，有陰影，這里不能用盒子陰影box-shadow，而是用文字陰影text-shadow，它比box-shadow少個(gè)參數(shù)，即擴(kuò)展。根據(jù)UI，測(cè)量的尺寸都除以100就是rem的值，如130px，這里就寫(xiě)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>

效果如下

四、主體部分

這個(gè)主要是頭像、輸入框和提交按鈕，都比較簡(jiǎn)單，就不多說(shuō)了。邊框小編設(shè)置的粗細(xì)是0.5px，這里并不代表邊框粗細(xì)就是0.5px。因?yàn)楝F(xiàn)在手機(jī)大部分都是視網(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)

這個(gè)沒(méi)什么好說(shuō)的，居中，定位在底部

.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)注我們，然后再私信我們，我們會(huì)發(fā)給您。關(guān)注IT學(xué)堂，有更多干貨哦！

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

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

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

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

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

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

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

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

單頁(yè)面的優(yōu)點(diǎn)：

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

單頁(yè)面缺點(diǎn)：

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

三、界面實(shí)現(xiàn)

登錄界面

主界面

導(dǎo)航菜單

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

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

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

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

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

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

第二步：修改配置文件

第三步：參照源碼

4.使用elementUI：這ui使用也比較簡(jiǎn)單，具體使用方法可以通過(guò)官網(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)格生成樣式表，下載下來(lái)后單獨(dú)引用即可，在使用過(guò)程需要自定義修改樣式的需要單獨(dú)自己創(chuàng)建一個(gè)樣式文件，在默認(rèn)樣式表下單獨(dú)自定義樣式表，自定義的樣式這樣就可以覆蓋默認(rèn)的了，不建議直接默認(rèn)的樣式表上去修改。

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

布局說(shuō)明

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

五、總結(jié)

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

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

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商