首页 > 代码库 > CSS 学习
CSS 学习
html 部分代码：
1 <div id="list">2 <UL>3 <LI id=c1 class=current>4 <A href="javascript:openurl2(‘c1‘, ‘/View/menu‘, ‘/undefined‘)">查看</A>5 </LI>6 <LI id=c2><A href="javascript:openurl2(‘c2‘, ‘/Manage/menu‘, ‘/undefined‘)">管理</A></LI>7 <LI id=c3><A href="javascript:openurl2(‘c3‘, ‘/Maintain/menu‘, ‘/undefined‘)">维护</A></LI>8 </UL>9 </div>
其中包括JS代码如下：
1 var currentid = "c1"; 2 function openurl2(newid, url1, url2) 3 { 4 document.getElementById(currentid).className = ""; 5 document.getElementById(newid).className = "current"; 6 currentid = newid; 7 8 window.parent.document.getElementById("menu").src = http://www.mamicode.com/url1;> 9 window.parent.document.getElementById("content").src = http://www.mamicode.com/url2;>10 }
CSS部分代码：
1 #list li { 2 float:left; 3 background:url("/img/menu_1.gif") no-repeat bottom left; 4 padding:37px 0 0 0; 5 height:29px; 6 } 7 8 #list a { 9 float:left; 10 margin-right:1px; 11 display:block; 12 padding:8px 18px 1px 18px;13 color:#424239; 14 font-weight:bold;15 font-size:13px;16 }17 18 #list a:hover {19 text-decoration:none;20 color:#0000ff;21 }22 23 #list .current {24 background:url("/img/menu_2.gif") no-repeat bottom; 25 color:#FFFFFF;26 }27 #list .current a {color:#FFFFFF;}28 #list .current a:hover{color:#ffffff}
说明如下：
JS代码的主要功能是：在“查看”、“管理”、“维护”三个选项，当选中其中某个项时，就将该项的className设置为"current"
这时就会使得CSS中的设置的list .current属性覆盖原来的list li属性。
（一）
通过浏览器 F12 调试，“查看”选项的属性如下：
element.style {
}
#list .current {
- background:
- color:
}
#list li {
- float:
- background:
- padding:
- height:
}
其中由于选中了“查看”选项，其list li中的属性被list .current中的background属性覆盖，同时color属性变成了（白色）
而“管理”属性依旧为CSS中list li定义的属性
#list li {
- float:
- background:
- padding:
- height:
}
（二）
同上，“查看”选项采用的属性如下：
#list li {
- float:
- background:
- padding:
- height:
}
“管理”选项采用的属性如下：
#list .current {
- background:
- color:
}
#list li {
- float:
- background:
- padding:
- height:
}
“查看”选项链接对应的属性：
#list a {
- float:
- margin-right:
- display:
- padding:
- color:
- font-weight:
- font-size:
}
a {
- text-decoration:
- font-size:
- font-family:
}
在“查看”选项中只有#list a覆盖了a中的font-size
“管理”选项链接对应的属性：
#list .current a {
- color:
}
#list a {
- float:
- margin-right:
- display:
- padding:
- color:
- font-weight:
- font-size:
}
a {
- text-decoration:
- font-size:
- font-family:
}
在“管理”选项中除了#list a 覆盖了a中的font-size属性，#list .current a覆盖了#list a中的属性
PS：通过改变某个元素的class，从而在CSS对该class定义，改变元素的属性。项目代码中，通过JS函数对元素的classname进行命名，从而改变该元素的属性。
例如：当从“查看”选项切换至“管理”选项时，JS函数则将“查看”元素的classname置为“”（空），将“管理”选项的classname置为“current”，在CSS中定义了#list .current，因此“管理”元素增加了#list .current属性，而“查看”
元素减少了#list .current属性，变为只含有#list li属性了。最终实现了属性的变化。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。