本例最终效果如下：

 

一、设置整个网页的背景色

图1

图2

二、创建一个盒子，让其水平居中，距离上边200像素。

图3

图4

三、把盒子设置四个角为圆角，圆10个像素。

图5

图6

四、在大盒子里做一个ding盒子，设置它上面两个角是圆角，下面两个角是直角。

图7

图8

五、ding盒子里输入几个字，让这几个字在盒子里水平居中，垂直居中，关于盒子内居中问题可参看我写的文【203】。

图9

图10

六、在deng盒子里面再做三个小盒子，取名为ref，注意如果这三个盒子不用浮动，会有什么效果，这个你可以试试看。

图11

图12

七、往ref盒子里面添加信息，发下图，这里顺便学习两个标签，一个是input，一个是button。

图13

图14

八、去掉背景色，然后用盒子内居中的方法，让这些元素居中。

图15

图16

九、通过样式，设置按钮的大小和字的大小，这里我特地用id来给元素上名字，不同于class，在样式里调用的时候，一个是前面加.一个是前面加#。

图17

图18

十、最后设置一下密码输入框，输入内容时为密码隐藏符号。

图19

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-jiaocheng/tc58137.shtml