CSS + div tab_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:33:171166ブラウズ


<; html xmlns ="http://www.w3.org/1999/xhtml" >
<;頭>
<;タイトル>  新しい ドキュメント
/**//*クレジット: ダイナミック ドライブ CSS ライブラリ */
/**//*URL: http://www.dynamicdrive.com/style/ */
#modernbricksmenu{}{
パディング: 0;
幅: 100%;
背景: 透明。
voice-family: ""}"";
音声ファミリー: 継承;
}
#modernbricksmenu ul{}{
font: bold 11px Arial;
マージン:0;
左マージン: 40px; /**//*最初のメニュー項目とブラウザの左端の間の余白*/
パディング: 0;
リスト形式: なし。
}
#modernbricksmenu li{}{
表示: インライン;
余白: 0 2px 0 0;
パディング: 0;
テキスト変換:大文字;
}
#modernbricksmenu a{}{
float: left;
表示: ブロック;
色: ホワイト;
余白: 0 1px 0 0; /**//*各メニュー項目間の余白*/
パディング: 5px 10px;
テキスト装飾: なし。
文字間隔: 1px;
背景色: 黒; /**//*デフォルトのメニュー色*/
border-bottom: 1px solid white;
}
#modernbricksmenu a:hover{}{
背景色: グレー; /**//*メニューホバーbgcolor*/
}
#modernbricksmenu #current a{}{ /**//*現在選択されているタブ*/
背景色: #D25A0B; /**//*茶色のテーマ*/
境界線の色: #D25A0B; /**//*茶色のテーマ*/
}
#modernbricksmenuline{}{
クリア: 両方;
パディング: 0;
幅: 100%;
高さ: 5ピクセル;
行の高さ: 5px;
背景: #D25A0B; /**//*茶色のテーマ*/
}






 




td {}{
font-size: 12px;
カラー: #000000;
行の高さ: 150%;
}
.sec1 {}{
背景色: #EEEEEE;
カーソル: 手;
カラー: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
右側の境界線: 1 ピクセルの実線グレー。
border-bottom: 1px solid #FFFFFF
}
.sec2 {}{
background-color: #D4D0C8;
カーソル: 手;
カラー: #000000;
border-left: 1px solid #FFFFFF; 
border-top: 1px solid #FFFFFF; 
右側の境界線: 1 ピクセルの実線グレー。 
font-weight: 太字; 
}
.main_tab {}{
背景色: #D4D0C8;
カラー: #000000;
border-left:1px solid #FFFFFF;
右側の境界線: 1 ピクセルの実線グレー。
border-bottom: 1px ソリッドグレー; 
}

<スクリプト言語 =javascript >
function secBoard(n)
{
for(i=0;i secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}

< table border =0 cellpacing =0 cellpadding =0 width =549 id =secTable >
< tr height =20 align =center >  
< td class =sec2 width =10% onclick ="secBoard(0)" > TBODY标记について
< td class =sec1 width =10% onclick ="secBoard(1)" > セルセット について
< td class =sec1 width =10% onclick ="secBoard(2)" > tBodiesset に関するもの
< td class =sec1 width =10% onclick ="secBoard(3)" > 表示プロパティに関する


< table border =0 cellspacing =0 cellpadding =0 width =549 height =240 id =mainTable class =main_tab >
< tbody style ="display:block;" >  
< tr>  
< td align =center valign =top >  
< br>
ここに内容を追加します。省略します。1

   
< tr>  
< td align =center valign =top >  
< br>
ここに内容を追加します。省略します。2

   
< tr>  
< td align =center valign =top >  
< br>
ここに内容を追加しますので、省略します。3

   
< tr>  
< td align =center valign =top >  
< br>
ここに内容を追加します。略します。4

 

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

関連記事

続きを見る