照片墙、MOOC等遇到的CSS与js方法

1、照片墙

.menu>li 管的是下一级

.menu li 无限递归，都管

height: 40px; line-height: 40px;--垂直居中，两个值相等

/* 去掉浏览器的默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

$(function(){
                $(".menu>li>a").click(function(){
                    $(this).siblings(".submenu").toggle().parent().siblings().children(".submenu").hide();
                    // this获取当前元素，就是a,sublings是获取同级元素，parent获取父级元素，children获取子元素
                });
            }
            );

jQuery遍历方法：  $(this).siblings返回当前对象的所有同级元素

 

margin:0 auto;-------------元素居中，不是center

2、css选择器

[class*= col-]  代表包含  col-  的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。

[class^=col-]  代表 以 col- 开头的类名，比如说 col-md-4

[class$=col-] 代表以 col- 结尾的类名

[class|= col]  代表以从来开头的类名（选择class属性以col开头的元素）

3、css position定位布局<