今天完成的内容

a.6.1-6.6的日报回顾

b.响应式网页的初步学习

c.环境配置：下载任务5的素材图，进行切图，完成header的处理步骤

d.css代码规范的了解（初略看了一遍）

明天的计划

a.6.7-6.10的日报回顾

b.任务素材图的补全

c.拓展知识的学习

遇到的问题

a.返回图片做出来发现是要做成一个button形式，暂时没有头绪，感觉应该和可以做一个同颜色的正方形，然后边框描白（不知到有没有button的图片插入）

b.个人主页进行text-align: center;处理后，虽然文本居中了，但是它是从居中后开始文本描写，所以不是特别居中，有点不尽人意。在不用absolute的情况，个人采取了用padding-right 来进行右边填充，顶到左边一点进行正中心居中效果，不知道这样的方法可不可以

收获

响应式布局的初步学习：

响应式布局要做到：

1、同一个页面在不同大小和分辨率的屏下整个布局要合理，视觉上要舒服；

2、不同大小的屏幕下同一个页面功能一致，操作方式可能是不同的；

3、对于不同类型的设备交互方式应该符合设备本身的操作习惯，比如触摸屏和鼠标操作；

要使一个网站根据屏幕大小进行响应式的自适应，需要做到响应式布局和响应式内容。实现方式：

1、利用Css和html标签自己写代码实现

media query能够获取终端分辨率的大小，然后根据大小设定布局和样式。

@media screen and (min-width:1000px){...} 对大屏幕的PC端页面

@media screen and (max-width:1000px) and (min-width:768px) {...}        对应中小屏幕的平板端页面

@media screen and (max-width:768px){...}           对应小屏幕的手机端页面

2、利用第三方框架，比如bootstrap

bootstrap生来就具有响应式设计的特性，能够自适应PC、平板电脑、手机等多种终端设备。

拓展知识：

CSS有三种基本的定位机制：普通流，浮动和绝对定位

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。

相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。

相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。

绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html或其他）元素。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

line-height

行高的垂直居中性

在单行或多行或图片垂直居中实现上的应用

单行文字的垂直居中对齐：

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。

多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

总结：虽然基础知识巩固了，但是感觉该出问题的时候还是会出问题和以前不同的是，发现问题和不对，进行解决有了清晰的方向该从那些属性下手。今天遇到的一个难题就是左上角的<要使用按钮或者链接（先尝试在不用链接的方式下看能否用button来搞定，不行再用链接）端午回家，应该2天没时间学习（家里电脑被亲戚小孩征用，第三天就回武汉了）css代码规范有点长，看完之后在总结写到我的日报上(现在日报有点像继续我当天学习到的知识点记事本了有时候收获一栏过长，请不要介意）