css label 居中布局_CSS页面布局及样式设计实验报告

一、实验目的

(

1

)掌握

CSS

中的定位属性使用方法。

(

2

)掌握

DIV+CSS

的页面布局方式。

(

3

)掌握

CSS

中的常用属性的使用方法。

(

4

)理解

CSS

的样式构造。

二、实验条件

安装

Web

开发环境的微机。

三、实验内容

(

1

)重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。

(

1

)对聊天室的注册页面、登陆页面和聊天页面进行样式设计。

四、实验步骤

(

1

)注册页面使用

CSS

将注册表单居中显示，表单内嵌入表格将文本与输入域格式化

显示，表单内使用

label

标签。

(

2

)登录页面中添加

div

层用于显示在线用户数。

(

3

)登录页面使用

div

将登录表单，在线用户数，

logo

图片，超链接等页面元素重新

定位布局。

(

4

)聊天页面改用

div

标签并使用

CSS

的

position

定位属性进行布局，框架内的独立

页面使用

float

属性进行布局。

(

5

)使用

CSS

设置三个页面的背景颜色或背景图片。

(

6

)注册页面使用

CSS

设计所有输入框和提交按钮的样式。

(

7

)登录页面使用

CSS

设置的超链接的字体和下划线、登录表单使用圆顶角、在线用

户数使用图片数字，使用

CSS

设计登录按钮的显示样式。