整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
色大氣全屏背景通用登錄頁面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比較簡單，要注意“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的單頁面模式，何為單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用（核心：index.html,main.js,app.vue），瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在app.vue（<router-view/>）。開發的每個模塊都是一個組件，然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新組件資源，就是通常所說的不是全面頁面刷新。單頁面優缺點并存
登錄界面
主界面
導航菜單
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畫流程圖，正在研究中......
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
