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

实验项目名称： CSS页面布局及样式设计 （所属课程： web系统与技术 ） 学 院：计算机学院 专业班级：11级计科信息 姓 名： 学 号： 实验日期： 实验地点：A06-404 合作者： 指导教师：李 本实验项目成绩： 教师签字： 日期： 一、实验目的? （2）掌握DIV+CSS的页面布局方式。 （3）掌握CSS中的常用属性的使用方法。 （4）理解CSS的样式构造。 二、实验 三、实验内容 （2）登录页面中添加div层用于显示在线用户数。 （3）登录页面使用div将登录表单，在线用户数，logo图片，超链接等页面元素重新定位布局。 （4）聊天页面改用div标签并使用CSS的position定位属性进行布局，框架内的独立页面使用float属性进行布局。 （5）使用CSS设置三个页面的背景颜色或背景图片。 （6）注册页面使用CSS设计所有输入框和提交按钮的样式。 （7）登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字，使用CSS设计登录按钮的显示样式。 （8）聊天页面中使用CSS设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码： 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 / 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 { height: 94px; width: 100%; border-radius: 10px;} #div #div1 #img { width: 130px; height: 90px; float: left;} #div #div1 #title { line-height: 94px; font-size: 34px; color: #921AFF; width: 545px; h