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开头的元素)