实验项目名称： 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设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。
五、实验结果注册界面效果图及代码：<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"><h1><font face="华文新魏/黑体"></font>注册信息</h1>用户姓名：<input type="text" name="USERNAME"><br/><br/>用户密码：<input type="password" name="USERNAME"><br/><br/><input type="radio" name="sex" checked>女<br/><br/>--><form>姓 别： <label for="male">男</label><input type="radio" name="sex" id="male" /><label for="female">女</label><input type="radio" name="sex" id="female" /></form>年 龄：<input type="text" name="age"><br/><br/> 联系电话：<input type="text" name="TEL"><br/><br/>邮箱地址：<input type="text" name="EMAIL"><br/><br/><p>职 业：<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;height: 90px;float: left;}#div #div2 {border-radius: 10px;height: 216px;width: 670px;border: 5px solid;border-color: #FFAAD5;}#div #div2 #div3 {height: 200px;width: 300px;margin-top: 6px;margin-left: 6px;border-radius: 10px;border: 2px solid;border-color: #FFCBB3;font-size: 23px;text-align: center;float: left;background: url("./img/d4.png");} .button {height: 40px;width: 100px;box-shadow: 0px 0px 10px #3e7fcf;} input{width:140px;height:30px;}#div #div2 #div4 {height: 190px;width: 90px;float: left;margin-top: 20px;margin-left: 8px;}#div #div2 #div5{height: 200px;width: 200px;float: left;margin-left:28px;}</style></head><body bgcolor="#FF9797"><div id="div"><div id="div1"><div id="img"><img src="./img/logo.png" /></div><div id="title"><marquee width=455px height=94px vspace="5" hspace="5" behavior="scroll">微型聊天室</marquee></div></div><div id="div2"><div id="div3"><form action="#" method="post" id="myform"><br />用户姓名：<input type="text" name="USERNAME"><br /><br />用户密码：<input type="password" name="USERNAME"><br /><br /><button class="button" type="submit">登 录</button><button class="button" type="reset">重 置</button></form></div><div id="div4"><img src="./img/0.png"><br/><br/><center>在线人数</center><a href="MyHtml.html"><img src="./img/wan.png"width="99px" height="28px" border="none"></a></div><div id="div5"><img src="./img/hehua.png"></div></div></div></body></html>登录界面效果图及代码：<style type="text/css">#divbox {height: 480px;width: 720px;position: absolute;left: 50%;top: 50%;margin: -240px auto auto -360px;border: 1px red solid;}#divbox #divlist {height: 344px;width: 184px;background: #FF7575;line-height: 20px;margin-top: 6px;margin-left: 6px;float: left;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divlist p {text-indent: 2em;}#divbox #divtalk {height: 344px;width: 504px;margin-top: 6px;margin-right: 6px;background: #FFFFB9;float: right;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divtalk p {text-indent: 2em;}#divbox #divsend {height: 104px;width: 698px;margin-top: 6px;margin-left: 6px;background: #FFD1A4;border: 4px solid;border-color: #D9006C;position: absolute;left: 50%;top: 87%;margin: -52px auto auto -352px;border-radius: 8px;}.button {height: 104px;width: 78px;box-shadow: 0px 0px 10px #3e7fcf;}</style></head><body><center><h1>聊天室界面</h1></center><div id="divbox"><div id="divlist"><img src="./img/dog.png">在线用户： <br><p>张萨</p><p>王武</p><p>杜六</p></div><div id="divtalk"><p>张萨说：今天天气不错呀！</p><p>王武说：嗯嗯，正好可以出去春游呢!</p><p>杜六说：好主意，那咱们去哪儿呢？</p><p>王武说：小南海怎么样？</p></div><div id="divsend"><div style="float: left;"><textarea style="width: 620px; height: 104px;"></textarea> </div><div style="float: left;"><input id="button" type="button" value="发言"style="width: 78px; height: 104px;" /></div></div> </div></body></html>六、讨论由于实验的练习掌握了div的基本知识。