网页设计tab菜单
网页设计菜鸟求解我做的一个tab菜单的示例但是还没有设置好！我实在不知道怎样设计了，求解!
<!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">
#home {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 10px;
}
#tabnav {
list-style-type: none;
margin: 0px;
padding-left: 0px;/*左侧无空隙 */
padding-bottom: 23px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #11a3ff;/*菜单的下边框*/
font-size: 12px;
}
#tabnav li {
float: left;
height: 22px;
background-color: #a3dbff;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
border: 1px solid #11a3ff;
}
#tabnav a:link, #tabnav a:visited {
display: block;
color: #006eb3;
text-decoration: none;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
#tabnav a:hover {
color: #FFFFFF;
background-color: #006eb3;
}
#tabnav .home a:hover,#tabnav .news a:hover,#tabnav .sports a:hover,#tabnav .music a:hover,#tabnav .blog a:hover{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
background-color: #FFF;
color: #000;
}
#content {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #11A3FF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #11A3FF;
border-bottom-color: #11A3FF;
padding: 15px;
font-size: 12px;
}
</style>
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="#">首页</a></li>
<li class="news"><a href="#">新闻</a></li>
<li class="sports"><a href="#">体育</a></li>
<li class="music"><a href="#">音乐</a></li>
<li class="blog"><a href="#">博客</a></li>
</ul>
<div id="content">
<div id="header">
<h1 align="center" >Head Line</h1>
</div>
<p><span id="ti">T</span>he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.</p>
</div>
</body>
</html>
[解决办法]
什么问题？
[解决办法]
是啊，都不知道你说的啥问题，不过你还是把代码先简化简化吧。
[解决办法]
参考下
jquery的
- HTML code
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"><!-- .wrapper { margin:80px auto; width:400px; height:300px; border:1px solid #aaa; } .head { height:30px; background:#ddd; border-bottom:1px solid #aaa; line-height:30px; text-align:center; font-size:14px; font-weight:bold; } .head li { float:left; width:100px; } .head li.cur { position:relative; top:0; _top:1px; left:1px; background:#fff; border:1px solid #aaa; border-bottom:none; overflow:hidden; } .head li a { display:block; width:100px; } .con { clear:both; padding:10px; } .con li { display:none; } .con .db { display:block; } --></style> </head> <body> <div class="wrapper"> <ul class="head"> <li class="cur"><a href="#">Asp.net</a></li> <li><a href="#">PHP</a></li> <li><a href="#">mySql</a></li> </ul> <ul class="con"> <li class="db">1</li> <li>2</li> <li>3</li> </ul> </div> <script> $('.head li').click(function(){ $(this).addClass('cur').siblings().removeClass('cur'); $('.con li:eq('+$(this).index()+')').show().siblings().hide(); return false }) </script> </body></html>
[解决办法]
用这个软件,事半功倍 NewsGator TopStyle Pro