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;

}

效果如下：