css实现五颜六色的按钮导航

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< title > css实现五颜六色的按钮导航_网页代码站(www.webdm.cn) </ title >
< style >
* {
margin : 0 ;
padding : 0 ;
}
#wrapper {
margin : 0 auto ;
text-align : left ;
}
.container {
padding : 0 0 36px ;
}
.columns {
display : block ;
clear : both ;
overflow : hidden ;
margin : 0 ;
padding : 10px 20px ;
}
a, a:visited {
color : #333 ;
text-decoration : none
}
#header {
background : #000 ;
height : 68px ;
border : 1px solid #eee ;
margin : 0 ;
}
#header h1 {
float : left ;
text-indent : 18px ;
color : #eee ;
margin-top : 10px ;
}
#header h3 {
clear : both ;
text-align : right
}
#header h3 a {
margin-right : 10em ;
color : #CCC ;
font-weight : normal ;
}
.page-header {
padding : 0 0 8px ;
margin : 18px 0 ;
border-bottom : 1px solid #ddd ;
}
.page-header h2 {
padding : 0 ;
margin : 0 ;
font-size : 24px ;
line-height : 27px ;
letter-spacing : 0 ; text-indent : 2em ;
}
.btn, .btn:visited {
display : inline-block ;
padding : 4px 10px ;
font : bold 12px/180% Tahoma ;
color : #fff ;
text-decoration : none ;
overflow : hidden ;
-moz-border-radius : 5px ;
-webkit-border-radius : 5px ;
-webkit-box-shadow : 0 1px 3px rgba(0, 0, 0, 0.5) ;
-moz-box-shadow : 0 1px 3px rgba(0, 0, 0, 0.5) ;
text-shadow : 0 -1px 1px rgba(0, 0, 0, 0.25) ;
border-bottom : 1px solid rgba(0, 0, 0, 0.25) ;
cursor : pointer ;
}
.btn:hover {
background-color : #111 ;
}
.btn:active {
top : 1px ;
}
.green.btn, .green.btn:visited {
background-color : #91bd09 ;
}
.green:hover {
background-color : #749a02 ;
}
.blue, .blue:visited {
background-color : #2daebf ;
}
.blue:hover {
background-color : #007d9a ;
}
.red, .red:visited {
background-color : #e33100 ;
}
.red:hover {
background-color : #872300 ;
}
.magenta, .magenta:visited {
background-color : #a9014b ;
}
.magenta:hover {
background-color : #630030 ;
}
.orange, .orange:visited {
background-color : #ff5c00 ;
}
.orange:hover {
background-color : #d45500 ;
}
.yellow, .yellow:visited {
background-color : #ffb515 ;
}
.yellow:hover {
background-color : #fc9200 ;
}

</ style >
</ head >
< body >
< div id ="wrapper" >
< div class =" container" >
< div class ="columns" style ="background: #333; padding:30px 20px" > < a class ="btn" > 代码下载 </ a > < a class ="blue btn" > 站长生活 </ a > < a

class ="magenta btn" > 站长杂志 </ a > < a class ="red btn" > 站长访谈 </ a > < a class ="orange btn" > 程序时空 </ a > < a class ="yellow btn" > 编程人生 </ a > < a

class ="btn blue" > 网页代码站 </ a ></ div >
< br class ="clear" />
</ div >
</ div >
</ body >
</ html >
< br >
< p >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ </ p >

文章来自：http://www.webdm.cn/webcode/d353c692-75e1-4304-bb44-4c201a16c0ce.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/10/1931701.html