CSS笔记 - fgm练习 2-7 - 简易选项卡

 

 

练习地址 http://www.fgm.cc/learn/lesson2/07.html

 

<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>