发表于： 2017-03-04 23:24:12

任务六

今天完成的事情

下载bootstrap框架，并在页面中引用bootstrap的样式。
完成任务六的页面结构和样式的编写，还欠头部的下拉框没有实现。
将小图标拼接成雪碧图，并且利用绝对定位实现小图标的定位。
使用line-height,transform,flex等方法实现垂直居中。

明天计划的事情

1.完成任务六，重置并美化选择器标签。

学习css3的动画效果。
学习html5音频标签。

遇到的问题

底部footer的一个元素使用了margin-top，然后页面出现了数轴的滚动条，检查footer的高度发现并没有撑高，向师兄询问并做demo测试后发现是margin垂直方向上折叠的原因。解决方案有很多。
1. 父元素添加overflow不为visiable 的属性
2. 为元素添加border（一般不用）
3. 父元素增加padding-top属性
4. 都用float来定位
雪碧图的自适应，因为我们使用的雪碧图大小是固定并且定位也是用的绝对距离，所以在自适应的时候有不少问题，网上查询后发现有border-sizing这一属性可以将雪碧图的大小设置为相对大小，然后利用这一属性解决了雪碧图的自适应问题。
bootstrap框架的使用，因为bootstrap设置了很多默认样式，所以在使用bootstrap样式的时候有很多自定义的属性都被覆盖了，并且部分属性的权重没有bootstrap的属性权重高，我暂时使用的是#id选择器来增加自定义属性的权重，除此之外还可以使用！important。目标是想完全自定义一个bootstrap样式，但是需要用到less，目标暂时延后。

文字过长截断，没有思路，查阅资料后发现有一个属性text-overflow:ellipsis可以实现该效果，不过需要与over-flow:hidden一起使用才可以,还有需要注意一点的是宽度要固定，不能根据内容来决定宽度，在对span等文本标签使用该属性的时候需要设置display:block或者display:inline-block，并设置宽度。附上一个简单的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style>
       html{
          height: 100%;
       }
       *{
          margin: 0;
          padding: 0;
       }
       .text-overflow{
          width:200px;
          height:100px;
          border:1px solid red;
          overflow:hidden;;/* 内容超出宽度时隐藏超出部分的内容 */
 text-overflow:ellipsis;;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
 white-space:nowrap;/* 不换行 */
 }
    </style>
</head>
   <body>
   <div class='text-overflow'>我来测试一下这个文字截断是不是真的有效果</div>
   </body>
</html>