HTMLでのタブバーのいくつかの実装方法

HTML にはタグの使用方法が数多くあります。この記事では、タグ バーの実装方法をいくつか紹介します。タグの知識を学ぶのに非常に役立ちます。

タブページ: カテゴリ + 説明

タブバー: カテゴリ=> ユーザーに自分がどこにいるのか、どこへ行くのかを理解させます

1. CSS 命名方法:

XML/HTML コードコンテンツをクリップボードにコピー

1. <p class="service-tabs service-tabs1">

2. 
   

3. <ul class="service-tabs-inner">

4. ="on"> <a href="#nogo">フォローa>li& gt;& gt;< /

   li
5. >

   <li><a href="#nogo" >ナビゲーションa>

   li
6. >

   <li>< a href="#nogo " >ショッピングa>

   li
7. >

   ul > / 利点: 1. 検索が簡単 2. SEO 基準に準拠 2. レイアウト方法:

   1.
   1) float: clear float overflow:hidden;/pseudo-class:after/
   • 2) display:inline -block IE7 は互換性がありません: *display:inline;*zoom:1; 空白の間隔: font-size: 0;/同じ行/余白の負の値/文字間隔

     2.<表>3. テンプレートコード:

   • 1. ホバー時の背景色を追加

     
     

   • CSS コードコンテンツをクリップボードにコピーします

   • 
     .service-tabs li a{

     width
   :

160px

;
height

:

80px
;

display

:

block

;

カラー

: #666;フォントサイズ:

32px

;}

.service-tabs1 li a:hover{color:#2CC185;}

:

#fff

;}

/*背景色*/

2. 小さな三角形、明らかです

CSSコード

コンテンツをクリップボードにコピーします

.service-tabs4 li{position:

relative

;}

1. .サービス-tabs4 li a:hover{

   color:#2CC185;}

2. .service -tabs4 li.on a{

   background-color:#2CC185;color

   :
#fff
3. ; }

   .service-tabs4 li i{幅:11px;高さ

   :
7px
4. ;

   位置:絶対;下位下位:-6px ;左:76px;背景:url(images/arrow.png) ;表示 3. 下線CSSコード内容をクリップボードにコピー

5. .サービス-tabs2 li a:hover{color:#2CC185;}

.service-tabs2 li.on a{
height

:

78px;

border-bottom

:

2px

solid

#2CC185;color:#2CC185

;}

2. 4. スクリプトの実装

   JavaScript コードコンテンツをクリップボードにコピー $(

   function
(){ $(

".service-tabs ul li"

).click(
function

() { $(

this).addClass(

"on"

) .siblings().removeClass(

"on"

); }) })

はシンプルで実用的で、誰でも学ぶことができます。急いで手を汚してください。

関連する推奨事項:

html img タグの使用方法

HTML5 の新しいタグ

1. html よく使用されるフォーマット マーク タグ

以上がHTMLでのタブバーのいくつかの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。