今天完成的事情：一个下午写完了任务五两个页面。。。 （感觉好疲惫）

明天计划的事情：开始任务六

遇到的问题：任务五用到的知识和任务四没有太多的差别，主要还是熟练运用CSS的布局技巧，和掌握一些调试命令，熟练运用。在写页面二的时候遇到了一个比较头疼的问题，就是页面上方三等分的处理

我的思路是用三个div并排处理，设置宽度各33%，左右两侧用position：absolute定位，中间居中。但是在处理右侧的小三角和竖线图片的时候遇到了很大的困难，让我对我这种解决方法产生怀疑。最后只能采用绝对定位的left：30%这样不精确的方法来控制。希望有更好思路的师兄师姐可以告知~  另外在调整这个三等分标签的时候，因为定位混乱，还出现了父素有定位，子元素的定位出现异常的情况，解决起来各种头大。。。

收获：掌握了dt列表的使用方法

         vertical-align，text-align的具体使用对象和用法

         css布局多种定位技巧更深刻的理解和运用

         提高了写代码的速度

附上任务五链接地址：      http://120.25.229.10/task5/1.html      http://120.25.229.10/task5/2.html

希望有师兄师姐可以对我的代码提出宝贵意见！ 感激不尽！

附上老大提到的Class命名语义化的问题：

常见class关键词：

• 布局类：header, footer, container, main, content, aside, page, section
• 包裹类：wrap, inner
• 区块类：region, block, box
• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
• 列表类：list, item, field
• 主次类：primary, secondary, sub, minor
• 大小类：s, m, l, xl, large, small
• 状态类：active, current, checked, hover, fail, success, warn, error, on, off
• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
• 星级类：rate, star
• 分割类：group, seperate, divider
• 等分类：full, half, third, quarter
• 表格类：table, tr, td, cell, row
• 图片类：img, thumbnail, original, album, gallery
• 语言类：cn, en
• 论坛类：forum, bbs, topic, post
• 方向类：up, down, left, right
• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

有了关键词之后，我们先来制定一些简单的规则

制定简单规则：

• 以中划线连接，如.item-img
• 使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化
• 状态类直接使用单词，参考上面的关键词，如.active, .checked
• 图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。
• 模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
• js操作的类统一加上js-前缀
• 不要超过四个class组合使用，如.a.b.c.d