JavaScriptの水平・垂直標準タブエフェクトコード_体験交流-CSSチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 12:05:59

オリジナル

1987 人が閲覧しました

<!--

* { マージン: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>