Head First HTML與CSS
第十二章 HTML5標(biāo)記
CSS——掌控頁面的表現(xiàn)
為頁面創(chuàng)建導(dǎo)航
為頁面創(chuàng)建導(dǎo)航，具體來說，需要用到一個(gè)列表和一些錨標(biāo)記。
首先，為導(dǎo)航創(chuàng)建一組鏈接：
<a href="index.html">HOME</a>
<a href="blog.html">BLOG</a>
<a href="">INVENTIONS</a>
<a href="">RECIPES</a>
<a href="">LCOATIONS</a>
然后把這些錨包圍在一個(gè)無序列表中，把它們當(dāng)作一組列表項(xiàng)。
列表非常適合建立導(dǎo)航：
<ul>
<li><a href="index.html">HOME</a></li>
...
<li><a href="">LOCATIONS</a></li>
</ul>
接下來增加導(dǎo)航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標(biāo)記，可以在無序列表外包圍一個(gè)<nav>元素。
<nav>
<ul>...</ul>
</nav>
同時(shí)修改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;
}
效果如下：
