首頁新隨筆新文章聯(lián)系聚合

posts - 30,comments - 147,trackbacks - 0

2008年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

常用鏈接

留言簿(8)

隨筆檔案(30)

關注的blog

朋友的地盤

Gary
huazi
瑩子
愛是恒久忍耐又有恩慈。生活沒有什么了不起的大道理，只有充滿智慧的小細節(jié)。enjoy your life.

搜索

積分與排名

積分 - 406878
排名 - 137

閱讀排行榜

評論排行榜

頁簽實例

在網(wǎng)上找了好久的頁簽實例，終于找到一個可以用的html格式的頁簽！貼上來，以做備用！

1

<HTML>
2

<style>
3

body {font-size:12px;font-family:宋體}
4

ul.TabBarLevel1{
5

list-style:none;
6

margin:0;
7

padding:0;
8

height:29px;
9

10

}
11

ul.TabBarLevel1 li{
12

float:left;
13

padding:0;
14

height:29px;
15

margin-right:1px;
16

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;
17

}
18

ul.TabBarLevel1 li a{
19

display:block;
20

line-height:29px;
21

padding:0 20px;
22

color:#333;
23

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
24

white-space: nowrap;
25

}
26

ul.TabBarLevel1 li.Selected{
27

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
28

}
29

ul.TabBarLevel1 li.Selected a{
30

background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
31

}
32

33

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
34

color:#333;
35

}
36

ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
37

color:#F30;
38

text-decoration:none;
39

}
40

ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
41

color:#000;
42

}
43

ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
44

color:#F30;
45

text-decoration:none;
46

}
47

div.HackBox {
48

padding : 2px 2px ;
49

border-left: 2px solid #6697CD;
50

border-right: 2px solid #6697CD;
51

border-bottom: 2px solid #6697CD;
52

height:200px;
53

width:359px;
54

display:none;
55

}
56

57

</style>
58

59

60

61

<div id="Whatever">
62

<ul class="TabBarLevel1" id="TabPage1">
63

<li id="Tab1" class="Selected"><a href="#" onMouseover="javascript:switchTab('TabPage1','Tab1');">子虛烏有</a></li>
64

<li id="Tab2"><a href="#" onMouseover="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
65

<li id="Tab3"><a href="#" onMouseover="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">觀</font><font color="#00fffa">來</font></B></a></li>
66

<li id="Tab4"><a href="#" onMouseover="javascript:switchTab('TabPage1','Tab4');">我太低調</a></li>
67

</ul>
68

<div id="cnt">
69

<div id="dTab1" class="HackBox">我為每一次的快樂而哭泣，我為每一次的悲傷而微笑。
70

</div>
71

<div id="dTab2" class="HackBox" style="display:block">【※卡秀兒精品屋※】
72

73

</div>
74

<div id="dTab3" class="HackBox">學習是件頭疼的事，為了能活下去我不得不學習
75

76

</div>
77

<div id="dTab4" class="HackBox">仍然揀盡寒枝不肯安歇微帶著后悔寂寞沙洲我該思念誰
78

</div>
79

</div>
80

</div>
81

//Switch Tab Effect
83

function switchTab(tabpage,tabid){
84

var oItem = document.getElementById(tabpage);
85

for(var i=0;i<oItem.children.length;i++){
86

var x = oItem.children(i);
87

x.className = "";
88

var y = x.getElementsByTagName('a');
89

y[0].style.color="#333333";
90

}
91

document.getElementById(tabid).className = "Selected";
92

var dvs=document.getElementById("cnt").getElementsByTagName("div");
93

for (var i=0;i<dvs.length;i++){
94

if (dvs[i].id==('d'+tabid))
95

dvs[i].style.display='block';
96

else
97

dvs[i].style.display='none';
98

}
99

}
100

101

</script>
102

</HTML>
103

104

posted on 2008-06-03 13:59 kenzhang 閱讀(860) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理