1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5
<title>css study</title>
6
<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
7
<meta name="Robots" content="all index follow ">
8
<meta name="Author" content="涂聚文" />
9
<link href="http://www.dupcit.com/images/css.css" rel="stylesheet" type="text/css">
10
<link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
11
<link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />
12
<link rel="Bookmark" href="favicon.ico">
13
<style>
14
body
15
{
16
padding:15px
17
}
18
#nav li
19
{
20
list-style-type:none;/*横方式显示*/
21
float:left;
22
margin-right:1px;
23
padding:3px 10px;
24
border:1px #999 solid;
25
}
26
27
#nav li a:link { COLOR: #000000; TEXT-DECORATION: none;}/*链接*/
28
#nav li a:visited { COLOR: #0066FF; TEXT-DECORATION: none;}/*已访问*/
29
#nav li a:active { COLOR: #CC33CC; TEXT-DECORATION: none;}/*悬停*/
30
#nav li a:hover { backgroud-color:#999; COLOR: #FF0000; border-bottom:1px dotted #0079cd;}/*激活*/
31
32
/*图片没有加载时,显示加载图片IE和FireFox效果会不一样*/
33
img.loading
34
{
35
background:url(images/loading.gif) no-repeat center center;
36
}
37
img.error
38
{
39
padding:2px;
40
height:auto;
41
width:auto;
42
border:1px #333 solid;
43
font-size:14px;
44
font-weight:bold;
45
color:#6633CC;
46
backgroud-color:#ccc;
47
}
48
/*字体放大*/
49
.pager
50
{
51
float:left;
52
margin-right:1px;
53
padding:5px 100px;
54
border:1px #999 solid;
55
}
56
.pager a{
57
float:left;
58
margin-right:3px;
59
margin-left:3px;
60
padding:3px 6px;
61
border:1px #666 solid;
62
margin:0px -1px 0 0;
63
text-decoration:none;
64
font-family:Tahoma,arial,sans-serif;
65
/*letter-spacing: 3mm;字间距*/
66
background-color:#CCCCCC;
67
68
}
69
.pager a:hover{
70
padding:3px 12px;
71
font-size:200%;
72
background-color:#6633CC;
73
position:relative;
74
}
75
.pager span{
76
display:none;
77
}
78
#breadcrumb{
79
80
font-size:75%;
81
}
82
#breadcrumb ul,#breadcrumb li
83
{
84
display:inline;
85
margin:0;
86
padding:0;
87
}
88
#breadcrumb li:before
89
{
90
content:">>";
91
}
92
/*ie5,ie6 的代码*/
93
*>html # breadcrumb li
94
{
95
height:1%;
96
vertical-align:top;
97
}
98
</style>
99
</head>
100
101
<body>
102
<div id="nav">
103
<ul>
104
<li id="navHome"><a href="#home">home</a></li>
105
<li id="navGuide"><a href="#guide">guide</a></li>
106
<li id="navSignup"><a href="#signup">signup</a></li>
107
<li id="navGroups"><a href="#groups">groups</a></li>
108
<li id="navBrowse"><a href="#browse">browse</a></li>
109
</ul>
110
</div>
111
<!--没有图片时,显示文字-->
112
<p><img class="loading" src="images/426551757_28e885dle7.jpg" width="240" height="180" alt="geovindu" onerror="this.className=this.className.replace('loading','error')"/></p>
113
<!-----可以放大的文字---->
114
<div class="pager">
115
<a href="#">1</a><span>|</span><a href="#">2</a><span>|</span><a href="#">3</a>
116
</div>
117
<br>
118
<br>
119
120
<!---面包屑(Breadcrumbs)--->
121
<p>
122
<div class="breadcrumb" id="breadcrumb">
123
<a href="#">css</a>
124
<ul>
125
<li><a href="#">blog</a></li>
126
<ul>
127
<li><a href="#">eight</a></li>
128
<ul>
129
<li>go out</li>
130
</ul>
131
</ul>
132
</ul>
133
</div></p>
134
</body>
135
</html>
136

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136
