竖直选项卡式面板的实现_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:14 PM

前面的话：
我是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的代码如下：

<!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&aelig;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

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

挺不错的，分享！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。