現(xiàn)在，大部分的網(wǎng)站都支持游客角色，比如淘寶，可以在不登錄的情況下瀏覽網(wǎng)站，但是，想要使用網(wǎng)站提供的功能時，就必須先登錄。
對于S-Blog來說，用戶應該都是受信任的親友團，不存在游客一說。所以，在V1.0版本S-Blog前臺登錄模塊，使用先登錄后使用的方式。
S-Blog的頁面布局將采用Flex布局，這里有幾篇不錯的教程。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-examples
下面將制作一個登錄界面的demo。
首先，來看一下最終效果（該效果參照：https://codepen.io/tezjnr/pen/wWvVVB 實現(xiàn)）
這是一個典型的居中布局。整體占據(jù)瀏覽器的所有內容區(qū)域。中間的form塊位于屏幕的正中間。下面將使用flex布局一步一步將上面的界面搞出來。
首先，先把整體的框架搭起來。通過分析，不難發(fā)現(xiàn)，整個頁面只有一個form塊，在創(chuàng)建整體框架前，我們先忽略form塊內部的內容，先把大的居中的form塊給搞出來。
注意圖2中的css代碼中，將html的weight和height都設置成了100%，這代表html占據(jù)瀏覽器的全部內容區(qū)域，如果不這樣設置，那么，html元素的寬高將由其子元素的寬高所撐開，會造成form塊無法居中。
圖3反應了圖2中代碼的執(zhí)行效果，可以看到，大致的框架已經出現(xiàn)了，一個完全居中的色塊。接下來，我們將把這個色塊改造成圖1的樣子。
經過分析，我們可以將圖1中form塊內的內容也分為兩大塊內容 logo塊 和 form塊，如下。
根據(jù)flex布局的定義，我們將代碼修改如下：
從圖6可以看到，已經基本和圖1中的布局一樣了，現(xiàn)在，我們只需要填充圖4中的form塊的內容即可。
最后，再經過分析，我們將圖4中分form塊再做細分，如下：
從圖7可以看到，我們將一個form塊拆分成3個form field。我們將代碼修改如下：
注意，form-field也需要設置成flex容器，其他都是基本的屬性設置。
最后，我們再添加一點效果，css代碼如下：
完成了所有的代碼后，就可以看到圖1的效果了。
現(xiàn)在看到的代碼是靜態(tài)網(wǎng)頁，在真正動手用angular實現(xiàn)時，需要按照angular的規(guī)則來將靜態(tài)網(wǎng)頁模板導入到angular項目中，具體的實現(xiàn)在以后angular實現(xiàn)時再細講。
