------------------------------------------------------今天已完成------------------------------------------------------

一、修改任务 5

    1.按gif效果，将底部按钮区域整体fixed，同时增加了白色background，在滚动时能遮住图文内容。

    2.调整了错误的列表区域border长度，使右侧对齐页边。

    3.调整自我介绍栏右侧和视口的边距

    4.将滚动条范围限制在main部分

    成果链接

    https://masterfish.github.io/learn/task5.html

二、开始任务6

    1、了解和练习CSS sprite。

    2、在本地配置了Web服务器，为下一步做准备。

    3、试用了一种新的工作流：打开Chrome的Workspace功能，配合alloyDesigner的浏览器插件，然后直接在浏览器里编辑HTML和CSS，省去频繁保存和刷新。

    4、了解bootstrap。

------------------------------------------------------明天的计划------------------------------------------------------

    1、继续学习bootstrap

    2、继续写Task6.html

------------------------------------------------------遇到的问题------------------------------------------------------

    配置web服务器时，原本打算使用Mac OS自带的Apache，但是权限配置十分复杂，最后选了别的方法实现。

------------------------------------------------------今天的收获------------------------------------------------------

    1.按师兄指点，了解了inline-block间距问题。对目前的项目而言，直接改变HTML写法，最简单。将来的复杂项目中，会考虑使用负margin或letter-spacing解决。

    2、了解了webkit内核浏览器定义滚动条外观的方法

    3、在自己的网站上遇到了长单词换行的问题。如果不想父框被撑开，可以设置word-break：all；对每个单词强制换行；但是在中文环境下，会导致手机端(电脑端不存在这个问题，没找到相关文档)标点符号避头尾错误（比如逗号出现在行的开头）。经过查资料，最好的办法是使用overflow-wrap:break-word；它只处理超长部分，对cjk语言更友好。但这个声明在IE和Firefox尚未支持。