2024年12月4日 星期三 首页 编程论坛 技术文档 黑客安全 源代码 应用下载 电子图书 电脑硬件 游戏开发 休闲娱乐 编程网站  
‹‹ 上一主题 | 下一主题 ››
发新话题
打印

箭头菜单

Nothing

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9
1# 大中 小发表于 2008-6-30 10:38  显示全部帖子

箭头菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>箭头菜单</title>
<style type="text/css">
#menu {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    width:140px;
    margin:0 auto;
    border:solid 1px #ccc;
}
#menu a, #menu a:visited {
    text-decoration:none;
    text-align:center;
    color:#000;
    display:block;
    padding:4px;
    background-color:#fff;
    border:solid 1px #fff;
    position:relative;
}
#menu a:hover {
    border-color:#c00;
}
#menu a:hover span {
    display:block;
    position:absolute;
    height:0px;
    width:0px;
    overflow:hidden;
    border:8px solid #fff;
    top:4px;
}
#menu a:hover span.left {
    border-left-color:#c00;
    left:8px;
}
#menu a:hover span.right {
    border-right-color:#c00;
    right:8px;
}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home<span class="right"></span></a>
<a href="#"><span class="left"></span>Contact Us<span class="right"></span></a>
<a href="#"><span class="left"></span>Web Dev<span class="right"></span></a>
<a href="#"><span class="left"></span>Web Design<span class="right"></span></a>
<a href="#"><span class="left"></span>Map<span class="right"></span></a>
</div>
</body>
</html>
换个头像，看见广告就眼红，直接封ID。

TOP

Nothing

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9
2# 大中 小发表于 2008-7-5 12:06  显示全部帖子
CSS是很强的。
用#是可以自己在标签中定义的，上面所示的
<span class="menu"></span>
换个头像，看见广告就眼红，直接封ID。

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题