css study
文章来源：365jz.com 点击数：199 更新时间：2009-09-24 22:26 参与评论
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效果会不一样*/
33img.loading
34{
35 background:url(images/loading.gif) no-repeat center center;
36}
37img.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
<!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
body15
{
16
padding:15px17
}18
#nav li19
{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.loading34
{35
background:url(images/loading.gif) no-repeat center center;36
}37
img.error38
{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
.pager50
{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 li83
{84
display:inline;85
margin:0;86
padding:0;87
}88
#breadcrumb li:before89
{90
content:">>";91
}92
/*ie5,ie6 的代码*/93
*>html # breadcrumb li94
{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
Tag标签: css
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
