CSS 学习

浏览数：17 / 时间：2015年06月09日

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}