css制作圆角按钮

最新推荐文章于 2023-07-10 17:23:28 发布

絮飘

最新推荐文章于 2023-07-10 17:23:28 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： css class menu wrapper xhtml div

本文链接：https://blog.csdn.net/comeonj/article/details/6918386

版权

CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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">
<div id="info">
 <h2>More snazzy border menus</h2>
 <div id="outer">
 <div id="navigation">
 <ul>
 <li> <a class="menu" href="#nogo">item #1 </a> </li>
 <li> <a class="menu" href="#nogo">item #2 </a> </li>
 <li> <a class="menu" href="#nogo">item #3 </a> </li>
 <li> <a class="menu" href="#nogo">item #4 </a> </li>
 <li> <a class="menu" href="#nogo">item #5 </a> </li>
 <li> <a class="menu" href="#nogo">item #6 </a> </li>
 <li> <a class="menu" href="#nogo">item #7 </a> </li>
 </ul>
 </div>
 
 <h3>TAB DOWN</h3>
 <h3>TAB UP</h3>
 <div id="navigation2">
 <ul>
 <li> <a class="menu2" href="#nogo">item #1 </a> </li>
 <li> <a class="menu2" href="#nogo">item #2 </a> </li>
 <li> <a class="menu2" href="#nogo">item #3 </a> </li>
 <li> <a class="menu2" href="#nogo">item #4 </a> </li>
 <li> <a class="menu2" href="#nogo">item #5 </a> </li>
 <li> <a class="menu2" href="#nogo">item #6 </a> </li>
 <li> <a class="menu2" href="#nogo">item #7 </a> </li>
 </ul>
 </div>
 
 </div>
 
</div>



</div>

</body>
</html>

絮飘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css制作圆角按钮

http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="en">Stu Nicholls | CSSplay | Another snazzy menu#outer {display:block; position:relative; backgro
复制链接

扫一扫