竖直选项卡式面板的实现_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，
标签，如果内容段落多的话）。于是name.html的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script><link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /></head><body><div class="VTabbedPanels"><div id="TabbedPanels1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab" tabindex="0">Beijing</li> <li class="TabbedPanelsTab" tabindex="0">Shanghai</li> <li class="TabbedPanelsTab" tabindex="0">Tianjin</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent"><p>Beijing, also known as Peking, is a metropolis in northern China, and the capital of the People's Republic of China. Governed as a municipality under direct administration of the central government, Beijing borders Hebei Province to the north, west, south, and for a small section in the east, and Tianjin Municipality to the southeast. Beijing is one of the Four Great Ancient Capitals of China.</p><p>Beijing is divided into 16 urban and suburban districts and two rural counties. Beijing is a major transportation hub, with dozens of railways, roads and motorways passing through the city. It is also the destination of many international flights arriving in China. Beijing is recognized as the political, educational, and cultural center of the People's Republic of China, while Shanghai and Hong Kong predominate in economic fields. The city hosted the 2008 Olympic Games.</p><p>Few cities in the world besides Beijing have served as the political and cultural centre of an area as immense as China for so long. The Encyclopædia Britannica describes it as "one of the world's great cities," and declares that the city has been an integral part of China's history for centuries; there is scarcely a major building of any age in Beijing that doesn't have at least some national historical significance. Beijing is renowned for its opulent palaces, temples, and huge stone walls and gates. Its art treasures and universities have long made the city a centre of culture and art in China.</p></div> <div class="TabbedPanelsContent"> <p>Shanghai is the most populous city in the People's Republic of China, which is the 10th most populous metropolitan areas in the world. A global city, Shanghai exerts influence over global commerce, finance, culture, art, fashion, research and entertainment. The city is located at the middle part of the coast of mainland China, it sits at the mouth of the Yangtze.</p><p>Originally a fishing and textiles town, Shanghai grew to importance in the 19th century due to its favorable port location and as one of the cities opened to foreign trade by the 1842 Treaty of Nanking. The city flourished as a center of commerce between east and west, and became a multinational hub of finance and business by the 1930s. After 1990, the economic reforms introduced by Deng Xiaoping resulted in intense re-development and financing in Shanghai, and in 2005 Shanghai became the world's largest cargo port.</p><p>The city is a tourist destination renowned for its historical landmarks such as the Bund and City God Temple, and its modern and ever-expanding Pudong skyline including the Oriental Pearl Tower. Today, Shanghai is the largest center of commerce and finance in mainland China, and has been described as the "showpiece" of the world's fastest-growing major economy.</p></div> <div class="TabbedPanelsContent"> <p>Tianjin is a metropolis in Northeastern China and one of the five national central cities. It is governed as a direct-controlled municipality, one of four such designations, and is thus under direct administration of the central government, and borders Hebei Province and Beijing Municipality, bounded to the east by the Bohai Gulf portion of the Yellow Sea. In terms of urban population, it is the sixth largest city of the People's Republic of China, and its urban land area ranks 5th in the nation, only after Beijing, Shanghai, Guangzhou, and Shenzhen.</p><p>Tianjin's urban area is located along the Hai He River, which connects to the Yellow and Yangtze Rivers via the Grand Canal in Tianjin. Its ports, some distance away, are located on the Bohai Gulf in the Pacific Ocean. Tianjin was once home to foreign concessions in the late Qing Dynasty and early Kuomintang (KMT) era. The municipality incorporates the coastal region of Tanggu, home to the Binhai New Area and the Tianjin Economic-Technological Development Area (TEDA). Tianjin Municipality borders Hebei province to the north, south, and west; the Chinese capital Beijing is to the northwest, and the Bohai Gulf to the east.</p> </div> </div></div></div><script type="text/javascript">var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");</script></body></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
不妥啊~代码原封不懂拿过来~在浏览器上不出效果~
挺不错的，分享！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
HTML与CSS和JavaScript：比较Web技术
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
HTML：是编程语言还是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
从文本到网站：HTML的力量
Apr 13, 2025 am 12:07 AM
HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。
