JavaScript第六章.ppt

第四章 使用Ajax留言板 主要内容： 创建第一个ajax实例 Javascript的版本 Javascript基础 重点： Javascript基础 难点： Javascript基础 设计页面 1.创建数据库（注意主键的设置，默认值的设置） 如图： 第四章 使用Ajax留言板 设计页面 2.创建静态页面 安装右图，动手制作静态页面。 第四章 使用Ajax留言板 设计页面 首先来制作留言框 从图片，我们能够看出 留言框的结构： div id=GiveMessage div class=head h5 留言板/h5 /div div class=content asp:TextBox ID=TextBox1 runat=server Height=72px TextMode=MultiLine Width=480px/asp:TextBox/div div class=button asp:Button ID=Button1 runat=server Text=留言 / /div /div 第四章 使用Ajax留言板 设计页面 我们用div id=“GiveMessage” 作为留言框的最外层框架 用 div class=head h5 留言板/h5 /div 作为留言框的头部 用div class=content asp:TextBox ID=TextBox1 runat=server Height=72px TextMode=MultiLine Width=480px/asp:TextBox /div 作为留言框的内容部分 用div class=button asp:Button ID=Button1 runat=server Text=留言 / /div 作为留言按钮所在区域 第四章 使用Ajax留言板 设计页面 结构设计已经完成，下面我们针对每个结构，进行详细的css设计。 设置最外层框架GiveMessage #GiveMessage { margin-left: 40px; border-top: 1px solid #94A3C4; width: 500px; } 设置head #GiveMessage .head { background-color: #F0F5F8; height: 15px; } 第四章 使用Ajax留言板 设计页面 设置head中的标题h5 #GiveMessage .head h5 { margin: 5px 5px; } 设置内容部分content #GiveMessage .content { background-color: #DEDEDE; } 设置内容里面的文本框textarea #GiveMessage .content textarea { margin: 15px 15px; background-color: #DBDBDB; } 第四章 使用Ajax留言板 设计页面 设置按钮区域button #GiveMessage .button { margin-top: 10px; float: right; } ok，选择留言框部分已经完成，下面完成留言列表的制作。 第四章 使用Ajax留言板 设计页面 结构分析 ul id=MessageList li img src=images/head.jpg / div span姓名 /span2009-01-01 h1 a href=#回复/a /h1 /div 留言内容 /li /ul 第四章 使用Ajax留言板 设计页面 结构设计已经完成，下面我们针对每个结构，进行详细的css设计。 设置最外层框架ulMessageList ul#MessageList { list-style: none; width: 500px; } 设置ul里面的li ul#MessageList li { clear: both; margin: 2px; border-bottom: 1px