竖直选项卡式面板的实现_html/css_WEB-ITnose

前面的话：
我是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

不妥啊~代码原封不懂拿过来~在浏览器上不出效果~

挺不错的，分享！