CSS圆角按钮 IE 火狐显示正常代码,Css代码库,德仔网

代码语言
代码分类
【Css】 CSS圆角按钮 IE 火狐显示正常
作者:Dezai.CN / 发布于2013/4/25/ 566

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Stu Nicholls | CSSplay | Another snazzy menu</title>
	<style type="text/css">
	#outer {display:block; position:relative; background:#eee; padding:2em; text-align:center;}
	#outer h2 {margin-bottom:1em;}
	#navigation {background:transparent; margin:0 auto; height:3em;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	/* */ }
	#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}
	#navigation li {display:block; float:left; margin:0 1px;}
	.snazzy {background:transparent;}
	.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}
	.b1, .b2, .b3, .b4 {display:block; font-size:1px;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	/* */ }
	.b1, .b2, .b3 {height:1px;}
	.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
	.b1 {margin:0 5px; background:#fff;}
	.b2 {margin:0 3px; border-width:0 2px;}
	.b3 {margin:0 2px;}
	.b4 {height:2px; margin:0 1px;}
	.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}
	a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}
	a.menu:hover {background:transparent; cursor:pointer;}
	a.menu:hover span {padding-top:10px; background:#888;}
	a:menu:hover b {background:#888;}
	.red {background:#c00;}
	.orange {background:#f90;}
	.yellow {background:#b8b800;}
	.green {background:#090;}
	.blue {background:#00c;}
	.indigo {background:#309;}
	.violet {background:#c6c;}
	.grey {background:#888;}
	a:hover b.red {background:#888;}
	a:hover b.orange {background:#888;}
	a:hover b.yellow {background:#888;}
	a:hover b.green {background:#888;}
	a:hover b.blue {background:#888;}
	a:hover b.indigo {background:#888;}
	a:hover b.violet {background:#888;}
	.active {padding-top:10px; background:#888; cursor:default;}
	#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	/* */ }
	#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
	#navigation2 li {display:block; float:left; margin:0 1px;}
	.pad {display:block; height:1em;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	/* */ }
	a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
	a.menu2:hover {background:transparent; cursor:pointer;}
	a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}
	a.menu2:hover .pad {height:0.2em;}
	</style>
	</head>
	<body>
	<div id="wrapper"><!-- end of page_head -->
	<div id="info">
	<h2>More snazzy border menus</h2>
	<div id="outer">
	<div id="navigation">
	<ul>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent red">item #1</span> <b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent orange active">item #2</span> <b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent yellow">item #3</span> <b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent green">item #4</span> <b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent blue">item #5</span> <b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent indigo">item #6</span> <b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b> </b></a> </li>
	<li> <a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent violet">item #7</span> <b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b> </b></a> </li>
	</ul>
	</div>
	<!-- end of navigation -->
	<h3>TAB DOWN</h3>
	<h3>TAB UP</h3>
	<div id="navigation2">
	<ul>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">item #1</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">item #2</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">item #3</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">item #4</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">item #5</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">item #6</span> </b></a> </li>
	<li> <a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">item #7</span> </b></a> </li>
	</ul>
	</div>
	<!-- end of navigation2 -->
	</div>
	<!-- end of outer -->
	</div>
	<!-- end of info -->
	<!-- end of content -->
	<!-- end of page_foot -->
	</div>
	<!-- end of wrapper -->
	</body>
	</html>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
　CSS圆角　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)