CSS做带三角形的效果

| No Comments | No TrackBacks

<runjscode><!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>
<title>bokea.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:180%; list-style:none;}
#nav { margin:30px; padding:5px; border:1px solid #0099CC; background:#BFE1FB; line-height:30px; text-align:center; width:90px;}
a{color:#0066CC;}
a:link,a:visited {text-decoration: none;}
#nav a:hover { background:#0066CC; color:#fff; padding:3px;}
#nav a span { width:0px; height:0px;}
#nav a:hover span {border-right:6px solid #0066CC;border-bottom:6px solid #fff;border-left:6px solid #0066CC;overflow:hidden; float:left; margin-right:-60px; margin-left:39px; margin-top:16px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://bokea.cn" target="_blank"><span></span>博客首页</a></li>
<li><a href="http://bokea.cn" target="_blank"><span></span>我的日志</a></li>
<li><a href="http://bokea.cn" target="_blank"><span></span>网页设计</a></li>
<li><a href="http://bokea.cn" target="_blank"><span></span>友情链接</a></li>
<li><a href="http://bokea.cn" target="_blank"><span></span>给我留言</a></li>
</ul>
</div>
</body>
</html>
</runjscode>

CODE:

<!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>
<title>bokea.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:180%; list-style:none;}
#nav { margin:30px; padding:5px; border:1px solid #0099CC; background:#BFE1FB; line-height:30px; text-align:center; width:90px;}
a{color:#0066CC;}
a:link,a:visited {text-decoration: none;}
#nav a:hover { background:#0066CC; color:#fff; padding:3px;}
#nav a span { width:0px; height:0px;}
#nav a:hover span {border-right:6px solid #0066CC;border-bottom:6px solid #fff;border-left:6px solid #0066CC;overflow:hidden; float:left; margin-right:-60px; margin-left:39px; margin-top:16px;}
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="http://bokea.cn" target="_blank"><span></span>博客首页</a></li>
    <li><a href="http://bokea.cn" target="_blank"><span></span>我的日志</a></li>
    <li><a href="http://bokea.cn" target="_blank"><span></span>网页设计</a></li>
    <li><a href="http://bokea.cn" target="_blank"><span></span>友情链接</a></li>
    <li><a href="http://bokea.cn" target="_blank"><span></span>给我留言</a></li>
  </ul>
</div>
</body>
</html>

No TrackBacks

TrackBack URL: http://www.wujianrong.com/mt-tb.cgi/2491

Leave a comment

相关文档

上一篇:CSS做阴影效果 .

下一篇:用CSS进行网页样式设计攻略全集