五颜六色的按钮组成的导航条

2024-09-05 12:20:08

字体：大中小

来源：转载

供稿：网友

五颜六色的按钮组成的炫丽导航菜单，其实“按钮”并不是真正的按钮元素，而是由CSS模拟出来的，这样有得你变换样式，配上黑色的背景，看上去很酷。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>五颜六色的按钮组成的导航条</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"> 源代码下载 站长生活 站长杂志 站长访谈 程序时空 编程人生 站长时空</div>		<br class="clear"/>	</div></div></body></html>

上一篇：CSS深蓝色鼠标悬停放大的国外菜单

下一篇：CSS黑白变成彩色图片的块状导航

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注