HTML5 教程学习 - HTML5+CSS3 实战(8) 附加栏目
昨天的HTML5+CSS3实战教程中，我们学习了怎样为范例页面编写“主体内容”部分的代码；今天来看看页面的附加栏目部分。
观察页面的设计图，可以看到在页面主体内容部分的下面就是所谓的“附加栏目”，里面包括了一系列博客链接及收藏分享功能链接。对于这个部分，我们有 两个元素标签可以选择：<aside>或<section>。鉴于在我们的范例页面中，这个附加栏目的信息与当前页面主要内容密 切相关(例如与主要内容有关的博客链接，以及直接收藏分享主要内容的功能链接)，所以使用<section>更加靠谱一些，因 为<aside>偏重于封装那些“有别于主要内容的部分”。(我个人看法与原文作者不同，<aside>目前的规范草案是 “aside元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别于主要内容的部分。”，范例中横排的附加栏目其实是当前比较流行的将侧边栏放倒下移的一种做法，可以算作侧边栏的性质；而且关于其中内容是否与主要内容有关，判断的有些主观，所以我偏向使用<aside>，不过没有大碍的样子。)
内部的结构及标签使用就比较常规了，博客链接与分享收藏各自使用一个<div>做容器，内层结构为<h2>与无序列表的形式。我们看下完整的代码：
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
译者：Viiiix7210
原文参考：Coding A HTML 5 Layout From Scratch
| < Prev | Next > |
|---|
