<S-Blog> 前台登录模块界面设计

现在，大部分的网站都支持游客角色，比如淘宝，可以在不登录的情况下浏览网站，但是，想要使用网站提供的功能时，就必须先登录。

对于S-Blog来说，用户应该都是受信任的亲友团，不存在游客一说。所以，在V1.0版本S-Blog前台登录模块，使用先登录后使用的方式。

S-Blog的页面布局将采用Flex布局，这里有几篇不错的教程。

下面将制作一个登录界面的demo。

首先，来看一下最终效果（该效果参照：https://codepen.io/tezjnr/pen/wWvVVB 实现）

图1 login form

这是一个典型的居中布局。整体占据浏览器的所有内容区域。中间的form块位于屏幕的正中间。下面将使用flex布局一步一步将上面的界面搞出来。

首先，先把整体的框架搭起来。通过分析，不难发现，整个页面只有一个form块，在创建整体框架前，我们先忽略form块内部的内容，先把大的居中的form块给搞出来。

图2 html+css代码

图3 呈现效果

注意图2中的css代码中，将html的weight和height都设置成了100%，这代表html占据浏览器的全部内容区域，如果不这样设置，那么，html元素的宽高将由其子元素的宽高所撑开，会造成form块无法居中。

图3反应了图2中代码的执行效果，可以看到，大致的框架已经出现了，一个完全居中的色块。接下来，我们将把这个色块改造成图1的样子。

经过分析，我们可以将图1中form块内的内容也分为两大块内容 logo块和 form块，如下。

图4 form块分组

根据flex布局的定义，我们将代码修改如下：

图5 添加logo和login-item

图6 图5代码呈现效果

从图6可以看到，已经基本和图1中的布局一样了，现在，我们只需要填充图4中的form块的内容即可。

最后，再经过分析，我们将图4中分form块再做细分，如下：

图7 form块细分

从图7可以看到，我们将一个form块拆分成3个form field。我们将代码修改如下：

图8 添加表单内容以及样式

注意，form-field也需要设置成flex容器，其他都是基本的属性设置。

最后，我们再添加一点效果，css代码如下：

图9 特效css代码

完成了所有的代码后，就可以看到图1的效果了。

现在看到的代码是静态网页，在真正动手用angular实现时，需要按照angular的规则来将静态网页模板导入到angular项目中，具体的实现在以后angular实现时再细讲。

最后编辑于：2018.03.18 22:45:12