Slog42_支配vue框架初階項目之博客網站-單頁-默認頭像的佈局和定位

時間  2019-12-06
標籤 slog42 slog 支配 vue 框架 項目 博客 網站 單頁 默認 頭像 佈局 定位 欄目 網站開發 简体版
原文   原文鏈接
  • ArthurSlog
  • SLog-42
  • Year·1
  • Guangzhou·China
  • Aug 19th 2018

從業之路不一樣 機緣也不一樣 人生軌跡由機緣組成 想要有什麼樣的機緣 也就明白了本身要走的路css

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

開始編碼

  • 本篇實現 登錄後，顯示默認頭像
  • 參考HTML Demo: <img>，咱們對 html 文件進行更新

client/app.htmlhtml

<!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>
                <img id="ArthurSlog_icon" src="/image/ArthurSlog.png" alt="ArthurSlog_icon" />
            </div>
            <div id="signinResult">
                <div v-for="(value, key) in commits">
                    {{ key }}: {{ value }}
                </div>
            </div>
        </template>
    </div>
    <script src="./js/signup.js"></script>
</body>

</html>
  • 其中更新的部分以下：

client/app.htmlvue

<div>
    <img id="ArthurSlog_icon" src="/image/ArthurSlog.png" alt="ArthurSlog_icon" />
</div>
  • 首先給 img 上個 id 標記，標記爲 "ArthurSlog_icon"，用於接下來樣式的調整
  • 接下來，切換到 client 文件夾路徑下
cd client
  • 創建一個新的文件夾 image，來存放圖片文件
mkdir image
  • 下載圖片 ArthurSlog.png 到 image 文件夾下
  • 如今，打開瀏覽器，輸入 127.0.0.1:3000/app.html，點擊 signin 按鈕
  • 輸入帳號：ArthurSlog 密碼：ArthurSlog，點擊登錄，正常執行下，默認圖片會顯示出來
  • 接下來，咱們須要來調整圖片的 佈局和定位
  • 打開 scss 文件

clinet/css/style.scsscss3

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

#ArthurSlog_icon {
  object-position: 50% 50%;
  width: 300px;
  object-fit: contain;
  border: 1px solid rgb(171, 255, 216);
  border-radius: 30px;
  background-color: silver;
}
  • 上面的代碼參考 w3schools 的 css文檔手冊，咱們使用 Flexbox 屬性來定位和佈局，另外參考CSS Demo: object-position，咱們使用 object-position 屬性來讓圖片居中
  • 其中新增的代碼以下
#ArthurSlog_icon {
  object-position: 50% 50%;
  width: 300px;
  object-fit: contain;
  border: 1px solid rgb(171, 255, 216);
  border-radius: 30px;
  background-color: silver;
}
  • 如今，切換到 css 文件夾路徑下
cd client/css/
  • 如今，咱們要使用 Sass預編譯器（其實就是一段代碼，一個程序），來把 sass 文件轉換爲 css 文件
  • 根據 Sass官網的使用說明,"sass sass文件名 css文件名"
sass style.scss style.css
  • 如今，scss 文件就轉換爲 css 文件了，轉換的結果以下：

client/css/style.cssgit

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

#ArthurSlog_icon {
  object-position: 50% 50%;
  width: 300px;
  object-fit: contain;
  border: 1px solid #abffd8;
  border-radius: 30px;
  background-color: silver;
}

/*# sourceMappingURL=style.css.map */
  • 如今，打開瀏覽器，輸入 127.0.0.1:3000/app.html，點擊 signin 按鈕
  • 輸入帳號：ArthurSlog 密碼：ArthurSlog，點擊登錄，正常執行下，默認圖片會顯示出來，並居中顯示
  • 至此，咱們對 默認頭像 進行了佈局和定位。

歡迎關注個人微信公衆號 ArthurSlog

ArthurSlog

若是你喜歡個人文章 歡迎點贊 留言

謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程