### 界面/視圖
[TOC=4,6]
登錄界面的視圖文件是View文件夾下的Account子文件夾中的login.html，如圖所示：
登錄界面要做到不難看。首先考慮的應該是頁面的布局，本系統的登錄界面采用**頭部Banner+內容區（左側用戶輸入區+右側信息提示區）+尾部footer**的布局方式。這也是很多系統的頁面通用布局方式。其顯示效果如下：
#### 使用的技術
登錄功能的視圖使用流行的BootStrap前端設計技術。關于BootStrap的使用方法可以參考 http://www.bootcss.com 的相關教程，此處不再贅述。BootStrap快速入門也可參考文章：http://www.cnblogs.com/nerd/p/5678097.html
#### 布局
1.左右各一半（col-md-6）
2.左側登錄框占左側一半的10/12
3.右側是登錄系統的注意事項
#### 使用到的BootStrap元素
1.well
2.輸入框組（input-group）
3.按鈕（btn-success）
#### HTML代碼
HTML代碼如下：
~~~
<div class="row" style="margin-top:30px;">
<div class="col-md-6" style="border-right:1px solid #ddd;">
<div class="well col-md-10">
<h3>用戶登錄</h3>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="用戶名" aria-describedby="sizing-addon1">
</div>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" placeholder="密碼" aria-describedby="sizing-addon1">
</div>
<div class="well well-sm" style="text-align:center;">
<input type="radio" name="kind" value="tea"> 老師
<input type="radio" name="kind" value="stu"> 學生
</div>
<button type="submit" class="btn btn-success btn-block">
登錄
</button>
</div>
</div>
<div class="col-md-6">
<h3>
歡迎使用學生作業管理系統
</h3>
<ul>
<li>學生使用<em>學號</em>登錄，初始密碼為<em>6個1</em>，登錄后請及時修改密碼</li>
<li>老師請使用<em>工號</em>登錄，初始密碼為<em>6個1</em>，登錄后請及時修改密碼</li>
</ul>
</div>
</div>
~~~
HTML代碼包含了使用到的主要元素，下面來設置這些元素的樣式。
#### CSS代碼
CSS代碼用于設置頁面元素的樣式，如果您對CSS不熟悉，可以參考W3School的相關教程：http://www.w3school.com.cn/css/index.asp
~~~
.input-group{
margin:10px 0px;//輸入框上下外邊距為10px,左右為0px
}
h3{
padding:5px;
border-bottom:1px solid #ddd;//h3字體下邊框
}
li{
list-style-type:square;//列表項圖標為小正方形
margin:10px 0;//上下外邊距是10px
}
em{//強調的樣式
color:#c7254e;
font-style: inherit;
background-color: #f9f2f4;
}
~~~