1、DIV 层布局与 Spry 构件1、认识 Spry 构件Spry 功能功能不仅增强了页面的布局形式，简化并增强了表单的验证功能，还与 XML 数据相结合，方便构造动态数据显示。本例就将这些新功能集合到一个网页中，从中体会 Spry 的无穷魅力。1）Spry 构件2）Spry 验证表单3）Spry XML 数据显示这一章重点学习 Spry 构件，可以把 Spry 构件看成一种控件，是已经事先设计好的模块，我们可以直接添加在网页中，快速地实现比较炫酷的网页效果Spry 构件类型1）Spry 菜单栏2）Spry 选项卡面板3）Spry 折叠式4）Spry 折叠面板5）Spry 工具提示我们将通过一个
2、综合实例，结合 Div 布局来学习各种构件的使用2、DIV 布局页面DIV+CSS 的页面布局是网页设计的发展方向，很多网站也是从表格布局发展到 DIV 布局，这一节我们可以说是一个入门，了解如何使用 DIV 布局页面。1）先创建 DIV 标签2）设置对应的 CSS 样式注意：插入 DIV 标签的位置技巧：默认情况下两个 DIV 标记上下进行排版，如果想让两个IV 层并排显示，可以使用 Float 属性#top background-color: #FC0;height: 60px;width: 720px;#mid background-color: #CF0;height: 250px;w
3、idth: 720px;#bottom background-color: #F6F;height: 20px;width: 720px;#mid_left background-color: #69F;height: 250px;width: 220px;float: left;#mid_right background-color: #3FF;height: 250px;width: 500px;float: right;添加 Logo 图片后#top img float: left;网页 DIV 布局代码如下，注意嵌套）使用整体控制居中对齐#box background-color: #
4、6FF;height: 330px;width: 720px;margin-right: auto;margin-left: auto;网页 DIV 布局代码如下，注意居中对齐3、Spry 菜单 MenuBar插入 Spry 菜单，设置属性，生成菜单4、Spry 折叠式 Accordion单击眼睛可以展开面板2)设置 Spry 折叠式的 CSS 中的 AccordionPanelContent 属性如下3)用户登录面板中插入表单 Form 后，在表单中插入表格左边一列，输入如上图，右边一列依次插入文本域、文本域、按钮4) 联系我们面板中，插入 DIV tous CSS 如下建立完 Spry 以后在建立 CSS，注意保存的位置，选择仅限该文档5、Spry 可折叠面板 CollapsiblePanel在面板中插入 DIV about，CSS 如下6、Spry 选项卡面板 TabbedPanels在最新素材面板，输入内容或者复制过来7、Bottom 内容编辑#bottom font-size: 12px;line-height: 16px;text-align: center;padding-top: 10px;8、Spry 工具提示选择底部这段文字“我要素材网”插入 sprytooltip
