一、今天完成的事情：

1.学习了display和visibility的区别

2.自适应网页和响应式网页的区别

二、明天计划的事情：

1.学习轮播图的制作

2.学习制作响应式页面

三、遇到的问题：

任务8的设计图分辨率很大，当使用vw作为单位的时候，分辨率较小的显示屏上，图标变得十分小。后改用rem作为单位，但是又有一个问题，那就是图标等是设计图的原尺寸，这样在分辨率小的显示屏上看起来就有些大了。面对分辨率高的设计图，如何选择单位，制作网页好呢？似乎是要用到响应式页面的知识，一开始分不清自适应跟响应式的区别，后面经过查找知道两者的区别，可是不知道怎么制作响应式页面

四、收获：

1.学习了display和visibility的区别

1.1 vistibility

visibility：visible/hidden；  visible显示，hidden隐藏。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

1.2 display

display就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

block：

容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none:

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

2.自适应和响应式的区别

2.1自适应

网页内容和布局完全一样

自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。

从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。

这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚

制作方式：使用%，vh/vw，vm，rem作为单位

2.2响应式

页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化

对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。

制作方式：

1.使用mata标签

设置布局宽度等于设备宽度，布局viewport等于度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

2.媒体查询

视窗宽度小于等于960px时，页面布局

@media screen and (max-width:960px){....}

<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />

进度：任务8

任务开始时间：06.07

预计demo时间：06.09

是否有延期风险：有

禅道：http://task.ptteng.com/zentao/project-task-729.html

任务总结：

任务名称：CSS=TASK7

成果链接：服务器：http://118.126.113.248/jnshu834/-task/-task7/index.html       github

任务耗时：06.04-06.07  无延期

脑图：

任务总结：

任务进度感觉有些慢了，应该在2-3天提前完成

任务7主要遇到的难点有以下几个方面：

1.Bootstrap布局的问题

 一开始并没有十分理解栅格布局，不知道container,row,col这些类名怎么使用，具有什么属性。使得布局没有实现页面的效果。

后来通过查看w3c等教程，还有通过chrome进行测试，了解到了各类名具有哪些属性。还有可以通过col-xs-offset-* 来将列按布局排列。现在我使用栅格

布局主要用其来进行大体的布局，然后在细致的地方给定高宽来进行调整。

2.投票页面的方形响应式布局的问题

一开始是把方形都限定了高宽，使其形成一个正方形。可是这样就没有了响应式的布局，方形的大小不会随着窗口的大小而变动。后来听师兄的建议，使

用vh,vw来定义方形的高宽。vh,vw的难点也卡了比较久，关键在于不知道如何使用，取多大值才合适。后来学习到如何将px转换为vw，才把整个含有正方

形的内容区的px转换为vw

 3.将含有方形的内容区的px转换为vw的时候又遇到hover出现的四个小图标背景雪碧图不会响应式放大缩小的问题

一开始设置background-size：200% 200%；没有效果，这只是将背景雪碧图放大了2倍。后将background-size: *vw *vw；（*为雪碧图的高宽px转换为vw

的数值），雪碧图里的icon可以正常显示，并且也是响应式的了。需要注意的是，bakcground-position 的值也需要转换成vw 雪碧图的icon位置才不会出错

总的来说任务7学到了很多知识，但也遇到了些难点，希望自己能加深对知识点的理解，并且灵活应用。