html li spry,借助于spry实现Tab面板

本例我们想最终实现的效果，如图所示，单击某个Tab时，就会切到该页面。

首先我们新建一个HTML文档，然后在“插入”工具栏中选择“spry”项目。单击如图所示，这时视图窗口就会出现一个最基本的Tab面板了

右数第四个。

下面的任务就是以spry为基础，通过CSS样式的设置，实现更为美观的Tab面板。也可以根据自己希望得设计更美观的效果

这里我们要用到的3个图像如图所示

下面我们要找到自动生成的css文档，不改动其中的名称，在其基础上进行修改就可以了

这里还说明了，鼠标经过时变换面板的javascript代码。修改后的CSS样式如下：

.TabbedPanels {

margin: 0px;

padding: 0px;

float: left;

clear: none;

width: 500px;

}

.TabbedPanelsTabGroup {

margin: 0px;

padding: 0px;//这一段没有影响，可以不改动

}

设置初始状态时，因为运用了滑动门，说以多了一个span标签

.TabbedPanelsTab {

display:block;

height:30px;

position: relative;

top: 2px;

float: left;

padding:0px 0px 0px 15px;

margin:0;

font: bold 14px Arial;

background:url(../2.gif);

list-style: none;

cursor:pointer;

-moz-user-select: none;

-khtml-user-select: none;

color:#fff;

}

.TabbedPanelsTab span{

display:block;

background:url(../2.gif) right top;

padding:7px 25px 7px 0;

}

设置鼠标经过时

.TabbedPanelsTabHover{

background:url(../1.gif);

color:#900;

}

.TabbedPanelsTabHover span{

display:block;

background:url(../1.gif) right top;

padding:7px 25px 7px 0;

}

设置选择时

.TabbedPanelsTabSelected {

background:url(../3.gif);

color:#900;

}

.TabbedPanelsTabSelected span{

display:block;

background:url(../3.gif) right top;

padding:7px 25px 7px 0;

}

其他没有影响可以不动

这里把视线鼠标经过的HTML部分也贴出来，读者可以看一下

Home
Web Dev
Web Design
Map

我拿什么拯救

就这样被你征服

想留不能留才最寂寞

没说完温柔只剩离歌

实现这一效果的主要代码是

，至此本列就算完成了。

来源：https://www.cnblogs.com/zfang/archive/2011/10/28/2227544.html

html li spry,借助于spry实现Tab面板相关推荐

spry提示信息设置html,CSS教程:12.4 借助于Spry实现折叠面板
在基于Spry的基础上实现了Tab板之后,再来制作一个折叠面板的页面,效果如图1所示.图中一共有3个折叠面板,每个折叠面板都有一个标题.单击一个标题,就可以实现面板的折叠隐藏或展开.图1的左图为折叠起 ...
Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题解决
Extjs4 Tab面板Mapbar地图关闭再打开气泡失效问题非常不稳定,时好时坏.最终采取了最新的mapbar地图 <script type="text/javascript&quo ...
spry菜单栏(一)
spry菜单栏使用教程关于 Spry 框架 Spry 框架是一个 JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页.有了 Spry,就可以使用 H ...
《Dreamweaver CS6 完全自学教程》笔记第十七章：Spry 框架技术
文章目录第十七章:Spry 框架技术 17.1 Spry 菜单栏 17.1.1 插入 Spry 菜单栏 17.1.2 设置 Spry 菜单栏的属性 17.1.3 设置菜单项的尺寸 17.2 Spry ...
php spry文本域_用Spry框架来简化AJAX
用Spry框架来简化AJAX Spry AJAX框架是一个面向Web设计者的JavaScript库.它提供了很多供设计者建立页面的扩展功能,AJAX风格. 目前其最新版本为2007.5.17日发布的1 ...
php spry文本域_Spry框架及验证构件
图 9-71 Spry 框架原理虽然这些文件存放在服务器上,但实际上是被加载到浏览器中运行的.框架的用户将所有需要的文件链接到 HTML 文档中,以使用不同的组件,来获得更丰富的用户体验. Spr ...
ajax与spry的关系,用Spry框架来简化AJAX
Spry AJAX框架是一个面向Web设计者的JavaScript库.它提供了很多供设计者建立页面的扩展功能,AJAX风格.目前其最新版本为 2007.5.17日发布的1.5版本.下载地址为:http ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
Bootstrap 标签页Tab插件使用方法
标签页 Bootstrap标签页Tab插件需要 bootstrap-tab.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-tab.js 文件. 调用方式 1.dat ...

html li spry,借助于spry实现Tab面板

html li spry,借助于spry实现Tab面板相关推荐

最新文章

热门文章