码迷,mamicode.com
首页 > Web开发 > 详细

CSS 学习

时间:2014-07-11 19:23:59      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   os   

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 = url1;
 9     window.parent.document.getElementById("content").src = 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属性。

(一)

 

bubuko.com,布布扣

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

 

element.style {
}
(二)
bubuko.com,布布扣
 
同上,“查看”选项采用的属性如下:
#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;
}
“管理”选项采用的属性如下:

CSS 学习,布布扣,bubuko.com

CSS 学习

标签:style   blog   http   java   color   os   

原文地址:http://www.cnblogs.com/fendou-999/p/3833488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!