当前位置：首页 > 文章列表 > 数据库 > MySQL > Slog41_支配vue框架初阶项目之博客网站-单页-登陆成功页面的布局和定位

Slog41_支配vue框架初阶项目之博客网站-单页-登陆成功页面的布局和定位

来源：SegmentFault 2023-02-16 15:21:56 0浏览收藏

有志者，事竟成！如果你在学习数据库，那么本文《Slog41_支配vue框架初阶项目之博客网站-单页-登陆成功页面的布局和定位》，就很适合你！文章讲解的知识点主要包括MySQL、vue.js、koa2，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

ArthurSlog
SLog-41
Year·1
Guangzhou·China
Aug 18th 2018

履霜坚冰至

开发环境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 */