• ArthurSlog

• SLog-42

• Year·1

• Guangzhou·China

• Aug 19th 2018

从业之路不同 机缘也不同 人生轨迹由机缘组成 想要有什么样的机缘 也就明白了自己要走的路

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

开始编码

• 本篇实现 登陆后，显示默认头像

• 参考，我们对 html 文件进行更新

client/app.html

    
        
        
                
    
        
             
             
             
         
    
    复制代码

• 其中更新的部分如下：

client/app.html

    
    
     
    
复制代码

• 首先给 img 上个 id 标记，标记为 "ArthurSlog_icon"，用于接下来样式的调整

• 接下来，切换到 client 文件夹路径下

cd client

• 建立一个新的文件夹 image，来存放图片文件

mkdir image

• 下载图片 到 image 文件夹下

• 现在，打开浏览器，输入 127.0.0.1:3000/app.html，点击 signin 按钮

• 输入账号：ArthurSlog 密码：ArthurSlog，点击登陆，正常执行下，默认图片会显示出来

• 接下来，我们需要来调整图片的 布局和定位

• 打开 scss 文件

clinet/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;}#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 的 ，我们使用 Flexbox 属性来定位和布局，另外参考，我们使用 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文件名 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;}#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

如果你喜欢我的文章 欢迎点赞 留言

谢谢