我是html的初学者，懂得一些html的基本知识。最近开始学css，不会JavaScript。了解到adobe dw cs5的插入->spry有选项卡式面板的设计，对这个很感兴趣。但是发现默认的是tab水平排列在上面的。然而多数网站都是tab竖直排列在网页的左端。于是开始寻找修改spry插入的选项卡面板，以适应需求。
考虑到spry默认生成的选项卡式面板网页里已经包含了垂直的样式，但是大框架虽然有，直接运行则很不好看，因为只有tab竖直排列了，而内容在tab的下边而不是右侧。
实践：
新建文件，并插入spry选项卡式面板后，dw将生成三个文件：name.html（是主文件，文件名随意），SpryTabbedPanels.css，SpryTabbedPanels.js。在这里我们只修改name.html和SpryTabbedPanels.css，而js文件不动（因为我不会js，惭愧...）
在name.html中，只在选项卡面板的div前再套一层div，
...
，这层div完全是配合spry本身提供的竖直排列功能的，因此class的名字最好不要改。在本文件中修改的其他部分就是网页的内容了，没有其他标签了（至多添加一个无关痛痒的标签，如果内容段落多的话）。于是name.html的代码如下：
无标题文档
SpryTabbedPanels.css的内容，因为英语不好，所以把它原本提供的英文注释都删了，此外，还把不属于.VTabbedPanels的子类的类删了，这样代码看起来清爽了很多。如下：
@charset "UTF-8";.VTabbedPanels #TabbedPanels1.TabbedPanels{ margin:0px; padding:0px; border:0px; width:403px; height:auto;}.VTabbedPanels .TabbedPanelsTabGroup {/*这里设置tab组的样式*/ margin: 0px; padding: 0px; border:0px; /*display:block;*/ float: left; width: 100px; height: auto; /*position: relative;*/}.VTabbedPanels .TabbedPanelsTab {/*这里设置tab的样式*/ /*position: relative; /*display:block;*/ /*float: none;*/ margin:5px 0px 1px 0px; top: 1px; padding: 4px 10px; font: bold; font-family:Arial; background-color: #090; color:#dfe; list-style: none; border-top: solid 3px #060; border-left: solid 3px #060; border-right: solid 3px #090; border-bottom: solid 3px #060; -moz-user-select: none; -khtml-user-select: none; cursor: pointer;}.VTabbedPanels .TabbedPanelsTabHover {/*这里设置鼠标经过*/ background-color: #aeb; color:#090;}.VTabbedPanels .TabbedPanelsTabSelected {/*这里设置选中的tab的样式*/ background-color: #dfe; border-right: solid 3px #dfe; color:#090;}.VTabbedPanels .TabbedPanelsContentGroup {/*这里是内容框的样式*/ /*clear:none;*/ border-left: solid 3px #090; border-bottom: solid 3px #090; border-top: solid 3px #090; border-right: solid 3px #090; background-color: #dfe; color:#090; padding: 0px; margin:0 0 0 97px;/*97px是计算得到的，这样就能实现tab和内容连通的效果了。*/ width: 300px; height: 350px; font-size:11px; font-family:Arial;}.VTabbedPanels .TabbedPanelsContentGroup p { margin:5px; padding:0px;} js文件的代码较长，但是里面一句也没有修改。由于帖子长度有限制，就不贴在这里了。
回复讨论(解决方案)
接分的来了
不错咯~~~
向LZ学习
谢谢分享
一般是自己写代码的
有水平样式的吗。发我:lion_6@163.com
不妥啊~代码原封不懂拿过来~在浏览器上不出效果~
挺不错的，分享！