今天完成的事

1.中午在卢冰泉师兄的引导下加入了武汉IT群 然后请教了武汉分院关南师兄

2.根据关楠师兄的建议调整开关按钮的结构实现预期效果

<span class="move"> </span>
          <span class="e">
          <em>找雇主</em>
          <em>找护工</em>
          </span>

3.重新调整并优化开关的文字 css代码部分

.e {
    width: 140px;                       /*设置宽度为140px*/
    position: fixed;                    /*设置绝对定位 相对于浏览器窗口定位*/
    top: 16px;                          /*设置距离窗口上边16px*/
    display: inline-flex;               /*设置display属性为inline-flex排列*/
}
em {
    text-align:center;                  /*设置文字居中显示*/
    width:100%;                         /*设置宽度为100%*/
    font-style:normal;                  /*设置文字不换行*/
}

4.删除掉无用的CSS代码

5.开始添加列表主体内容 

<p class="p">
    <p1></p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
</p>

6.搭建列表框架

<p class="p">
    <p1>
        
    </p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
    <p1></p1>
</p>

7.设置列表主体y轴滚动

overflow-y: hidden;                   /*设置滚动条Y轴内容溢出时的显示方式*/

8.搭建单列列表框架

<p1>
    <span class=""></span>
    <span class=""></span>
    <p2>2015-7-5至2015-7-12</p2>>
    <p2>25元/小时</p2>
    <span class=""></span>
</p1>

9.调整列表框架

<p1>
    <span1 class="icon1 position"></span1>
    <pp class="pp">
    <p2 class="t">2015-7-5至2015-7-12</p2>
    <p2 class="t2">25元/小时</p2>
    </pp>
    <span1 class="icon2 position"></span1>
    <p2 class=""></p2>
</p1>

10.引入样式 插入雪碧图

span1 {
    display: flex;
    flex-direction: column;             /*设置为flex布局 主轴从上往下垂直布局*/
    width: 220px;
    height: 30px;
    background-image: url(列表页.png);
    background-repeat: no-repeat;
}
.icon1 {
    background-position: -20px 0;
    left: 0px
    top: 0px;
}
.icon2 {
    background-position: -20px -90px;
    left: 0px;
    bottom: 0px;
}
.position {
    position: relative;
}
.pp {
    display: inline-flex;               /*设置display属性为inline-flex排列*/
    align-items: center;                /*行列项目中垂直居中排列*/
    padding-left: 50px;
}
.t {
    font-size: 20px;
}
.t2 {
    font-size: 30px;
    color: red;
    padding-left: 200px;

}

11.调整列表主体的显示层级

z-index: -1;                          /*设置显示层级为-1*/

明天的计划 

1.插入剩余图标

2.调整雪碧图大小

3.调整列表布局

遇到的问题

1.雪碧图无法像普通图片那样直接设置大小 

2.开关上的文字不能与开关产生联动

收获

1.学会使用雪碧图

2.对伪类有初步的了解和认识