CSS页面布局及样式设计实验报告

实验项目名称： CSS页面布局及样式设计

（所属课程：web系统与技术）

学院：计算机学院专业班级：11级计科信息姓名：学号：

实验日期：实验地点：A06-404 合作者：指导教师：李

本实验项目成绩：教师签字：日期：

一、实验目的

（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设计登录按钮的显示样式。

（8）聊天页面中使用CSS设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。

五、实验结果

注册界面效果图及代码：

//总体框架

//添加图片代码

//用户注册信息代码

注册信息

用户姓名：

用户密码：

女

-->

姓    别： 男

女

年    龄：

联系电话：

邮箱地址：

职    业：

学生

白领

企业家

教师

医生

登录界面效果图及代码：