1回答

• 

  水里有条鱼

  2016-07-26 10:36:42

        *{padding:0px;margin:0px;font:12px normal "microsoft yahei";}/*normal是使用默认粗细的意思*/

        #tabs{width:290px;height:150px;padding:5px;margin:20px;}

        #tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}/* 定义tabs 的子后代ullist-style意思是去掉列表默认的小圆点，display：block定义块状元素，块状元素的长宽高都可以定义，line-height是定义行高，后面是定义上边边框为2px 马鞍棕色 实心的线*/

        

        #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align:center; }/*cursor:pointer意思就是鼠标放上去变成小手的形状，高度和行高的值一样的话就垂直居中了，margin设置了距离边界的距离上下为0左右为3 然后是设置边框 下边框为空 display定义为内联块状元素，然后设置宽度 很文本居中 */

        #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff ;}/*说白了这个就是设置第一个选择框的样式，不过选择器也是有优先级的，加入都为同一个元素设置颜色就会显示id的 然后是.xx  其次是便签选择器*/

       #tabs div{height:120px;line-height:25px;border:1px solid #336699;border-top:none;padding:5px;  }     

       .hide{display:none;} /*此元素不会被显示*/  

  ---------------来自 程序爱好者11 的笔记 http://www.imooc.com/note/10?sort=sugg&ower=all

  你说的把不同整体连起来 是这个 *{padding:0px;margin:0px;font:12px normal "microsoft yahei";}

  里面的margin:0px; 通俗来说意思是外部没间隔，*是默认所有节点都会采用的样式

  2 0

  水里有条鱼 回复kx0001...

  先看看这个http://www.imooc.com/qadetail/77334 再来说明为什么除去list-style：none；后什么变化都没有，因为有一个东西也能起同样的作用display: inline-block;//将元素设置为内联块状元素。什么是内联块状元素？常用的<img>、<input>，所以象征着li的圆点就不见了。建议学习 HTML+CSS基础课程 对加深理解css很有帮助

  2016-07-29 18:18:32

  共 2 条回复 >