今天完成：

提交了任务六；

了解了媒体查询；

明天计划：

1、修改提交任务七

2、继续完成任务八

遇到的问题：

1、html文字超过部分显示为省略号

      解决：overflow: hidden;

text-overflow: ellipsis;//超出部分予以省略号

white-space: nowrap;// 规定段落中的文本不进行换行：

也可以给定容器宽度限制max-width: 110px;，超出部分省略。

2、不同字体的文字如何一同垂直居中

      解决：vertical-align: middle;
3、某些属性无法通过getAttribute()获取

      解决，使用style获取

      查阅资料发现，实际是Attribute和Property之间区别的问题

主要区别：Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等：

style是HTML DOM的一个关于样式的对象，style对象的属性（如background，

color，border等等）用以设置元素的样式。

示例如下：对于以下HTML结构，

如果要获取div的name属性值，可以使用

如果要获取DIV的样式如字体的颜色，可以使用

收获：

1、了解了媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。

当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2、onresize 事件

onresize 事件：当浏览器被重置大小时执行Javascript代码:

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

navigator.serAgent;//取得浏览器的userAgent字符串
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

二者结合navigator.serAgent.indexOf("浏览器名")可以判断是否为某浏览器

因为浏览器之间的差异和兼容的困难，打开一些网站首页时，比如工行官网会建议在指定浏览器登录。

3、获取document节点的三种方式

getElementsByClassName()方法返回文档中所有指定类名的元素集合

除了getElementById()，其余三种返回的都是数组

使用时，只能单独针对数组元素进行操作……

4、html实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

注释：实体名称对大小写敏感！

5、

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度，多点百分比

(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。