专题：HTML5+CSS3 实战
应该总结一套专题了；就是之前的“HTML5 教程学习 - HTML5+CSS3 实战”连载。从1月中旬开始基本上一天搞了一小篇的样子，直到过年前结束；现在集合到这边作为一个专题，希望可以提供更加集中方便的浏览方式，并且一如既往的欢迎交流指教。
这套教程的原文呢，是来自Smashing Magazine的Coding A HTML 5 Layout From Scratch；对于英语方面没什么问题的朋友们，还是推荐直接去看原文好了，毕竟原汁原味更加准确。另外呢，就像本系列最后一篇中我曾经念叨过的“HTML5方面的东西慢慢关注下来发现，国外站点上一些公认不错的教程范例，每一篇几乎都有着不同的路子，比如对新标签的理解，使用的策略等等；想来也不奇怪，W3C的HTML5规范本身还处于草案阶段的样子”，对于有兴趣阅读和学习这些知识的朋友们，建议到处多看看多比较一下，如果要在自己的项目中使用新技术，最好能够首先找到一套最优解决方案，做到心中有数先。
好了，“HTML5+CSS3实战”系列的最后一篇；本是Smashing Magazine上面的一整篇教程，每天弄来一点最后搞成了17篇连载。HTML5方面的东西慢慢关注下来发现，国外站点上一些公认不错的教程范例，每一篇几乎都有着不同的路子，比如对新标签的理解，使用的策略等等；想来也不奇怪，W3C的HTML5规范本身还处于草案阶段的样子；我个人目前还不打算用它做新东东；CSS3方面倒是在一点点的用着，不过也要看是什么项目了。
不多说了，可以参考“HTML5教程学习 - HTML5+CSS3 实战(9) 页脚”一文来回顾下之前页脚部分的设计样式和HTML。接下来我们来看看样式；将下面的代码添加到main.css中：
在前面一篇HTML5+CSS3实战里面，我们搞定了范例页面“附加栏目”部分的样式；今天来一起看看正文部分文章列表的样式代码。首先呢，可以参考之前的文章来回顾一下文章列表部分的设计样式及HTML代码。心中有数，下面是文章列表部分的基本样式代码：(见全文)
其中“li:last-child .hentry”的设定去掉了文章列表中最后一篇文章的下边框线及内边距；另外通过“#content > .hentry”，我们可以选取那些作为#content容器直接子元素的.hentry文章段落；如果某.hentry元素嵌套在有序列表中，那么它就不会被选中。这是从文章内页的角度出发进行的考虑(虽然我们的范例里不会涉及到)，因为内页单篇文章是不需要下边框的。
前面一篇HTML5+CSS3实战里面嘀嘀咕咕了很多没用的，最后看了下范例页面里面的特色文章和主要内容部分的样式代码；今天来看看“附加栏目”部分的样式吧，这部分多少有意思了一些。
为了在脑子里有个直观些的概念，可以回顾一下“HTML5 教程学习 - HTML5+CSS3 实战(8) 附加栏目”，参观一下“附加栏目”这部分的设计样式以及HTML代码。在样式方面，左侧的博客链接列表里面包含3列内容，我们可以使用左浮动<li>的方式来做；宽度做做好就OK；右侧是常规的单列无序列表，没什么悬念，容器整体右浮动即可。问题主要出在最后一行的那几个<li>上面；我们先把“附加栏目”这部分的样式代码列出来，然后看下哪里有不爽：
我想起一句话，叫作“天有不测风云”什么的；记得是很小的时候，寒假之前结业会结束之后，学校给每个学生发了一封信；那时使用的还是人力印刷，那种油墨味道很重的印刷机，用滚轮刷啊刷的；那样印出来的东西拿到手里总是先去闻一闻上面的味道，有时会蹭的手上鼻子上都是未干的油迹。那天发的信上面第一句就是“天有不测风云”，后来明白事了就搞不大懂为什么学校要给即将放寒假的孩子们发这样的东东，其实到现在也没懂。当天拿着这信一边在路上走着一边读着，觉得那种天色啊，云的颜色啊，树枝的样子啊，有种特别清净肃杀的感觉；前两天玩Half Life 2的时候发现水障碍区那些关卡简直和小时候记忆里的样子没有差别，我几乎已经忘记游戏，而沉浸在那种感觉里了。
在昨天的教程中，我们在main.css文件中添加了一些新的样式代码，用来搞定HTML5新元素标签的显示问题；今天我们来看看页面头部(header)的样式设定。
这部分的样式代码没什么悬念，基本都是我们平时所能接触到的；也可以参考“HTML5 教程学习 - HTML5+CSS3 实战(5) header”回顾一下之前学习的页面头部HTML代码及局部设计图，做到心中有数。
下面我们来看看样式代码；同样需要添加到main.css当中去：
