第一篇: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设计信息发送表单和发送按钮的样式,设计用户信息列表和聊天信息段落的的显示样式。
五、实验结果
注册界面效果图及代码: