14、网页导航设计全解析：从布局到图标优化

网页导航设计全解析：从布局到图标优化

1. 水平导航设计

1.1 水平标签导航概述

水平标签导航在现代标准设计中十分常见，它与单栏或双栏布局配合良好，不过布局越宽，标签可能会显得有些拉伸。将链接置于页面顶部作为主要导航，能吸引用户的注意力。标签还能让用户感知到网站的不同板块。

1.2 水平导航的代码实现

以下是水平导航在 XHTML 和 CSS 中的常见代码示例：

<ul id="navigation"> 
  <li><a class="active" title="Home" href="index.html">Home</a></li> 
  <li><a title="My Blog" href="/blog/">Blog</a></li> 
  <li><a title="My Portfolio" href="portfolio.html">Portfolio</a></li> 
  <li><a title="Contact us" href="contact.html">Contact</a></li> 
</ul>

#navigation { 
  margin: 0; 
  padding: 10px; 
  list-style-type: none