我又回来啦，没网了，也没办成，决定以后用手机开热点好了

今天完成的事情

1.切图

2.构建html基本结构（三部分）

先设置header及fooder部分（position: fixed;）

1.   .header{  

2.       width: 100%;  

3.       height: 42px;  

4.       position: fixed;

5.       top: 0;

6.       line-height: 42px;  

7.       text-align: center;  

8.       background-color: #5fc0cd;  

9.       color: #fff;  

10.     background-image: url(../images/back.png);  

11.     background-size:11px 19px;  

12.     background-position: 15px center;  

13.     background-repeat: no-repeat;  

14. }  

将返回图标设置为背景

footer的样式设置为：

1.   .footer{  

2.       width: 100%;  

3.       height: 70px;  

4.       position: fixed;  

5.       bottom: 0;  

6.       line-height: 70px;  

7.       text-align: center;  

8.   }  

9.   .but1,.but2{  

10.     display: inline-block;  //设置为行内块元素

11.     height: 44px;  

12.     width:45%;  

13.     line-height: 44px;  

14.     border-radius: 10px;  

15.     border:2px solid;  

16.     margin: 6px;  

17. }  

18. .but1{  

19.     background: #fff;  

20.     color: #5fc0cd;  

21. }  

22. .but2{  

23.     background: #5fc0cd;  

24.     color: #fff;  

25. }  

设置中间区域背景图部分 html如下

1.   <div class="content">  

2.       <div class="photo">  

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

4.           <div class="text">  

5.           <div class="line1">高素雅  51岁</div>  

6.           <div class="ad"><img class="address" src="images/address.png">北京.通州.果园</div>  

7.           </div>  

8.       </div>  

9.   </div>  

Css

1.   .content{  

2.       position: relative;  //相对定位

3.       top: 42px;  

4.       width:100%;  

5.   }  

6.   .photo{  

7.       width: 100%;  

8.       height: 164px;  

9.       background-image: url(../images/2.png);  

10.     background-size:100%;  

11.     background-repeat: no-repeat;  

12.     display: table;  

13.     }  

14.   

15. .person{  

16.     width: 85px;  

17.     height: 85px;  

18.     position: relative;  

19.     left: 14px;   

20.     top: 38px;  

21. }  

22. .text{  

23.     /*float: left;*/  

24.     position: relative;  

25.     left: 14px;  

26.     padding: 14px;  

27.     display: inline-block;  

28.     vertical-align:middle;  

29. }  

30. .address{  

31.     width: 9px;  

32.     height: 11px;  

33. } 

明天计划的事情

继续任务5

遇到的问题

垂直居中试了很久，还是不太明白有哪些实现方式，以及内容中的照片信息及地址能否用float实现图中效果，vertical-align:middle;的使用条件

github还是登不上，明天再看看吧

收获

position属性