登录界面设计

-----------------------------------------------------------------Sun------------------------------------------------------------------

GitHub:    https://github.com/Bluebluesun/codes

首先看一下效果图：

使用语言：html+CSS

由于登录会提示是否成功，故还需一点Javascrip知识。

  看到这个界面首先考虑可以分为哪些部分，分为几层去实现。

1.首先第一个区域有头部的Login框，第二个区域为最外层的棕色和白色组成的背景框，第三个区域为输入框。

    在第二个区域会遇到正三角如何实现的问题：

          这是一个正三角形的实现。

           可以理解为是一个矩形有四个顶点，然后正三角形是将上面的两个顶点合二为一。

  border-width: 0 25px 25px 25px;           
  border-style: solid;
  border-color: transparent;

     

           同理，倒三角形为：

border-width:  25px 25px 0 25px; 

            向左的三角形为：

border-width:  25px 25px 25px 0; 

            向右的三角形为：

border-width:  25px 0 25px 25px; 

             那么如果是右上的三角形呢？  左边的不显示就ok了。

border-left-color: transparent;







2.分别对每个框的宽度、高度、边框、间距、背景、位置、字体、大小、颜色等做设置。
3.由于在点击Login按钮后需要判断是否登录成功，故在点击事情发生后就调用login_in()函数来判断，网页会弹出一个消息框来提示是否登录成功。






第一次做，消息框还没有美化。。。真丑。



-------------嘻嘻，抱了大腿现在好多了----------------------