yahoo登陆css布局有关问题
日期：2014-05-17 浏览次数：20775 次
yahoo登陆css布局问题
http://cn.yahoo.com/
yahoo右边这一小块邮箱，彩票，旅行，日报订阅的div+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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
