发表于: 2018-08-23 15:33:10

1 613


今日完成的事情:初步完成了任务5

明天计划完成的事情:领取任务6,并完成一个小的demo

遇到的问题:

       1、footer固定页面底部的问题

            解决方法:   

            页面结构是这样的

            <html>

           <body>

                <header></header>

                <main></main>

                <footer></footer>

           </body>

          </html>

         刚一开始是  body  position:relative;  然后 footer: position: fixed;  bottom:0;

         这样写就是把footer固定在窗口底部,也就是显示器底部,不符合要求

        然后看了一些教程

         页面结构变了一下,加了一个container容器

        

          然后css也改变了一下

         html,body{

             height:100%;

         }

        .container{

             min-height: 100%;

            position: relative;

       }

      main{
          padding-bottom: 200px;

     }

     footer{

         position: absolute;

         left:0;

        bottom:0;

        height: 120px;

        width:100vw;

    }

      解决问题   

      2、自我介绍这一栏,“自我介绍”位置不固定,竖线跟前面的“服务价格”的竖线不能对齐



   目前还没有好的解决方法,等明天再查查资料

————————————————————————————————————

收获:

           1、对于flex布局有了初步的了解

           2、拿到设计稿,先构思布局,写好html骨架,然后再写css

 


返回列表 返回列表
评论

    分享到