任务3，PSD切图

 任务3看起容易，但其中还有许多需要注意的地方，折腾一晚都没搞出来，233333。CSS的入门很容易，但身为初学者一定要戒骄戒躁、不可浮躁自以为是，要学的东西还有很多，要深入的掌握细节，深入的理解机制。遇到没见过的用法就要动手去实践验证，不怕费时费力，但求能学到东西。

 

一、今天完成的事

  1、下载PS,并为魔镜介绍页PSD进行切图

  2、魔镜介绍页的结构编写

 

二、遇到的问题

 1.如何将PS图层中的图片单独保存？如果是两个图层怎么办？

   1）选中要切内容所在的图层，右键点击选择转换为智能对象。

   2）右击选中编辑内容

   3）点击文件>存储为web所用的png24格式（Alt+shift+Ctrl+s）

   4) 如果是两个图层，可以按住ctrl同时选中两个图层转换

 

 2.如何使带符号的圆位置不会随着屏幕的大小而改变？

   为其添加fixed属性

   .header{

     position:fixed;

     top:2%;

     left:2%

    }

 

 3.如何使logo图片居中，使用不了text-align？

   没有为其父层添加宽度

 

明天计划的事：

 完成任务3并提交

 

学到的知识（收获）

  1、text-align:center和margin：0 auto都能水平居中，区别在哪？

    1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

    2.margin:0 auto 设置块元素（或与之类似的元素）的居中。

  

  2、网页宽度如何自适应屏幕？

    如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  

     这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。