<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器,賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機號</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗證碼</label>
<input type="password" placeholder="請輸入驗證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述
碼地址:https://gitee.com/itsoft7/itbi-vue
淺談一下vue的目錄結(jié)構(gòu),對vue小白用,大神請繞過。項目建立后,腳手架自動根據(jù)模板生成了文件目錄結(jié)構(gòu),具體文件結(jié)構(gòu)可以在網(wǎng)上可以搜索到,在這里就不再贅述了,我只針對重要的幾個進行說明。
三者之間的聯(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)缺點并存
登錄界面
主界面
導(dǎo)航菜單
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后如何和視圖頁面進行關(guān)聯(lián)?在路由文件進行配置
該文章不是一個演示文章,代碼也不是為了寫文章而寫,我是想通過實際的項目給大家進行分享,代碼已經(jīng)完全公開,會不斷的持續(xù)更新。
目前正在研究在vue使用mxgraph畫流程圖,正在研究中......
介紹
前面我們以及學(xué)會了Bootstrap框架和jQuery庫的基本使用方法,并且已經(jīng)把這兩個軟件包整合到了我們的TFPHP框架里面,接下來我們就可以使用它們?nèi)ブ谱饔脩艄芾硐到y(tǒng)的視圖模板了。
用戶管理系統(tǒng)包含幾個主頁模板:
1)用戶信息表
2)用戶登錄頁面
3)用戶注冊頁面
4)個人資料修改
5)登錄密碼重置
6)用戶頭像上傳
7)安全問題設(shè)置
8)綁定郵箱設(shè)置
9)忘記密碼頁面
頁面比較多,我們一點點地設(shè)計。萬事開頭難,福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。
HTML
登錄頁面的html部分包括一個頁頭和一個表單。
<div class="wrapper">
<div class="wrapper-header">
<!-- top bar begin -->
<div class="row topbar">
<div class="navbar navbar-text">
TFUMS v1.0 - TONGFU.net
</div>
<ul class="nav ml-md-auto">
<li class="nav-item"><a href="" class="nav-link">首頁</a></li>
<li class="nav-item"><a href="" class="nav-link">登錄</a></li>
<li class="nav-item"><a href="" class="nav-link">注冊</a></li>
</ul>
</div>
<!-- top bar end -->
</div>
<div class="wrapper-content">
<!-- login form begin -->
<div class="row login-form">
<div class="col-sm-12">
<h3 class="text-center">登錄</h3>
<p>請輸入正確的用戶名和密碼登錄用戶管理系統(tǒng)</p>
<form>
<div class="form-group">
<label>用戶名</label>
<input class="form-control" type="text" name="user" />
</div>
<div class="form-group">
<label>密碼</label>
<input class="form-control" type="password" name="pass" />
</div>
<div class="form-group overflow-hidden">
<label class="float-left">
<input type="checkbox" name="remember" value="Y" />
保存登錄狀態(tài)
</label>
<a href="" class="float-right">忘記密碼</a>
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm form-control">登錄</button>
</div>
</form>
</div>
</div>
<!-- login form end -->
</div>
<div class="wrapper-footer">
</div>
</div>
CSS
用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。
/**
* top bar
*/
.topbar{
padding: 0 12px;
margin-bottom: 12px;
border-bottom: 1px solid #eee;
}
.topbar a{
color: #333;
}
.topbar a:hover{
color: #007bff;
}
/**
* login form
*/
.login-form{
margin: 0 auto;
width: 350px;
}
用戶登錄頁面
首先,因為這是TFUMS系統(tǒng)的第一個模板,所以福哥先設(shè)計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式,簡化了自己寫CSS的工作。
其次,表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式,加上label和form-control簡簡單單就把一個漂亮的表單做出來了。
還有福哥使用浮動加清除實現(xiàn)了“保存登錄狀態(tài)”和“忘記密碼”的左右布局設(shè)計。
最后,福哥給button增加了form-control樣式,使按鈕撐滿了整個容器,看起來比較工整了。
今天我們完成了第一個表單頁面的模板,包括:HTML和CSS部分。有了這個基礎(chǔ)之后,再去制作其他表單頁面就容易多了。
下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。
https://m.tongfu.net/home/35/blog/512901.html
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。