yahoo登陆css布局问题
http://cn.yahoo.com/
yahoo右边这一小块邮箱,彩票,旅行,日报订阅的div+css布局是怎么弄得,谁能给我一个大体的思路就行,嘿嘿,有代码是最好的。。。
[解决办法]
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" /> <style> body { font-size:14px; } .tab-wrap { position:relative; margin:100px 0 0 200px; padding-top:5px; width:353px; height:196px; border:1px solid #c6d8e0; background:#eef4f9; } .tab-wrap dt { float:left; _display:inline; margin-left:5px; width:80px; line-height:34px; border:1px solid #c6d8e0; background:#fff; text-align:center; } .tab-wrap dt.current { position:relative; z-index:999; height:43px; border-bottom:none; font-weight:bold; } .tab-wrap dd { display:none; position:absolute; left:5px; top:48px; padding:10px; width:321px; height:126px; border:1px solid #c6d8e0; background:#fff; } .tab-wrap dd.current { display:block; } </style> </head> <body> <dl class="tab-wrap"> <dt class="current">栏目1</dt> <dd class="current"> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </dd> <dt>栏目2</dt> <dd> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </dd> <dt>栏目3</dt> <dd> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </dd> <dt>栏目4</dt> <dd> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </dd> </dl> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> jQuery(function($){ $('dl.tab-wrap dt').mouseover(function(){ $(this).addClass('current').siblings().removeClass('current'); $('dl.tab-wrap dd:eq('+$('dl.tab-wrap dt').index(this)+')').addClass('current') }) }) </script> </body></html>