本例最终效果如下：
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/eb51e61dd353443e98a93c461024b974" />
一、设置整个网页的背景色
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/67881cab27064d89abe93f2549350adc" />
图1
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/4b2504f59cb94a6dbd5f0387f028d221" />
图2
二、创建一个盒子，让其水平居中，距离上边200像素。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/b2220964d021463da3df239a41b87bba" />
图3
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p9.pstatp.com/large/pgc-image/bda36202821b4436bef6950f2ba42a77" />
图4
三、把盒子设置四个角为圆角，圆10个像素。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/c5a0f7f40d5445998de19d2ea9a62fbd" />
图5
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/c7f4050c3bd440bb96c983dd7703e807" />
图6
四、在大盒子里做一个ding盒子，设置它上面两个角是圆角，下面两个角是直角。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/b6336b445da148799408a6bea6bbf559" />
图7
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p9.pstatp.com/large/pgc-image/c38d7576385c49f184120869d734f058" />
图8
五、ding盒子里输入几个字，让这几个字在盒子里水平居中，垂直居中，关于盒子内居中问题可参看我写的文【203】。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p9.pstatp.com/large/pgc-image/f71e19df51664b15ac4cdea40ab5c1eb" />
图9
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/7abd238a0c9f44fcbd85c1298ba9f31d" />
图10
六、在deng盒子里面再做三个小盒子，取名为ref，注意如果这三个盒子不用浮动，会有什么效果，这个你可以试试看。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/c1f0f608293e420ea058a2a9d3591e31" />
图11
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/0376bc6c8b7742079d86416198ae9600" />
图12
七、往ref盒子里面添加信息，发下图，这里顺便学习两个标签，一个是input，一个是button。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/5e0c00fda1804570889c96fe182fe022" />
图13
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p9.pstatp.com/large/pgc-image/e9eee1788b99413ebd00a6ace8ebc9df" />
图14
八、去掉背景色，然后用盒子内居中的方法，让这些元素居中。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/73f3567be0a04aafbbac3796bc77b0dd" />
图15
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/173c070206d248fc84b3b1b49861d0b2" />
图16
九、通过样式，设置按钮的大小和字的大小，这里我特地用id来给元素上名字，不同于class，在样式里调用的时候，一个是前面加.一个是前面加#。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p3.pstatp.com/large/pgc-image/3ff572dbcfed4f7883e1b519d471a435" />
图17
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/b127e4e46f66477db17234224fbb2549" />
图18
十、最后设置一下密码输入框，输入内容时为密码隐藏符号。
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/6c1864551dc24c799cd0628f810d1247" />
图19
![【例】用<a title=]()
div+css做一个简单的登录界面。【204】" src="http://p1.pstatp.com/large/pgc-image/db962d57a329424f8338401a4e696430" />
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html/css