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

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

• 1.完成任务6并提交。 不过对于bootstrap所知很少,还需再研究一下。
• 2.学会了z-index的用法，通过设置“z-index”可以掩盖内容。   z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其小的上方。z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。 

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

3.学会了绘制div的小三角，主要是利用边框bordor的宽度来实现，将原来div的宽和高的值逐渐减为0的过程，每个方向边框的形状会逐渐由梯形变为三角形，设置每个方向边框的颜色和宽度，若只想显示某一块三角形，可以把其他的边框颜色设置为透明，即transparent。

4.使用bootstrap的caret可直接做出小三角，再对各个边框的颜色进行修改，就可得到想要的小三角。

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

• 1.开启任务7。
• 2.继续查看一些bootstrap的知识及css的新元素。

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

 怎样实现顶部button需要有一部分重叠      

分别设置 找雇主 和找雇工 按钮   z-index属性

所以我们可以给需要在上面的按钮设置的z-index属性值大于我们想要覆盖的按钮

        /*找雇主按钮*/

        .left-padding {

            padding-right: 0;

            z-index: 1;

            margin-right: -0.1rem

        }

        /*找雇主 和找雇工 按钮部分重叠*/

        /*找护工按钮*/

        .right-padding {

            padding-left: 0;

            z-index: 2;

            margin-left: -0.1rem

        }

下拉框的选择部分与下拉框宽度需要一致      

bootstrap按钮式下拉菜单如何和按钮一样宽度？

将ul的width样式设置为100%,即可将下拉列表的内容与按钮的宽度一致

        /*bootstrap按钮式下拉菜单如何和按钮一样宽度？将ul的width样式设置为100%,即可将下拉列表的内容与按钮的宽度一致*/

        ul.dropdown-menu{

            min-width: 100%;

        }

3. 小尺寸时，下拉框将列表遮住了部分

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

 在 CSS 2.1中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着“z轴”层叠摆放， 当他们相互覆盖时， z轴顺序就变得十分重要。

 这意味着所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大， 元素越接近观察者。Z轴顺序用CSS的z-index属性来指定。使用z-index很简单： 给它指定一个整数值即可

From <https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index>