发表于: 2021-11-30 20:51:45

1 1537


编辑日报内容...

今天完成的事情:

          今天在做任务六,先是做好布局,利用flex和fixed对div进行布局,

          做页眉布局时用到position: fixed;top: 0;left: 0;right: 0;对顶部进行绝对定位,然后再用display: flex;flex-direction: row;justify-content: space-between;对大div里的小div进行再定位,调整好边距,

          使用背景图片对小盒子设置雪碧图背景background-image: url(../img/sprite.png);background-position: 50%;50%;background-size:。。进行雪碧图定位和大小调整。

           整个做起来 利用谷歌浏览器的调试功能可以很简单看到任务中存在的问题,直接修改问题,使任务布局变得更加简单。

           在做到文字时,文字会出现不居中换行行为,也找到了办法text-align: center;font-size: 10px;line-height: 10px;color: rgba(0, 190, 190, 1);这包括设置文字水平居中,垂直居中,文字大小和文字颜色,以及透明度,使文字布局更加简单。

           然后继续往下做,页尾的布局也同样利用flex和fixed对div进行布局,简单完成这就不说了,

           重点来了,当我布局好认真看bootstrap的时候,我发现根本看不懂,硬着头皮看完了也不知道咋回事,它引入了什么属性?它的css是啥?懵了! 后来我去下载了它的css文件,好几个css文件,最少的打开5000+行,这看不了啊!只能用它了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"

        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"

        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"

        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"

        crossorigin="anonymous"></script>

        好吧  我做好的页首和页尾只要是关于边距的问题的  它都出了问题,那啥刚刚改完。

明天计划的事情:

         搞懂bootstrap,继续做任务six。计划赶不上变化,就算搞不懂我也要记住这个单词怎么拼boots.....p。。。

遇到的问题:

          光看bootstrap官网了  越看越迷,不过有点眉目了

收获:以后要先规划好在去做网页,今天就是没提前了解好没提前引入bootstrap的css和那些乱七八糟的所以重写了。我又写了一遍css,按照记忆来说的话,记的比昨天深了一点,比明天浅了1点



返回列表 返回列表
评论

    分享到