zoukankan      html  css  js  c++  java
  • 9.18(day12)

    #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;)
    }
  • 相关阅读:
    python note 30 断点续传
    python note 29 线程创建
    python note 28 socketserver
    python note 27 粘包
    python note 26 socket
    python note 25 约束
    Sed 用法
    python note 24 反射
    python note 23 组合
    python note 22 面向对象成员
  • 原文地址:https://www.cnblogs.com/jihongtao/p/9671361.html
Copyright © 2011-2022 走看看