发表于： 2020-06-06 22:07:29

1 1194

今天完成的事情：

1.学习了bootstrap，栅格框架

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
        <!-- 新bootstrap4核心CSS组件 -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <!-- jquery组件 -->
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <!-- popper.js组件 -->
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <!-- bootstrap js核心组件 -->

会使默认样式变化，引入bootstrap框架后

导航栏与背景图之间多了一个白色缝隙，不知到原理


2.@media 查询，可以根据不同尺寸屏幕设置不同样式

      @media only screen and (max-width: 768px) {

        /* For mobile phones: */
        [class*="col-"] {
          width: 100%;
        }
      }


3.利用html和css实现常见布局


4.了解弹性盒子flex，弹性盒子特性较多，部分记不住


5.网格grid,

.container {  display: grid | inline-grid;}

      .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);
      }

      .one {
        grid-column: 1 / 3;
        grid-row: 1;
      }

自己使用时宽度会被过长的文字挤压，感觉不适合固定大小的盒子布局


今天遇到的问题

缩小时会影响布局，尝试使用网格后会被文字拉大


明天的计划

学习了bootstrap后，明天准备重新使用bootstrap框架解决问题


file:///C:/Window%20JS/css.java/jnshu/2%E5%89%AF%E6%9C%AC8-1.html

file:///C:/Window%20JS/css.java/jnshu/css.%E4%BB%BB%E5%8A%A18-1.html

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1