首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

yahoo登陆css布局有关问题

2012-03-09 
yahoo登陆css布局问题http://cn.yahoo.com/yahoo右边这一小块邮箱,彩票,旅行,日报订阅的div+css布局是怎么

yahoo登陆css布局问题
http://cn.yahoo.com/
yahoo右边这一小块邮箱,彩票,旅行,日报订阅的div+css布局是怎么弄得,谁能给我一个大体的思路就行,嘿嘿,有代码是最好的。。。

[解决办法]

HTML code
<!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> 

热点排行