|
|
| (10 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| |
| - | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
| |
| - | <head>
| |
| | | | |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| - | <title>AHUT</title>
| |
| - |
| |
| - | <link rel="stylesheet" href="style.css" />
| |
| - |
| |
| - |
| |
| - |
| |
| - | <style>
| |
| - | .menu { height: 45px; display: block; }
| |
| - | .menu ul { list-style: none; padding: 0; margin: 0; }
| |
| - | .menu ul li { float: left;
| |
| - | overflow: hidden; position: relative; text-align: center; line-height: 45px; }
| |
| - | .menu ul li a {
| |
| - | position: relative; display: block; width: 102px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
| |
| - | .menu ul li a span {
| |
| - | position: absolute; left: 0; width: 110px; }
| |
| - | .menu ul li a span.out { top: 0px; }
| |
| - | .menu ul li a span.over, .menu ul li a span.bg {
| |
| - | top: -45px; }
| |
| - |
| |
| - |
| |
| - | #menu { background:url(images/bg_ma.jpg) scroll 0 -1px repeat-x; border:1px solid #CCC; }
| |
| - | #menu ul li a { color: #000; }
| |
| - | #menu ul li a span.over { color: #FFF; }
| |
| - | #menu ul li span.bg { height: 45px; background: url(images/bg_over.gif) center center no-repeat; }
| |
| - |
| |
| - | #menu2 { background:#45A8DF; }
| |
| - | #menu2 ul li a { color:#FFF; }
| |
| - | #menu2 ul li a span.over { background: #A6DD00; color:#333; }
| |
| - | #menu2 ul li.nav1 a span.over { background: #fea274; }
| |
| - | #menu2 ul li.nav2 a span.over { background: #b0bbba; }
| |
| - | #menu2 ul li.nav3 a span.over { background: #a3f091; }
| |
| - | #menu2 ul li.nav4 a span.over { background: #86dbf9; }
| |
| - | #menu2 ul li.nav5 a span.over { background: #e0caf0; }
| |
| - | #menu2 ul li.nav6 a span.over { background: #9dace9; }
| |
| - | #menu2 ul li.nav7 a span.over { background: #9dace9; }
| |
| - | #menu2 ul li.nav8 a span.over { background: #e0caf0; }
| |
| - | body {
| |
| - | background-image: url(images/bg_me.jpg);
| |
| - | margin-left: 0px;
| |
| - | margin-top: 0px;
| |
| - | }
| |
| - | .STYLE1 {font-size: 10px}
| |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
| |
| - | <script language="javascript">
| |
| - | $(document).ready(function() {
| |
| - |
| |
| - | $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
| |
| - |
| |
| - |
| |
| - | $("#menu li a").each(function() {
| |
| - | $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
| |
| - | });
| |
| - |
| |
| - | $("#menu li a").hover(function() {
| |
| - |
| |
| - | $(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏
| |
| - | $(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
| |
| - | $(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示
| |
| - |
| |
| - | }, function() {
| |
| - |
| |
| - | $(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
| |
| - | $(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏
| |
| - | $(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏
| |
| - | });
| |
| - |
| |
| - |
| |
| - |
| |
| - | $("#menu2 li a").wrapInner( '<span class="out"></span>' );
| |
| - |
| |
| - | $("#menu2 li a").each(function() {
| |
| - | $('<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
| |
| - | });
| |
| - |
| |
| - | $("#menu2 li a").hover(function() {
| |
| - | $(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏
| |
| - | $(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示
| |
| - |
| |
| - | }, function() {
| |
| - | $(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示
| |
| - | $(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏
| |
| - | });
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - | </head>
| |
| - | <body>
| |
| - | <table height="621" align="center" width="950" >
| |
| - | <tr>
| |
| - | <td width="950" height="589" valign="top">
| |
| - | <table width="950" border="0" align="center">
| |
| - | <tr>
| |
| - | <td width="950" height="42" align="center"><img src="images/bg_head.gif" alt="" width="950" height="42" /></td>
| |
| - | </tr>
| |
| - | </table>
| |
| - | <table width="950" border="0" align="center" >
| |
| - | <tr >
| |
| - | <td width="178" height="61" valign="top"> </td>
| |
| - | <td width="818" height="61" align="right" valign="top" ><div id="content">
| |
| - | <div id="menu" class="menu">
| |
| - | <ul>
| |
| - | <li><a href="index.html">HOME</a></li>
| |
| - | <li><a href="http://www.baidu.com">TEAM</a></li>
| |
| - | <li><a href="http://www.baidu.com">PROJECT</a></li>
| |
| - | <li><a href="http://www.baidu.com">PARTS</a></li>
| |
| - | <li><a href="http://www.baidu.com">MODEUNG</a></li>
| |
| - | <li><a href="http://www.baidu.com">NOTEBOOK</a></li>
| |
| - | <li><a href="http://www.baidu.com">ATTRIBUTIONS</a></li>
| |
| - | <li><a href="http://www.baidu.com">SAFETY</a></li>
| |
| - | <p> </p>
| |
| - | </ul>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div align="left"></div></td>
| |
| - | </tr>
| |
| - | </table>
| |
| - | <p> </p>
| |
| - | <p> </p>
| |
| - | <p><br />
| |
| - | <br />
| |
| - | </p>
| |
| - | </body>
| |
| - | </html>
| |
"
