css study

<!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

<title>css study</title>
6

<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

#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

/*图片没有加载时,显示加载图片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

}
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

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

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

posted @ 2009-08-16 12:31 ®Geovin Du Dream Park™ 阅读(349) 评论(0) 编辑收藏举报

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

css study

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论