纯CSS+Div 的标签【原创】_html/css_WEB-ITnose

CSS内容：

Css　代码

 1  @charset "utf-8";
 2  /*  CSS Document  */
 3 
 4  /*
 5      author:JiYun_Lai
 6      date:2011/01/11 
 7      desc:纯CSS+Div 的标签
 8  */
 9 
10  /* 舌签鼠标样式 */
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 : blink ;
19  }
20 
21  /* 主容器样式 */
22  /* 200*300 px */
23  .tongue_main {
24  width : 198px ;
25  height : 298px ;
26  font-size : 12px ;
27  border-color : #FFFF00 ;
28  border-style : solid ;
29  border-width : 1px ; }
30 
31  /* 舌签容器样式 */
32  /* 200*25 px */
33  .tongue {
34  border-bottom-color : #FFFF33 ;
35  border-bottom-style : solid ;
36  border-bottom-width : 1px ;
37  height : 24px ;
38  background : #BCA7B0 ;
39  }
40 
41  /* 主舌签样式 默认舌签样式 */
42  /* 25 * 60 px  */
43  .tongue_M_title {
44  width : 55px ;
45  float : left ;
46  height : 17px ;
47  background-color : #FFFFFF ;
48  margin : 0px 2px 0px 0px  ;
49  padding : 5px 3px 0px   ; ;
50  border-bottom-color : #FFFFFF ;
51  border-bottom-style : solid ;
52  border-bottom-width : 1px ;
53  font-weight : 600 ; }
54 
55  /* 副舌签样式 */
56  /* 25 * 60 px  */
57  .tongue_title {
58  width : 55px ;
59  float : left ;
60  height : 17px ;
61  background-color : #EFEFEF ;
62  margin : 0px 2px 0px 0px  ;
63  padding : 5px 3px 0px  ; }
64 
65  /* 舌签内容样式 */
66  /* 198 * 273 px */
67  .tongue_content {
68  background-color : #FFFFFF ;
69  width : 180px ;
70  height : 255px ;
71  float : left ;
72  padding : 9px 9px ;
73  }
74 
75  .tongue_clear {   clear : both ; }

html　内容：

Html　代码

纯CSS+Div 的标签 title >

{
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 " ;
        }
    }
}
script >
head >



    
         新闻中心 a >
         广东新闻 a >
         深圳新闻 a >
         div >
          新闻中心 div >
          广东新闻 div >
          深圳新闻 div >         
     div >
div >
body >
html >

效果：

一览妙笔

自媒体、编剧、营销人员写作工具

下载

立即学习“前端免费学习笔记（深入）”；