#1 继续弹性盒子布局
父标签{
flex-warp:nowrap; /* 不换行(默认)，放不下就缩小子标签 */
flex-warp:warp; /* 换行，按正常书写顺序 */
flex-warp:warp-reverse; /* 换行，第一行在下方 */
}
#2 align-content(多行子标签的情况)
父标签{
align-content:flex-start; /* 顶部(不是绝对的) */
align-content:flex-end; /* 底部(不是绝对的) */
align-content:center; /* 居中 */
align-content:stretch; /* 充满 */
align-content:space-between; /* 两端对齐 */
align-content:space-around; /* 两端对齐且有间距 */
}
#3 order(自定义排序)
子标签{
order:1; /* 数字越小，越靠前排列 */
}
#4 align-self(垂直，可以覆盖父标签的align-items效果)
子标签{
align-self:flex-start;
align-self:flex-end;
align-self:baseline;
align-self:stretch;
}
#5 animate.css动画库
1. 下载animate.css文件，然后link引入
2. <div class="animation bouncein"></div>
3. 动画去官网找名字
#6 wow.js动画库(基于animate.css)
1. link引入animate.css
2. 在body后面引入wow.js文件
<script src="wow.js"></script>
3. 在引入wow.js的后面写一段js代码
<script>
new WOW().init();
</script>
4. <div class="wow bounceIn" data-wow-delay=".5s"></div>
data-wow-iteration:执行动画的次数
data-wow-duration:动画执行时间(动画的速度)
data-wow-delay:动画延迟时间(动画)
#7 onePage(锚链接的平滑过渡)
1. 引入jquery,jquery.nav两个文件
2. 在底部的script标签中补充一句代码：
$(function(){
$("ul的选择器").onePageNav();
})
#8 css预处理器(less)
1. 功能更强大的css编写方式
2. 预处理器最终会将我们学的这种新型样式代码转换为普通的css
3. 主流的预处理器：Sass,Less,Stylus
4. 在less中也是可以直接写css代码的
5. HTML只认识CSS，所以Less是不能直接使用的
#9 //变量：存储一个值，便于重复利用
@navbarBgColor:#ccc;
div{
background-color:@navbarBgColor;
}
//变量名称重复，后面的值会覆盖前面的值
@navbarBgColor:red;
//二次解析(最终还是红色)
@mycolor:'navbarBgColor';
li{
color:@@mycolor;
}
//这是Less注释
/* 这是css注释 */
#10 //mixins(函数)
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
#header{
100px;
height:100px;
.border_radius(50%);
}
.myborder(@width):1px,@style:solid,@color:back){
border:@arguments; /* 代表所有变量，等价于下一行代码 */
//border:@width @style @color;
}
#11 //嵌套
ul{
background:red; /* ul背景色 */
&：hover{background:pink;} /* ul:hover{} */
>a{color:green;} /* ul>a{} */
li{background:yellow;} /* ul li{} */
.abc{color:purple;} /* ul .abc */
&.cba{color:purple;} /* ul .cba{} */
&:hover{
li{
background:#ccc;
}
}
}
#12 //运算
@100px;
@height:100px;
ul{
@width - 2;
height:@height - 2;
.myborder;
}
#13 //命名空间(为了解决文字冲突的问题)
#gys{
.shadow(@x,@y,@blur,@size,@color){
box-shadow:@arguments;
}
}
#jht{
.shadow(@x,@y,@blur,@color){
text-shadow:@x @y @color;
}
}
#main{
#gys>.shadow(0,0,5px.5px,red);
}
#aside{
#xy>.shadow(0,0,5px,blue;)
}