今天做的事

  任务8新的知识点

                bootstarap的布局

                动画

                自适应

                定宽

                不定宽

        bootstarap的布局

            简介： 是一种css 前段框架 ， 有好多写好的样式  比原生的好一些

                 使用： 

             引入

<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

                      这个就行， 然后官网  找到要用的 组件就

                  boostsrap的布局学习

                    1   全称也叫栅格系统

                    2   用途 主要是用来  做响应式  布局用

                    3    基础的知识点

                             容器    container    行  row     列 col    

                             col-xs    屏幕 小于  768时

                             col-sm    屏幕大于    768时

                             col-md    屏幕大于     992时

                              col-lg       屏幕大于  1170时

                     4  布局的基本用发

                            代码

                       效果

                 5   响应式的中级用法

                             需求 ：当小屏幕的时候  内容占一整行   大屏幕时占一半

                      代码

               效果

                    小屏幕

                 中屏幕

 动画

         学习目标  学习   css的高级用发     用css   做出来  动画的效果来

        学习的知识点

       选择器

       框模型

       背景和边框

       文本效果

       2d和3d

       动画

       多行布局

       用户界面

         边框       圆角边框        阴影边框       图片边框

                  圆角边框    border-radius         如图1

                  阴影边框    box-shadow            如图2

                  图片边框    border-image          如图3

             代码

                效果

                 背景 没图片看不了  不看了  前面已经学过了

            文本效果

                      文本阴影      图1

                      文本自动换行   图2

         文本字体任字体 

                  font-family  ：‘宋体’，用那个欢那个

          2D 旋转

               代码是  transform：rotate（30deg）；顺时针专30度    图一

          移动

                transform：translate（50px，100xp）；   如图二

                    则是2d效果看这不砸第

         3d 过度

               就是那个一种转态变到另一种状态  需要的时间

              语法 transition：width 2s ，heiht 2s，transform2s；

            代码

           动画

   自适应： 前面已经学过了

   定宽和不定宽  就是定宽度吧 没啥学的哦

  任务9   

         我发现任务 8   9   好像是一样的哎   一块做吧！

       新知识点

       媒体查询

        语法   

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

   当屏幕像素 小于 300后  要做改变的样式

    @media screen and (min-width: 300px) {
        body    {
           background-color:lightblue;
       }
    }

       当屏幕像素 大于 300后  要做改变的样式

明天计划的事  完成任务  8  中部