照片墙、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定位布局

relative：相对定位

相对于流布局再定位

原本所占的空间仍保留

absolute：绝对定位

以距离它最近的设置了定位属性的父元素为基准

脱离标准流

 

位置属性：top、left、z-index（有了position后才起作用）；z-index的取值越大越在上层

4、JavaScript

<