微软中国首页风格tab切换菜单资源-CSDN文库

共4个文件

jpg：3个

html：1个

选项卡效果，tab切换菜单

5星 · 超过95%的资源需积分: 9 157 浏览量 2008-08-27 14:43:23 上传评论 3 收藏 3KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

微软中国首页风格tab切换菜单.rar （4个子文件）

over.jpg 576B

menu.jpg 335B

wrap.jpg 2KB

微软风格tab切换内容.html 4KB

<!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=gb2312" /> <title>模仿微软中国首页的菜单,calent_zero@yahoo.com.cn</title> <meta name="author" content="calent,calent_zero@yahoo.com.cn" /> <style type="text/css"> body{margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px} p{padding:0; margin:0; line-height:1.5em} #wrap{border:1px solid #A2A7AB; margin:20px auto; padding:8px; text-align:left; width:500px; background:url(wrap.jpg)} #menu{float:left; width:22%; background:url(menu.jpg) no-repeat right center} #menu ul{list-style:none; margin:0; padding:0} #menu li{height:25px; line-height:25px; text-align:right} #menu a{color:#000; text-decoration:none; display:block; padding-right:25px} #menu a:hover,#menu .on a{background:url(over.jpg) no-repeat right center; color:#039} #content{float:right; width:70%} #content h1{font-size:16px; font-weight:normal; margin:0; padding:0; margin-bottom:8px} #content ul{list-style:none; margin:0; padding:0} #content li{padding:3px} #copy{clear:both} </style> <script type="text/javascript">  </script> </head> <body> <div id="wrap"> <div id="menu"> <ul> <li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">Products</a></li> <li id="m2"><a href="#" onmouseover="javascript:gopage(2)">Services</a></li> <li id="m3"><a href="#" onmouseover="javascript:gopage(3)">Information</a></li> <li id="m4"><a href="#" onmouseover="javascript:gopage(4)">Feadback</a></li> <li id="m5"><a href="#" onmouseover="javascript:gopage(5)">Contact us</a></li> </ul> </div> <div id="content"> <div id="c1"> <h1>Products</h1> <ul> <li>This is the Products</li> <li>This is the Products</li> <li>This is the Products</li> <li>This is the Products</li> <li>This is the Products</li> <li>This is the Products</li> </ul> </div> <div id="c2" style="display:none"> <h1>Services</h1> <ul> <li>This is the Services</li> <li>This is the Services</li> <li>This is the Services</li> <li>This is the Services</li> <li>This is the Services</li> <li>This is the Services</li> </ul> </div> <div id="c3" style="display:none"> <h1>Information</h1> <ul> <li>This is the Information</li> <li>This is the Information</li> <li>This is the Information</li> <li>This is the Information</li> <li>This is the Information</li> <li>This is the Information</li> </ul> </div> <div id="c4" style="display:none"> <h1>Feadback</h1> <ul> <li>This is the Feadback</li> <li>This is the Feadback</li> <li>This is the Feadback</li> <li>This is the Feadback</li> <li>This is the Feadback</li> <li>This is the Feadback</li> </ul> </div> <div id="c5" style="display:none"> <h1>Contact us</h1> <ul> <li>This is the Contact us</li> <li>This is the Contact us</li> <li>This is the Contact us</li> <li>This is the Contact us</li> <li>This is the Contact us</li> <li>This is the Contact us</li> </ul> </div> </div> <div id="copy"> <p>© 2008 Design by calent</p> </div> </div> </body> </html>

评论收藏

内容反馈