今天完成的事情

设置垂直居中可以使用flex布局，可以把photo部分简化

html中 

1.   <div class="photo">  

2.       <img class="person" src="images/1.png">  

3.       <div> //将文字部分添加到一个块元素下，否则无法换行

4.           <span class="name">高素雅  51岁</span><br> 

5.           <img class="address" src="images/address.png">

6.           <span class="ad">北京.通州.果园</span>

7.       </div>  

8.   </div> 

css中

1.   .photo{  

2.       width: 100%;  

3.       height: 164px;  

4.       line-height: 20px;  

5.       background-image: url(../images/3.png);  

6.       background-size:100%;  

7.       background-repeat: no-repeat;  

8.       display: flex;  //使用flex布局

9.       align-items: center;  //设置居中

10.     color: #fff;  

11.     }  

12.   

13. .person{  

14.     width: 85px;  

15.     height: 85px;  

16.     margin: 15px;  

17. }  

18. .name{  

19.     font-size: 16px;  

20. }  

21. .ad{  

22.     font-size: 12px;  

23. }  

24. .address{  

25.     width: 9px;  

26.     height: 11px;  

27. } 

拖动页面时发现header被遮挡，为header添加z-index:1属性，确保header在最上层

设置专业技能部分，文字内容垂直居中可以不设置高度，设置padding上下相等，用内边距撑开，标题部分可以套用一个样式，设置右边框以实现短竖线效果

html中

1.   <span class="skill" ><b>专业技能</b></span><hr>  

2.           <div class="info">  

3.               <span class="detail"><img class="star"  src="images/star.png">住家 </span><img class="star" src="images/star.png">不含餐<hr/>  

4.               <span class="title">从业年限</span><div class="detail">0~3年</div><hr/>  

5.               <span class="title">工作时间</span><div class="detail">全天</div><hr/>  

6.               <span class="title">服务价格</span><div class="detail price">25元/小时</div><hr/>  

7.               <div class="line5"><span class="title introduction">自我介绍</span><div class="detail ">可以洗衣、做饭、照顾老人。在护工方面有5年的工作经验。可以洗衣、做饭、照顾老人。</div></div><hr/>  

8.           </div>  

css中

1.   .skill{  

2.       display: inline-block;  

3.       font-size: 16px;  

4.       margin: 15px;  

5.       padding: 0 15px;  

6.       border-left: solid 2px #999999;  

7.   }  

8.   .info{  

9.       margin:0 15px;  

10.     padding-bottom: 70px;   

11. }  

12. .star{  

13.     height: 12px;  

14.     width: 12px;  

15. }  

16. .title{  

17.     padding: 0 15px;  

18.     border-right: solid 1px #e1e5e7;  

19.     color: #999999;  

20.     font-size: 16px;  

21. }  

22. .detail{  

23.     display: inline-block;  

24.     padding: 15px 15px;  

25.     font-size: 16px;  

26. }  

27. .price{  

28.     color: #e26163;  //为价格单独设置格式

29.     font-weight: bold;  

30. }  

31. .line5{  

32.     display: flex;  

33.     align-items:center;  

34. }  

35. .introduction{  

36.     white-space: nowrap;   

37. }  

实现自我介绍栏垂直居中，使用flex，设置以后自我介绍会自动换行，为它添加white-space: nowrap;属性 设置文本不换行

知识点

文字部分用padding撑开，不要设置height 设置padding上下相等

设置垂直居中可以使用flex布局将容器设置为

.container {

    display: flex;

    align-items: center;

}

hr color要用background-color设置

hr的常用属性

hr {

    margin-top:7px;

    *margin: 0;

    border: 0;

    color: black;

    background-color: black;

    height: 1px

}

其中：

margin-top:7px;*margin: 0;是解决ie和ff matgin-top不一致的问题；

border: 0; 是去掉ff的一条阴影线；

color: black; 是设置ie老版本水平线的颜色；

background-color: black; 是设置FF下水平线的颜色；

height: 1px;是设置水平线的高度，当然你也可以把它设置2px，3px；

遇到的问题

修改后发现拖动页面header部分会被遮挡  解决办法：修改header的 z-index:-1

自我介绍换行  解决办法：white-space: nowrap;文本不换行

我看效果图里的滚动条只是针对内容部分的，但是我做出来的是针对整个页面的，暂时未解决

明天计划

继续完善代码，学习flex布局