发表于: 2017-04-05 23:29:44

2 570


  今天领取了任务5,按惯例首先看任务详解,了解这个任务所运用到的知识以及通过任务我可以学到的知识点,然后发现了<这可能是史上最全的CSS自适应布局>这篇神文,决定好好研究一番,标题党狗【捂脸】。再加上清明出去了一趟,正好借机复习一下。


一、今天完成的任务

  1、切图

       背景图只需要把对应的背景图那一部分切出来就行了,不用切一整幅的图。背景图采用切片法。

   2、header布局(task5-1)

      header部分分为两部分,返回箭头和文字内容。其中返回箭头设定链接,点击后显示为第二个页面。因为要实现自适应,所以高度最好设置为百分比。使用paading值,将高度撑开。

      1)返回箭头以header相对,使用绝对定位

      2)文字使用text:align,居中


二、遇到的问题

    如何实现移动端自适应?

      1、什么是视口

           视口的目的是让一个在PC端的网页可以在移动端浏览器正常访问

       2、视口声明

            <meta name="viewport" content="width=device-width//直接获取设备的宽度为视口的宽度,initial-scale=1.0//初始化缩放为1,user-scalable=no//不允许用户缩放">


三、明天的计划

      缕清思路,继续完成task5-1


四、收获(今日所学

      看到一个效果图的时候,千万不要急着手贱去敲代码!先思考清楚页面的构造,理清各元素之间的关系,特别需要注意的是在不同的设备下需要有怎样的展现,当你思路清晰找到最好的布局方案时,coding其实真的不需要多少时间。

         

       



返回列表 返回列表
评论

    分享到