<style>

body,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#outer{width:450px;margin:10px auto;}

#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

/* overflow:hidden;zoom:1;  作用？？ */

#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;

list-style-type:none;padding:0 20px;}

#tab li.current{color:#000;background:#ccc;}

#content{border:1px solid #000;border-top-width:0;}

/* 三个ul的外部包裹div未设置宽高。 宽度是最外层outer的，高度由ul内容撑起。 */

#content ul{line-height:25px;display:none;

margin:0 30px;

/* ul不设置margin，圆点会跑到div外面。 所以这里margin 30px */

/* ul也没有专门设置宽高，而是沿用最外层outer的宽度，高度由内容撑起。 */

padding:10px 0;

}

</style>