今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

任务6:护工列表页——一个最常见的移动端页面，需要使用bootstrap

1.了解垂直居中实现方式； 

2.了解使用bootstarp下拉选框； 

•  基本完成了任务6，不过对于bootstrap了解的很少，还要研究
• 
  

明天计划的事情：（一定要写非常细致的内容） 

• 1.继续完成任务6并提交。
• 2.继续查看一些bootstrap的知识及css的新元素。

遇到的问题：（遇到什么困难，怎么解决的） 

了解CSS Sprite雪碧图?

CSS  Sprites即CSS雪碧图，也有人叫它CSS精灵，是一种CSS图像合并技术。

实现原理 :CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,然后利用css的背景定位来显示需要显示的图片部分。

优点:

(1)减少加载网页图片时对服务器的请求次数

(2)提高页面的加载速度

 如果屏幕过窄时，怎么设置左边的文字被截断出现”…”省略号?

        .content {

            white-space: nowrap;

            /*连续的空白符会被合并。但文本内的换行无效*/

            /*white-space 属性是用来设置如何处理元素中的空白。*/

            overflow: hidden;

            /*overflow 属性作用于block型元素上。它规定了当内容元素溢出元素框时如何处理：裁剪内容，使用滚动条来显示 或 直接显示超出部分 。*/

            text-overflow: ellipsis

            /*text-overflow 属性用于决定溢出的内容以何种形式提醒用户。它可以直接剪切（clipped），也可以显示一个省略号（ellipsis），或者显示一个自定义的字符串(string)。 */

        }

• 现在对于好多元素还不熟悉，遇到问题脑海中只有经常用的那几种方法解决，没有尝试一些新的东西。

收获：（通过今天的学习，学到了什么知识）

如何使用Bootstrap框架的下拉菜单?

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。 

若使用的是未编译版本，可直接调dropdown.js的文件；也可可以统一调用压缩好的bootstrap.min.js文件：

 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

注意：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

使用方法：次序很重要： 

a. 使用一个<div></div>包裹了整个下拉菜单元素； 

b. 使用一个<button  type="button" data-toggle="dropdown"></button>做为父菜单，其data-toggle属性必须和最外容器类名一致； 

c. 下拉菜单项使用一个ul.dropdown-menu； 

即，div.dropdown>(button.dropdown-toggle+ul.dropdown-menu>li)；

From <https://www.zybuluo.com/EncyKe/note/136623#2-下拉菜单>

被截断的文字怎么出现”…”省略号?

在设置文字过长部分需要将text-overflow设置为  ellipsis，意思为文本超出部分为省略号；

• 同时设置整体文本过长需要用white-space标签，设置为 nowrap，意思是文本不换行；
  同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden;