Slog41_支配vue框架初階項目之博客網站-單頁-登錄成功頁面的佈局和定位
-
ArthurSlogcss
-
SLog-41html
-
Year·1vue
-
Guangzhou·Chinacss3
-
Aug 18th 2018git
-
GitHubgithub
-
掘金主頁web
-
簡書主頁npm
-
segmentfaultsegmentfault
履霜堅冰至瀏覽器
開發環境MacOS(High Sierra 10.13.5)
須要的信息和信息源：
開始編碼
-
本篇使用 Sass樣式預編譯器，編寫 sass 文件生成 css文件，佈置登錄成功後頁面的樣式
-
參考Sass官網使用文檔，安裝完 Sass編譯程序以後，轉換過程使用一下命令
sass xxx.scss xxx.css
- 根據 Sass官網的使用手冊
client/css/style.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #ff0000;
body {
font: 100% $font-stack;
color: $primary-color;
}
#signup-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#signinResult {
display: flex;
flex-direction: column;
}
#signinResult > div {
background-color: #f1f1f1;
width: 300px;
margin: 5px;
text-align: left;
line-height: 50px;
}
複製代碼
-
上面的代碼參考 w3schools 的 css文檔手冊，咱們使用 Flexbox 屬性來定位和佈局
-
其中新增的代碼以下
#signinResult {
display: flex;
flex-direction: column;
}
#signinResult > div {
background-color: #f1f1f1;
width: 300px;
margin: 5px;
text-align: left;
line-height: 50px;
}
複製代碼
- 如今，切換到 css 文件夾路徑下
cd client/css/
-
如今，咱們要使用 Sass預編譯器（其實就是一段代碼，一個程序），來把 sass 文件轉換爲 css 文件
-
根據 Sass官網的使用說明,"sass sass文件名 css文件名"
sass style.scss style.css
- 如今，scss 文件就轉換爲 css 文件了，轉換的結果以下：
client/css/style.css
body {
font: 100% Helvetica, sans-serif;
color: #ff0000;
}
#signup-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#signinResult {
display: flex;
flex-direction: column;
}
#signinResult > div {
background-color: #f1f1f1;
width: 300px;
margin: 5px;
text-align: left;
line-height: 50px;
}
/*# sourceMappingURL=style.css.map */
複製代碼
- 同時，須要調整一下 html 文件，把須要調整樣式的部分，用 id 屬性進行關聯
client/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="登錄">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="12345678@qq.com">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成註冊">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
複製代碼
-
如今，打開瀏覽器，輸入 127.0.0.1:3000/app.html，點擊 signin 按鈕
-
輸入帳號：ArthurSlog 密碼：ArthurSlog，點擊登錄，正常執行下，數據都居中並帶有背景色塊
-
至此，咱們對 登錄成功的頁面 進行了佈局和定位。
歡迎關注個人微信公衆號 ArthurSlog
若是你喜歡個人文章 歡迎點贊 留言
謝謝
相關文章
- 1. Slog42_支配vue框架初階項目之博客網站-單頁-默認頭像的佈局和定位
- 2. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 3. 支配vue框架初階項目之博客網站-登錄功能
- 4. 支配vue框架初階項目之博客網站-註冊功能
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog37_支配vue框架初階項目之博客網站-註冊頁面-合併首頁、登錄和註冊頁面
- 7. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 8. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 9. Slog43_支配vue框架初階項目之博客網站-單頁-載入要上傳的圖片
- 10. Slog34_支配vue框架初階項目之博客網站-註冊頁面-先後端的數據交互
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Slog42_支配vue框架初階項目之博客網站-單頁-默認頭像的佈局和定位
- 2. Slog36_支配vue框架初階項目之博客網站-註冊頁面-合併登錄和註冊頁面
- 3. 支配vue框架初階項目之博客網站-登錄功能
- 4. 支配vue框架初階項目之博客網站-註冊功能
- 5. Slog29_支配vue框架初階項目之博客網站-註冊頁面-單選按鈕
- 6. Slog37_支配vue框架初階項目之博客網站-註冊頁面-合併首頁、登錄和註冊頁面
- 7. Slog50_支配vue框架初階項目之博客網站-單頁-客戶端（瀏覽器）更新頭像2
- 8. Slog30_支配vue框架初階項目之博客網站-註冊頁面-選擇框
- 9. Slog43_支配vue框架初階項目之博客網站-單頁-載入要上傳的圖片
- 10. Slog34_支配vue框架初階項目之博客網站-註冊頁面-先後端的數據交互