发表于: 2018-10-21 21:53:05

2 802


今天学到的东西

           1  botstrap   

           2  删格系统

           3  css spirt    雪碧图

   一。

        botstrap 介绍以及使用

           介绍

                  BootStrap 是Twitter的工程师开发的前端框架,可以非常方便的设计出好看的页面效果。 

          如何使用

                   首先下载  bootstap  插件  然后在按顺序引入    顺序不能乱

                   jquery.min.js

                   bootstrap.min.css

                   bootstrap.min.js

   二。

       删格系统

          作用     运用Bootstrap的栅格系统,可以做出像table那样定义多少行,多少列效果,但是又比table灵活。

          使用方法

             <div class="container">

                <div class="row">

                    <div class="col-xs-6 ">一共12列</div>

                    <div class="col-xs-6 ">一共12列</div>

              </div>

            </div>

       介绍

           col    声明 列设置

           md     设备  宽度代码        <768超小屏幕xs        >=768小屏幕sm        >=992中屏幕md        >=1200大屏幕lg

           div    占多少空间

  三。

     雪碧图

        介绍 

            可以把很多的小图标放在一张图上 使用 背景定位 来显示使用哪个图    优点可以快速加载页面减少服务器压力

            原理  所有的图标放在一张图上   创建大小和图标一样的盒子   改变背景图像位置来显示不同图标    

       使用方法

            首先图标合成

              https://www.toptal.com/developers/css/sprite-generator   在线图标合成器

           使用

              .icon{

                     width: 32px;

                     height:32px;

                     background:url()  no-repeat 0  0;

                     display;  inline-block      变成行元素

                }

明天计划的事情

          把今天学习的只是在巩固一般还不会用


返回列表 返回列表
评论

    分享到