CSS做带三角形的效果

<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>

AddThis Social Bookmark Button

相关文档(Relevant Entries)
CSS缩写技巧
如何敏捷你的用户界面开发
Powering Javascript UI with CSS
预览待上传的本地图片
DIV+CSS网页布局常用的方法与技巧
采用DIV+CSS布局的好处
用CSS进行网页样式设计攻略全集
CSS做阴影效果
WoW Powerleveling
Posted on May 13, 2007 11:10 AM | | | Comments (0) | | TrackBacks (0)

引用地址(TRACKBACKS)
 
TrackBack URL for this entry:
http://www.wujianrong.com/mt-tb.cgi/5346

发布评论(ADD YOUR COMMENTS)
 
感谢您参与评论;发表您的意见时请保持文章的相关性;不相关的或是单纯宣传的内容可能会被删掉。您的E-mail只是用来确认您发表的文章,不会出现在网页上。
Please keep your comments relevant to this blog entry. Email addresses are never displayed, but they are required to confirm your comments.

称呼(Name):      记住我的个人信息(Remember)
邮箱(Email):
网址(URL):
评论(Add your comments):

相关内容
广告计划