ホームページ > 記事 > ウェブフロントエンド > 垂直タブのpanel_html/css_WEB-ITnoseの実装
垂直タブのpanel_html/css_WEB-ITnoseの実装
- WBOYオリジナル
- 2016-06-24 12:14:092129ブラウズ
前の言葉:
私は HTML の初心者であり、HTML の基本的な知識をいくつか知っています。最近CSSを勉強し始めましたが、JavaScriptは分かりません。 adobe dw cs5 plug-in->spry にはタブ付きパネルのデザインがあることを知り、これに非常に興味があります。しかし、デフォルトではタブが上部に水平に配置されることがわかりました。ただし、ほとんどの Web サイトでは、Web ページの左端にタブが垂直に配置されています。そこで、spry によって挿入されたタブ パネルをニーズに合わせて変更することを検討し始めました。
spry によって生成されるタブ付きパネル Web ページにはデフォルトですでに垂直スタイルが含まれていると考えますが、大きなフレームはありますが、タブのみが垂直に配置され、コンテンツはタブの下にあるため、直接実行すると見栄えが良くありません。右の代わりに。
実践:
新しいファイルを作成して spry タブ付きパネルを挿入すると、dw は 3 つのファイルを生成します: name.html (メイン ファイル、ファイル名は任意です)、SpryTabbedPanels.css、SpryTabbedPanels.js。ここでは、name.html と SpryTabbedPanels.css のみを変更し、js ファイルは変更しません (js を知らないので恥ずかしい...)
name.html では、div の前に別のレイヤーを追加するだけですタブパネル div、172b6b7a3f707a1f4f04d2574729c678...16b28748ea4df4d9c2150843fecfba68 のこの div 層は、spry 自体が提供する垂直配置機能と完全に互換性があるため、変更しないことをお勧めします。クラスの名前。このファイルで変更されるその他の部分は Web ページのコンテンツであり、他のタグはありません (コンテンツの段落が多い場合は、せいぜい、重要ではない e388a4556c0f65e1904146cc1a846bee タグを追加するだけです)。したがって、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 ファイルのコードは長くなりますが、その中の 1 文も変更されていません。投稿の長さに制限があるので、ここには投稿しません。
ディスカッションへの返信 (解決策)
🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 シェアしてくれてありがとう🎜🎜？ lion_6@163.com まで送ってください 🎜 🎜 それは違います~元のコードがわからないので持ち込めません~ ブラウザでは動作しません~ 🎜 🎜 とても良いです、シェアしてください！ 🎜
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。