Pure CSS+Div タグ [オリジナル]_html/css_WEB-ITnose

CSSコンテンツ：

CSSコード
1 @Charset "UTF-8"; desc: 純粋な CSS+Div タグ

8 */

9

10 /* Tongue マウス スタイル */
11 .tongue a:visited、a:active、a:link
12 {
13 color: #666666;
14 text -decoration : none ;
15 }
16 .tongue a:hover
17 { color : #FF3399 ;
18 text-decoration : ブリンク ;
19 }
20
21 /* メインコンテナのスタイル*/
22 / * 200 *300 ピクセル */
23 .tongue_main {
24 幅: 198px;
25 高さ: 298px;
27 ボーダーカラー: #FFFF00;
28 ボーダースタイル: ソリッド; -width : 1px ; }
30
31 /* 舌コンテナのスタイル*/
32 /* 200*25 px */
33 .tongue {
34 border-bottom-color : #FFFF33 ;
35 border-bottom-style : ソリッド ;
36 ボーダーボトム幅 : 1px;
37 高さ : 24px /* 25 * 60 px */
43 幅 : 55px ;
45 浮動小数点 : 17px ;
47 背景色: #FFFFFF ; 48 マージン: 0px 2px 0px ; 50 ボーダーボトムカラー: #FFFFFF; -bottom-width: 1px;
55 /* 舌下スタイル*/
56 /* 25 * 60 px */
57 .tongue_title {
58 width: 55px;
59 float: left;
61 -color: 背景: # EFEFEF ;
62 margin : 0px 2px 0px 0px ;
64
65 /* 舌タグのコンテンツスタイル*/
66 /* 198 * 273 px */
67 .tongue_content {
68 背景色: #FFFFFF;
69 幅: 180px;
71 パディング: 9px 9px;
74
7 5 .tongue_clear { クリア: 両方 ;



HTML コンテンツ:

Html 代

<; html xmlns ="http://www.w3.org/1999/xhtml" >
<; link rel ="スタイルシート" type ="text/css" href ="tongue.css" />

{
function change(id_M,id_O){
document.getElementById( ' tongue_ ' + id_M).className = " tongue_M_title " ;
document.getElementById( ' tongue_content_ ' + id_M).style.display = " block " ;
var id_o_List = String(id_O).split( ' , ' );
for (x in id_o_List){
document.getElementById( ' tongue_content_ ' + id_o_List[x]).style.display = " none " ;
document.getElementById( ' tongue_ ' + id_o_List[x]).className = " tongue_title " ;
}
}
}



<本体＞
<; div class ="tongue_main" >
新闻中心
广东新闻
深圳新闻

效果：