9.18学习笔记
继续弹性盒子布局
flex-wrap
父标签{
flex-wrap:nowrap; /*不换行(默认),放不下就缩小子标签*/
flex-wrap:wrap; /*换行,按正常书写顺序*/
flex-wrap:wrap-reverse; /*换行,第一行在下方*/
}
align-content(多行子标签的情况)
父标签{
align-content:flex-start; /*顶部(不是绝对的)*/
align-content:flex-end; /*底部(不是绝对的)*/
align-content:center; /*居中*/
align-content:stretch; /*充满*/
align-content:space-between;/*两端对齐*/
align-content:space-around; /*两端对齐且有间距*/
}
order(自定义排序)
子标签{
order:1; /*数字越小,越靠前排列*/
}
align-self(垂直,可以覆盖父标签的align-items效果)
子标签{
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;
align-self:stretch;
}
animate.css动画库
1. 下载animate.css文件,然后link引入
2. <div class="animated bounceIn infinite"></div> infinite动画效果无限次
3. 动画去官网找名字
https://daneden.github.io/animate.css/
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:动画延迟时间(等待时间)
onePage(锚链接的平滑过渡)
1. 引入jquery,jquery.nav两个文件
2. 在底部的script标签中补充一句代码:
$(function(){
$("ul的选择器").onePageNav();
})
CSS预处理器(Less)
1. 功能更强大的CSS编写方式
2. 预处理器最终会将我们写的这种新型样式代码转换为普通的CSS(编译)
3. 主流的预处理器:Sass,Less,Stylus
4. 在less中也是可以直接写css代码的
5. HTML只认识CSS,所以Less是不能直接使用的
//变量:存储一个值,便于重复利用
@navbarBgColor:#ccc;
div{
}
//变量名称重复,后面的值会覆盖前面的值
@navbarBgColor:red;
//二次解析(最终还是红色)
@mycolor:'navbarBgColor';
li{
color:@@mycolor;
}
//这是Less注释
/*这是CSS注释*/
//mixins(函数,必须以点或者#开头) 最好用点开头
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
#header{
width:100px;
height: 100px;
.border_radius(50%);
}
#footer{
width:1000px;
height: 200px;
.border_radius;/*会用那个默认值*/
.myborder(2px,dotted,red);
}
.myborder(@width:1px,@style:solid,@color:black){
border:@arguments;/*代表所有变量,等价于下一行代码*/
// border:@width @style @color;
}
//嵌套
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:rgba(0, 0, 255, 0.753);} /*ul.cba{}*/ 不空格，找名字一样的自己
&:hover{
li{
background: #ccc;
}
}
}
//运算
@width:100px;
@height:100px;
ul{
width:@width - 2; 注意减号的两边都要空格
height:@height - 2;
.myborder;
}
//命名空间(为了解决名字冲突的问题,以点或#开头) 最好用#开头
.gys{
.shadow(@x,@y,@blur,@size,@color){
box-shadow: @arguments;
}
}
#xy{
.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);
}
