Head First HTML与CSS
第十二章 HTML5标记
CSS——掌控页面的表现
为页面创建导航
为页面创建导航，具体来说，需要用到一个列表和一些锚标记。
首先，为导航创建一组链接：
<a href="index.html">HOME</a>
<a href="blog.html">BLOG</a>
<a href="">INVENTIONS</a>
<a href="">RECIPES</a>
<a href="">LCOATIONS</a>
然后把这些锚包围在一个无序列表中，把它们当作一组列表项。
列表非常适合建立导航：
<ul>
<li><a href="index.html">HOME</a></li>
...
<li><a href="">LOCATIONS</a></li>
</ul>
接下来增加导航CSS：
ul{
background-color:#efe5d0;
margin:10px 10px 0px 10px;
list-style-type:none;
padding:5px 0px 5px 0px;
}
ul li{
display:inline;
padding:5px 10px 5px 10px;
}
ul li a:link,ul li a:visited{
color:#954b4b;
border-bottom:none;
font-weight:bold;
}
ul li.selected{
background-color:#c8b99c;
}
效果如下：
要使用HTML5标记，可以在无序列表外包围一个<nav>元素。
<nav>
<ul>...</ul>
</nav>
同时修改CSS：
nav{
background-color:#efe5d0;
margin:10px 10px 0px 10px;
}
nav ul{
margin:0px;
list-style-type:none;
padding:5px 0px 5px 0px;
}
nav ul li{
display:inline;
padding:5px 10px 5px 10px;
}
nav ul li a:link,ul li a:visited{
color:#954b4b;
border-bottom:none;
font-weight:bold;
}
nav ul li.selected{
background-color:#c8b99c;
}
效果如下：
