2010八月3
.toptab {
min-width:60px;/*最小宽度*/
_width:60px; /*实现min-width兼容 IE6*/
overflow: hidden;/*不出现滚动条*/
float:left;/*左浮动*/
padding:2px 6px 0 6px;/*定义元素内边框，上右下左*/
margin:0 10px 0 0;/*定义元素外边框，上右下左*/
text-align:center;/*文本居中对齐*/
height:22px;
line-height:22px; /*两个高度一致，使文本上下垂直居中 */
font-size: 12px;/*文字大小*/
background-color:#ffffff;/*元素背景颜色*/
color: #333333;/*文字颜色*/
font-weight: normal;
text-decoration: none;/*不出现下划线*/
}
ps：内联(display:inline;)属于行布局，其特性是在一行里进行布局，不能设置宽高
2010八月1
以下是宽度变化的示例，高度也可参考：
<script type="text/javascript">
function initWidth() {
var bodyWidth = document.compatMode == "BackCompat"?document.body.clientWidth:document.documentElement.clientWidth;
document.getElementById("Content").style.width = bodyWidth - 180;
}
initWidth();
if (document.attachEvent) {
window.attachEvent('onresize', initWidth);
} else {
window.addEventListener('resize', initWidth, false);
}
</script>
2010七月9
<!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>wizzer.cn</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
font-family:"宋体";
font-size:12px;
text-align:center;
}
body ul{
margin:0px auto;
}
#mean{
width:500px;
margin:0px auto;
padding:0px;
}
#mean li{
float:left;
list-style-type:none;
width:80px;
padding:1px;
line-height:25px;
}
.a{
background-color: #9DDFAA;
color: #060;
text-decoration: none;
border: 1px solid #0C6;
display: block;
}
.a:hover{
color: #FFFFFF;
background-color: #12581A;
border: 1px solid #6AFF6A;
}
.list{
width: 80px;
}
.list ul{
margin:0px auto;
padding:0px;
}
.list li{
float: left;
height: 18px;
width: 80px;
}
.b{
width: 80px;
background-color: #55BF60;
line-height:18px;
display: block;
text-decoration: none;
color: #000;
filter:Alpha(opacity=70);
}
.b:hover{
background-color: #FFFFFF;
color: #060;
text-decoration: none;
filter:Alpha(opacity=70);
}
.menu2{
height: 26px;
width: 80px;
cursor:hand;
overflow-y:hidden;
}
#keai{
width:800px;
height:50px;
background-color:#4033D7;
z-index:-1;
position: absolute;
left: 0px;
top: 35px;
}
-->
</style>
</head>
<body>
<div id="mean">
<ul>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'">
<a href="#">网站首页</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li >
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">新闻公告</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">产品信息</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">最新推荐</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">联系我们</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
