div层布局和spry构件

div层布局和spry构件

ID:33703353

大小:227.50 KB

页数:5页

时间:2019-02-28

div层布局和spry构件_第1页
div层布局和spry构件_第2页
div层布局和spry构件_第3页
div层布局和spry构件_第4页
div层布局和spry构件_第5页
资源描述:

《div层布局和spry构件》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、DIV层布局与Spry构件1、认识Spry构件Spry功能功能不仅增强了页面的布局形式,简化并增强了表单的验证功能,还与XML数据相结合,方便构造动态数据显示。本例就将这些新功能集合到一个网页中,从中体会Spry的无穷魅力。1)Spry构件2)Spry验证表单3)SpryXML数据显示这一章重点学习Spry构件,可以把Spry构件看成一种控件,是已经事先设计好的模块,我们可以直接添加在网页中,快速地实现比较炫酷的网页效果Spry构件类型1)Spry菜单栏2)Spry选项卡面板3)Spry折叠式4)Spry折叠面板5)Spry工具提示我们将通过一个综合实例,结合Div布

2、局来学习各种构件的使用2、DIV布局页面DIV+CSS的页面布局是网页设计的发展方向,很多网站也是从表格布局发展到DIV布局,这一节我们可以说是一个入门,了解如何使用DIV布局页面。1)先创建DIV标签2)设置对应的CSS样式注意:插入DIV标签的位置技巧:默认情况下两个DIV标记上下进行排版,如果想让两个DIV层并排显示,可以使用Float属性#top{background-color:#FC0;height:60px;width:720px;}#mid{background-color:#CF0;height:250px;width:720px;}#bottom{

3、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图片后#topimg{float:left;}网页DIV布局代码如下,注意嵌套3)使用DIV――box整体控制居中对齐#box{background-color:#6FF;height:3

4、30px;width:720px;margin-right:auto;margin-left:auto;}网页DIV布局代码如下,注意居中对齐3、Spry菜单MenuBar插入Spry菜单,设置属性,生成菜单4、Spry折叠式Accordion单击眼睛可以展开面板2)设置Spry折叠式的CSS中的AccordionPanelContent属性如下3)用户登录面板中插入表单Form后,在表单中插入表格左边一列,输入如上图,右边一列依次插入文本域、文本域、按钮4)联系我们面板中,插入DIVtousCSS如下建立完Spry以后在建立CSS,注意保存的位置,选择仅限该文档5、

5、Spry可折叠面板CollapsiblePanel在面板中插入DIVabout,CSS如下6、Spry选项卡面板TabbedPanels在最新素材面板,输入内容或者复制过来7、Bottom内容编辑#bottom{font-size:12px;line-height:16px;text-align:center;padding-top:10px;}8、Spry工具提示选择底部这段文字“我要素材网”插入sprytooltip

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。