看看神奇的CSS.用一张图片做出这样的效果.

最新推荐文章于 2022-04-08 18:17:09 发布

DMPX

最新推荐文章于 2022-04-08 18:17:09 发布

阅读量1.2k

点赞数

文章标签： class float xhtml html url menu

<!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>测试页 </title>
    <style type="text/css">
*{margin:0px;padding:0px;}
        #topmenu { height: 87px;width:100%; background:url(http://www.s-tone.cn/attachments/month_0707/3200775144455.png) repeat-x; }

        #menu{ float: right; margin: 0; padding: 8px 0 0 0; list-style: none; }
        #menu li { float: left; padding-right: 4px; }
        #menu a { float: left; width: 72px; font-size:12px; height: 66px; text-align: center;
               text-decoration: none; color: #FFF; padding-top: 46px; he/ight: 17px;
               overflow: hidden; background: url(http://www.s-tone.cn/attachments/month_0707/4200775144445.png) no-repeat; }


  #menu a.home { background-position: -15px -8px; }
  #menu a.home:hover{ background-position: -15px -95px; }
  #menu a.back { background-position: -88px -8px; }
  #menu a.back:hover { background-position: -88px -95px; }
  #menu a.forwd { background-position: -161px -8px; }
  #menu a.forwd:hover { background-position: -161px -95px; }
  #menu a.manage { background-position: -237px -8px; }
  #menu a.manage:hover { background-position: -237px -95px; }
  #menu a.check { background-position: -310px -8px; }
  #menu a.check:hover { background-position: -310px -95px; }
  #menu a.change { background-position: -386px -8px; }
  #menu a.change:hover{ background-position: -386px -95px; }
  #menu a.logout { background-position: -459px -8px; }
  #menu a.logout:hover{ background-position: -459px -95px; }
  #menu a.exit { background-position: -532px -8px; }
  #menu a.exit:hover { background-position: -532px -95px; }

</style>
</head>
<body>
    <div id="topmenu">
        <ul id="menu">
                <li><a class="home" href="#">首页</a> </li>
                <li><a class="back" href="#">后退</a> </li>
                <li><a class="forwd" href="#">前进</a> </li>
                <li><a class="manage" href="#">管理菜单</a> </li>
                <li><a class="check" href="#">网络检测</a> </li>
                <li><a class="change" href="#">更改密码</a> </li>
                <li><a class="logout" href="#">注销</a> </li>
                <li><a class="exit" href="#">退出系统</a> </li>
        </ul>
    </div>
</body>
</html>