上QQ阅读APP看书，第一时间看更新
3.4 案例实训1——仿QQ登录界面
仿QQ登录界面分两部分，上半部分使用图片设计完成，下半部分使用Bootstrap网格系统进行布局，设计完成效果如图3-20所示。
图3-20 仿QQ登录界面效果
下面来看一下实现的步骤。
第1步：设计登录界面外边框以及登录界面上半部分。在Firefox浏览器中效果如图3-21所示。
图3-21 左侧头像效果
设计CSS样式：
第2步：设计登录界面下半部分外边框，并添加样式。它采用Bootstrap网格系统布局。
设计登录界面下半部分外边框：
第3步：设计左侧头像及左侧头像部分。在Firefox浏览器中效果如图3-22所示。
图3-22 登录表单效果
设计样式代码如下：
第4步：设计登录表单。在Firefox浏览器中效果如图3-23所示。
图3-23 登录表单效果
设计样式代码如下：
第5步：设计右侧功能区。在Firefox浏览器中效果如图3-24所示。
图3-24 右侧功能区效果
设计样式代码如下：
