发新话题
打印

立体菜单

立体菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>立体菜单</title>
<style>
/*设置menu菜单*/
#menu {
    font-family:Arial;
    font-size:14px;
}
#menu a,#menu a:visited {
    text-decoration:none;    /*文字无下划线*/
    text-align:center;
    color:#fff;
    display:block;
    width:120px;
    padding:0.25em;
    margin:0.5em auto;
    background-color:#8ab;
    border:2px solid #fff;
    border-color:#def #678 #345 #cde;
    position:relation;            /*使用相对定位*/
}
#menu a:hover {
    top:2px;
    left:2px;
    border-color:#345 #cde #def #678;
}
</style>
</head>

<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
</html>
换个头像,看见广告就眼红,直接封ID。

TOP

发新话题