div+css_html/css_WEB-ITnoseで作成したタブ

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

另一种

別の

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Tab2.aspx.cs" Inherits="Tab2" %>



< html xmlns ="http://www.w3.org/1999/xhtml" >


< script type ="text/javascript" >

< style type ="text/css" >
/**//* Tab キーの属性*/
#tab {}{ width:900px; 高さ:30ピクセル; 位置:相対; margin:0px auto;} /**//*コンテナの高さ、幅などを設定します。*/
html > body #tab {}{ width:900px; }/**//*IE6と互換性あり: IE6では幅が足りません*/
#tab div {}{ 位置:絶対; 上:26ピクセル; 左:0; 幅:900ピクセル; height:300px;}/**//*操作対象のコンテナの高さ、幅などを設定します*/
#tab div {}{ display:none; }/**//*デフォルトで操作コンテナを非表示に設定します。操作コンテナの表示制御にクラスが使用され、クラスの優先順位が ID セレクターよりも低いため、ID は使用されません。*/
#tab .block {}{ display:block; パディング左:5px; パディング右:5px; padding-top:2px;}/**//*操作対象として選択されたコンテナ*/
#tab h3 {}{ float:left; 幅:75ピクセル; 高さ:26ピクセル; 行の高さ:26px; マージン:0 -1px 0 0; フォントサイズ:12px; カーソル:ポインタ; フォントの太さ:標準; テキスト整列:中央; 色:#00007F; 背景:#eee url(menu_bg.gif) 繰り返しなし; font-weight:bold;}/**//*デフォルトのタイトルスタイル*/
#tab .up {}{ background:#fff url(x20061212105231.gif) no-repeat; }/**//*選択されたタイトルスタイル*/

/**//*リストの内容を変更する*/
#tab ul {}{ margin:0px; リストスタイル:なし; パディング:0;}
#tab li {}{ float:left; 幅:50%; 背景: }
#tab li a {}{ display:block; 幅:84%; 高さ:25ピクセル; 行の高さ:25px; マージン左:8%; フォントサイズ:12px; テキスト装飾:なし; カラー:#333;テキストインデント:10px; }
#tab li a:hover {}{ text-decoration:underline; color:#f00;}



铁板牛排 h3 >




田心鱼儿

2

萧萧小雨

3

禾火木风 h3 >

4