ホームページ > 記事 > ウェブフロントエンド > JavaScriptの水平・垂直標準タブエフェクトコード_体験交流

JavaScriptの水平・垂直標準タブエフェクトコード_体験交流

WBOYオリジナル: 2016-05-16 12:05:591948ブラウズ

<!--

* { マージン:0; パディング:0; フォントサイズ:12px; フォントの太さ:通常; }

.jj { font-weight:bolder! important; }

.box { ボーダートップカラー:#c00!重要; }

.pr { カラー:#060!重要; }

#tab01 { 位置:相対; 幅:336px; 高さ:88px; パディングトップ:15px; マージン:50px; オーバーフロー:非表示; }

#tab01 h3 { 位置:相対; z-インデックス:2; 浮動小数点:左; 高さ:14px; パディング:0 7px 0 8px; マージン左:-1px; ボーダー左:ソリッド 1px #ccc; ボーダー右:ソリッド1px #fff; テキスト整列:センター; 背景:#fff; カーソル:ポインター; }

#tab01 h3.up { 高さ:18px; パディング:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }

#tab01 div { 表示:なし; 位置:絶対; 左:0; トップ:32px; z-index:1; 幅:324px; 高さ:54px; パディング:5px; ボーダー:ソリッド 1px #ccc; カラー:#666; }

#tab01 div.up { 表示:ブロック; }

#tab02 { 位置:相対; 幅:200px; マージン:50px; ボーダー:solid #ccc; ボーダー幅:0 1px 1px; }

#tab02 h4 { 高さ:18px; 行の高さ:18px; ボーダー:ソリッド #ccc; ボーダー幅:1px 0; マージン-ボトム:-1px; テキスト整列:センター; 背景:#f6f6f6; カーソル:ポインター; }

#tab02 h4.up { カラー:#c00; }

#tab02 ol { 表示:なし; 高さ:54px; パディング:5px; カラー:#666; }

#tab02 ol.up { 表示:ブロック; }

#tab03 { 位置:相対; 幅:100px; マージン:50px; }

#tab03 h3 { 位置:相対; z-index:1; 高さ:16px; パディングトップ:4px; マージン-ボトム:-1px; ボーダー:ソリッド #ccc; ボーダー幅:1px 0 1px 1px; text-align:センター; フォントファミリー:宋体; 背景:#eee; カーソル:ポインター; }

#tab03 h3.up { z インデックス:3; カラー:#c00; 背景:#fff; }

#tab03 div.tab { 表示: なし; 位置: 絶対; 左: 99 ピクセル; トップ: 0; z インデックス: 2; 幅: 300 ピクセル; 高さ: 200 ピクセル; パディング: 5 ピクセル; ボーダー: 実線 1 ピクセル #ccc; カラー:# 666; }

#tab03 div.tab.up { 表示:ブロック; }

-->

</スタイル>

<本文>

<h3>ホームページ

<div class="jj"><p>ねえ、div の元のクラス値は無視してください。 </style>

テスト

h3 の元のクラス値を無視し続けます。

退屈

h3 には値を持たないこともできます~

バカ

div に値がなくても大丈夫です~

ホームページ

コンテナの元のクラス値は無視してください。

テスト

h3 の元のクラス値を無視し続けます。

退屈

h3 には値を持たないこともできます~

バカ

div に値がなくても大丈夫です~

ホームページ

h3 の元のクラス値は無視してください。

テスト

div の元のクラス値は無視し続けます。

退屈

h3 には値を持たないこともできます~

バカ

クラス値は同様にすることができます~

クラスを指定した後、すぐに別の div を追加できます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Webページを白黒にするフィルター_体験交流次の記事：Webページを白黒にするフィルター_体験交流

続きを見る

JavaScriptの水平・垂直標準タブエフェクトコード_体験交流

テスト

退屈

バカ

ホームページ

テスト

退屈

バカ

ホームページ

テスト

退屈

バカ

関連記事