1. 今天完成的事情：

        护工个人主页——一个最常见的移动端页面的大致框架已经搭建,还需细化调整页面元素的大小和间距。

任务页面结构分析：

1. header 包含标题个人主页 和返回链接；

1. 2. 主体内容包含护工资料和专业技能；
   

2. 3. 护工又包含护工照片、护工姓名、护工年龄、护工位置；
   

3. 4. 专业技能包含从业年限、工作时间、服务价格、自我介绍；
   

4. 5. footer 包含留言和电话联系两个按钮；
   

5. 
   
6. 
   

 明天要做的事：
继续优化任务5，实现响应式布局。

flex?
如何让头部底部分别固定在屏幕上方和下方?
页脚footer到底是固定在页面的底部，还是永远固定在显示器屏幕的底部，纠结?
换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之页面的footer部分永远在页面的底部。
 CSS  StickyFooter——当内容不足一屏时footer紧贴底部
当内容不足一屏时footer也要紧贴底部的情况


为主体内容的上半部分布局，在不同分辨率下布局不被破坏，且内容始终垂直居中?
为主体内容的下半部分布局，在不同分辨率下布局不被破坏，且文字始终垂直居中?
调试代码，使得页面在不同分辨率不同设备上都能正常显示?

 


1.这次的任务有可以用到IconFont的地方吗？如果有应该怎么做?
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具
返回  定位 星可以用到IconFont
 
2.HTML中dl、ul、ol用哪个比较好？
HTML <ol> 元素 表示多个有序列表项，通常渲染为有带编号的列表。
HTML <ul> 元素代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。
HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

<dl>     
<dt>从业年限</dt>         
<dd>0~3年/dd>     
<dt>工作时间</dt>     
<dd>全天</dd>    
<dt>服务价格</dt>     
<dd>25元/小时</dd>     
<dt>自我介绍</dt>     
<dd>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。</dd>
</dl>
       
通过 CSS3 ，我们还可以在术语后面添加一个与内容无关的分隔符号，比如：
dt:after {   
   content: ": "; 
}

遇到的问题: 

 用Photoshop为所要用的背景图、头像、小图
细谈设计稿还原‍

1. 同样是左中右的布局，可以用很多不同的方法来完成?
   
2. 让多个块级元素同处一行有许多办法，
3. 比如flex，
4. 比如inline-block(内联块)，
5. 比如float(浮动)，
6. 比如absolute(绝对定位)。

 图片的自适应（fluid image）?
img {  max-width: 100%;}不能实现图片的自动缩放?

1. 如何用css3的方法更好地拉伸背景图?

background-size属性，加上background-position 属性用于定位图片作为背景时，显示在对象位置，其值有2个，前者值是水平方向定位，后者值是垂直竖向定位。其两者都可以为正，可以为负，也可以使用固定几个英文单词（left、right、center、top、bottom）进行定位背景图片。设置合适的值就能“获取”对应的区域。‍‍

background-size:cover;

‍‍等比扩展图片来填满元素，即cover

background-size:contain;

‍‍等比缩小图片来适应元素的尺寸，即contain

background-size:auto;

‍‍以图片自身大小来填充元素，即auto‍

收获：

1. 背景图片怎么设置？
2. background-image:url(images/bg.png);
3. 背景图片的大小？

4. background-size 来控制背景图片的尺寸，可以给它设定的值及含义如下。

   50%：缩放图片，使其填充背景区的一半。

5. 100px 50px：把图片调整到 100 像素宽，50 像素高。

    cover：拉大图片，使其完全填满背景区；保持宽高比。

   contain：缩放图片，使其恰好适合背景区；保持宽高比。

6. 位置？ 

7. 用于控制背景位置的 background-position 属性，是所有背景属性中最复杂的。

   background-position属性有5个关键字值，分别是top、left、bottom、right和center，

   这些关键字中的任意两个组合起来都可以作为该属性的值。比如，top right 表示把

   图片放在元素的右上角位置，center center 把图片放在元素的中心位置。background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下，background-position 的原点位于左上角。即元素的左上角和图片的左上角是对齐的，随后图片向各个方向重复，都是以左上角为起点。

   
   

   简写背景属性 background 属性可以用来设定所有背景相关的值。

8. ‍‍background-color 背景颜色 
   background-image 背景图片地址
   background-repeat 背景平铺重复方向
   background-attachment 设置或检索背景图像是随对象内容滚动(scroll)还是固定(fixed)的。background-position 设置或检索对象的背景图像位置。‍‍

   background背景样式的值是复合属性值组合，也就是背景单词的值可以跟多个属性值，值与值之间使用一个空格间隔即可。‍‍

   body{background:url(images/watermark.png) center #fff no-repeat contain fixed;} 
   

9. 声明中少写了哪个属性的值（比如没写 no-repeat），就会使用相应属性的默认值 （repeat）。
   

10.  
    

1. 响应式布局？
   

2. 　响应式布局能使同一份代码快速，有效适配手机，平板和PC设备，这一切都是CSS媒体查询的功劳。