CSS 学习

html 部分代码：

   <div id="list">
     <UL>
       <LI id=c1 class=current>
      <A href="javascript:openurl2('c1', '/View/menu', '/undefined')">查看</A>
       </LI>
       <LI id=c2><A href="javascript:openurl2('c2', '/Manage/menu', '/undefined')">管理</A></LI>
       <LI id=c3><A href="javascript:openurl2('c3', '/Maintain/menu', '/undefined')">维护</A></LI>
     </UL>
   </div>

其中包括JS代码如下：

var currentid = "c1";
function openurl2(newid, url1, url2)
{
    document.getElementById(currentid).className = "";
    document.getElementById(newid).className = "current";
    currentid = newid;

    window.parent.document.getElementById("menu").src = url1;
    window.parent.document.getElementById("content").src = url2;
}

 

CSS部分代码：

#list li {
    float:left; 
    background:url("/img/menu_1.gif") no-repeat bottom left; 
    padding:37px 0 0 0; 
    height:29px;
}

#list a {
        float:left; 
        margin-right:1px; 
        display:block; 
        padding:8px 18px 1px 18px;
        color:#424239; 
        font-weight:bold;
        font-size:13px;
}

#list a:hover {
    text-decoration:none;
    color:#0000ff;
}

#list .current {
    background:url("/img/menu_2.gif") no-repeat bottom; 
    color:#FFFFFF;
}
#list .current a {color:#FFFFFF;}
#list .current a:hover{color:#ffffff}

说明如下：

 JS代码的主要功能是：在“查看”、“管理”、“维护”三个选项，当选中其中某个项时，就将该项的className设置为"current"

　　这时就会使得CSS中的设置的list .current属性覆盖原来的list li属性。

（一）

 

通过浏览器 F12 调试，“查看”选项的属性如下：

 

element.style {

}

#list .current {

1. background: url("/img/menu_2.gif") no-repeat bottom;
2. color: #FFFFFF;

}

#list li {

1. float: left;
2. background: url("/img/menu_1.gif") no-repeat bottom left;    //background被覆盖
   
3. padding: 37px 0 0 0;
4. height: 29px;

}

其中由于选中了“查看”选项，其list li中的background属性被list .current中的background属性覆盖，同时color属性变成了#FFFFFF（白色）

 

而“管理”属性依旧为CSS中list li定义的属性

#list li {

1. float: left;
2. background: url("/img/menu_1.gif") no-repeat bottom left;
3. padding: 37px 0 0 0;
4. height: 29px;

}

 

 

（二）

 

同上，“查看”选项采用的属性如下：

#list li {

1. float: left;
2. background: url("/img/menu_1.gif") no-repeat bottom left;
3. padding: 37px 0 0 0;
4. height: 29px;

}

“管理”选项采用的属性如下：

#list .current {

1. background: url("/img/menu_2.gif") no-repeat bottom;
2. color: #FFFFFF;

}

#list li {

1. float: left;
2. background: url("/img/menu_1.gif") no-repeat bottom left;      //background被覆盖
   
3. padding: 37px 0 0 0;
4. height: 29px;

}

 

“查看”选项链接对应的属性：

#list a {

1. float: left;
2. margin-right: 1px;
3. display: block;
4. padding: 8px 18px 1px 18px;
5. color: #424239;
6. font-weight: bold;
7. font-size: 13px; 
   

}

a {

1. text-decoration: none;
2. font-size: 12px;                //font-size被覆盖
   
3. font-family: 微软雅黑,Arial;

}

在“查看”选项中只有#list a覆盖了a中的font-size

 

 

“管理”选项链接对应的属性：

#list .current a {

1. color: #FFFFFF;

}

#list a {

1. float: left;
2. margin-right: 1px;
3. display: block;
4. padding: 8px 18px 1px 18px;
5. color: #424239; 　　                 //color被覆盖
6. font-weight: bold;
7. font-size: 13px;

}

a {

1. text-decoration: none;
2. font-size: 12px;                        //font-size被覆盖
   
3. font-family: 微软雅黑,Arial;

}

在“管理”选项中除了#list a 覆盖了a中的font-size属性，#list .current a覆盖了#list a中的color属性

 

 

PS：通过改变某个元素的class，从而在CSS对该class定义，改变元素的属性。项目代码中，通过JS函数对元素的classname进行命名，从而改变该元素的属性。

例如：当从“查看”选项切换至“管理”选项时，JS函数则将“查看”元素的classname置为“”（空），将“管理”选项的classname置为“current”，在CSS中定义了#list .current，因此“管理”元素增加了#list .current属性，而“查看”

元素减少了#list .current属性，变为只含有#list li属性了。最终实现了属性的变化。