[Google style系列]Google登录框

 

[Google style系列]Google登录框

 

Google的登录框在不同的网页中基本上是一致的,有自己的风格.这里我模仿写了一个,只是写了个Shell吧,以作参考.

 

思路 :

  这个表单也是个table,而且也只有一个tr,一个td,这里面放的又是个table.(跟前面几个效果采用一样的手段),不同的是这次使用的CSS来控制表格最外面的框的颜色,粗细,以及线型.其他的类似.

 

PS:

Google一般都把table放到div里面,应该是起 定ID和 定对齐方式 的作用吧.

 

效果:

 

代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
   < head >
     < meta  name ="generator"  content =
    "HTML Tidy for Windows (vers 12 April 2005), see www.w3.org"   />

< style  type ="text/css" >
BODY {
  FONT-FAMILY: arial,sans-serif
}
TD {
  FONT-FAMILY: arial,sans-serif
}
DIV{
  FONT-FAMILY: arial,sans-serif
}
P{
  FONT-FAMILY: arial,sans-serif
}
A {
  FONT-FAMILY: arial,sans-serif
}
FONT{
  FONT-FAMILY: arial,sans-serif
}
SPAN {
  FONT-FAMILY: arial,sans-serif
}
BODY{
  MARGIN-TOP: 2px
}
.c {
  WIDTH: 4px; HEIGHT: 4px
}
BODY {
  bgcolor: "#ffffff"
}
A:link {
  COLOR: #0000cc
}
A:visited {
  COLOR: #551a8b
}
A:active{
  COLOR: #ff0000
}
.form-noindent {
  BORDER-RIGHT: #c3d9ff 1px solid;  
  BORDER-TOP: #c3d9ff 1px solid; 
  BORDER-LEFT: #c3d9ff 1px solid; 
  BORDER-BOTTOM: #c3d9ff 1px solid; 
  BACKGROUND-COLOR: #ffffff
}

</ style >

<!--    #c3d9ff 1px 代表最外面的框的 颜色  粗细   -->
     < title ></ title >
   </ head >
   < body >
     < form >
       < div >
         < table  class ="form-noindent"  cellspacing ="3"  cellpadding =
        "5"  width ="100%"  border ="0" >
           < tr >
             < td  style ="TEXT-ALIGN: center"  valign ="top"  nowrap =
            "nowrap"  bgcolor ="#E8EEFA" >
               < div  id ="loginBox" >
                 < table  cellspacing ="0"  cellpadding ="1"  align =
                "center"  border ="0" >
                   < tr >
                     < td  colspan ="2" >
                      Login in Table
                     </ td >
                   </ tr >
                   < tr >
                     < td >
                      Username:
                     </ td >
                     < td >
                       < input  type ="text"  name ="username"   />
                     </ td >
                   </ tr >
                   < tr >
                     < td >
                      Password:
                     </ td >
                     < td >
                       < input  type ="password"  name ="pwd"   />
                     </ td >
                   </ tr >
                   < tr >
                     < td  colspan ="2" >
                       < input  type ="submit"  value =
                      "Submit"   />< input  type ="reset"  value =
                      "Reset"   />
                     </ td >
                   </ tr >
                 </ table >
               </ div >
             </ td >
           </ tr >
         </ table >
       </ div >
     </ form >
   </ body >
</ html >