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

实 验 报 告 实验项目名称： CSS 页面布局及样式设计 （所属课程： web 系统与技术 ） 学  院：计算机学院  专业班级：11 级计科信息 姓 名：  学  号： 实验日期： 实验地点：A06-404 合作者： 指导教师：李 本实验项目成绩：  教师签字：  日期： 一、实验目的 掌握 CSS 中的定位属性使用方法。 掌握 DIV+CSS 的页面布局方式。 掌握 CSS 中的常用属性的使用方法。 理解 CSS 的样式构造。 二、实验条件 安装 Web 开发环境的微机。 三、实验内容 （1）重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。 （1）对聊天室的注册页面、登陆页面和聊天页面进行样式设计。 四、实验步骤 注册页面使用 CSS 将注册表单居中显示，表单内嵌入表格将文本与输入域格式 化显示，表单内使用 label 标签。 登录页面中添加 div 层用于显示在线用户数。 登录页面使用 div 将登录表单，在线用户数，logo 图片，超链接等页面元素重 新定位布局。 聊天页面改用 div 标签并使用 CSS 的 position 定位属性进行布局，框架内的独 立页面使用 float 属性进行布局。 使用 CSS 设置三个页面的背景颜色或背景图片。 注册页面使用 CSS 设计所有输入框和提交按钮的样式。 登录页面使用 CSS 设置的超链接的字体和下划线、登录表单使用圆顶角、在线 用户数使用图片数字，使用 CSS 设计登录按钮的显示样式。 第 1 页 共 8 页 frameset cols=25%,75%//总体框架frame src=registImg.html /frame src=regist.html //frameset/html frameset cols=25%,75%//总体框架 frame src=registImg.html / frame src=regist.html / /frameset /html body style=text-align:right;//添加图片代码 img src=./img/d1.png /body body//用户注册信息代码 form action=do_submit.cgi method=post h1font face=华文新魏/黑体/font注册信息/h1 用户姓名：input type=text name=USERNAMEbr/br/ 用户密码：input type=password name=USERNAMEbr/br/ input type=radio name=sex checked女br/br/-- form 姓nbsp;nbsp;nbsp;nbsp;别： label for=male男/label input type=radio name=sex id=male / 实 验 报 告 （8）聊天页面中使用 CSS 设计信息发送表单和发送按钮的样式，设计用户信息列表 和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码： 第 2 页 共 8 页 label for=female女/labelinput type=radio name=sex id=female //form年nbsp;nbsp;nbsp;nbsp;龄：input type=text name=agebr/br/联系电话： label for=female女/label input type=radio name=sex id=female / /form 年nbsp;nbsp;nbsp;nbsp;龄：input type=text name=agebr/br/ 联系电话：input type=text name=TELbr/br/ 邮箱地址：input type=text name=EMAILbr/br/ p职nbsp;nbsp;nbsp;nbsp;业：select size=1 name=work option学生/option option白领/option option企业家/option option教师/option option医生/option /select/p input type=submit value=提交 name=submit input type=reset value=重置 name=reset /form /body style type=text/css #div { height: 320px; width: 680px; position: absolute; left: 50%; top: 50%; margin: -159px auto auto -340px;} #div #div1 { heig