[CSS]CSS Cookbook例子:创建文字导航菜单和翻转特效

比较常用

[CSS]CSS Cookbook例子:创建文字导航菜单和翻转特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<style type="text/css"><!--   

#navsite p {

  display: none

}   

#navsite {   

  font-family:Verdana, Arial, Helvetica, sans-serif;   

  font-size:0.7em;   

  font-weight:bold;   

  width:12em;   

  border-right:1px solid #666;   

  padding:0;   

  margin-bottom:1em;   

  background-color:#9cc;   

  color:#333;   

}   

#navsite ul {   

  list-style:none;   

  margin:0;   

  padding:0;   

}   

#navsite ul li {   

  margin:0;   

  border-top:1px solid #003;   

}   

#navsite ul li a {   

  display:block;   

  padding:2px 2px 2px 0.5em;   

  border-left:10px solid #369;   

  border-right:1px solid #69c;   

  border-bottom:1px solid #369;   

  background-color:#036;   

  color:#fff;   

  text-decoration:none;   

  width:100%;   

}   

html>body #navsite ul li a {   

  width:auto;   

}   

#navsite ul li a:hover {   

  border-left:10px solid #036;   

  border-right:1px solid #69c;   

  border-bottom:1px solid #369;   

  background-color:#69f;   

  color:#fff;   

}   

--></style>

</head>  

<body>  

<div id="navsite">  

  <p>Site navigation:</p>  

  <ul>  

    <li><a href="/">Home</a></li>  

    <li><a href="/about/">About</a></li>  

    <li><a href="/archives/">Archives</a></li>  

    <li><a href="/writing/">Writing</a></li>  

    <li><a href="/speaking/">Speaking</a></li>  

    <li><a href="/Contact/">Contact</a></li>  

  </ul>  

</div>  

</body>  

</html>

你可能感兴趣的:(导航菜单)