登录页面一般需要账号输入框，密码输入框，登录按钮，下面小编举例讲解怎样用div+css制作一个登录页面。下面小编举例讲解怎样用div+css制作一个登录页面。工具/原料morecss+html代码编辑器：zend studio 10.0 方法/步骤1/6分步阅读

新建一个html文件，命名为test.html，用于讲解怎样用div+css制作一个登录页面。

2/6

在test.html文件中，创建一个form表单，使用div标签创建一个模块，在div内，再使用input创建两个输入框，一个按钮。

3/6

在test.html文件中，设置div的class属性，用于下面设置它的样式。

4/6

在css标签内，通过class(con)定义外边div的样式，设置它的宽度为500，在页面居中显示，背景颜色为灰色，内边距为30px。

5/6

在css标签内，再通过class(conlist)内部div的样式，设置div居中，宽度为300px，上外边距为20px，内容居中。同时，通过btn类名设置按钮的样式，定义它的上下内边距为5px，左右内边距为15px。

6/6

在浏览器打开test.html文件，查看结果。

总结：1/1

1、创建一个form表单，使用div标签创建一个模块，在div内，再使用input创建两个输入框，一个按钮。2、设置div的class属性，用于下面设置它的样式。3、在css标签内，通过class(con)定义外边div的样式，设置它的宽度为500，在页面居中显示，背景颜色为灰色，内边距为30px。4、在css标签内，再通过class(conlist)内部div的样式，设置div居中，宽度为300px，上外边距为20px，内容居中。同时，通过btn类名设置按钮的样式，定义它的上下内边距为5px，左右内边距为15px。

CSS