CSS页面布局及样式设计实验报告（材料）_css页面布局实例

CSS页面布局及样式设计实验报告（材料）由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“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设计登录按钮的显示样式。

第1页

共8页 实 验 报 告

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

五、实验结果

注册界面效果图及代码：

//总体框架 //添加图片代码