竖直选项卡式面板的实现_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

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，