第7章使用CSS制作网站导航解答.ppt

第7章 使用CSS制作网站导航 网站导航（Navigation）是一个通称，方便用户浏览网站信息和获取网站服务。它的基本作用就是让用户在浏览网站过程中不致迷失，并且可以方便地回到网站首页以及其他相关内容的页面。 网站导航一般位于网站的banner下面或是网页的顶部。网站导航是网站中最重要的元素，主要有横向导航、纵向导航、下拉导航及多级导航等几种形式。本章将介绍如何使用CSS来制作各种美观实用的网站导航。 7.1 制作一个简单的横向文字导航条 门户网站的主导航一般都是选用横向导航的形式。这是因为门户网站下方文字较多，而且每个频道又都有不同的样式区别，因此在顶部固定一个区域，设计统一风格又不占用过多空间的横向导航是最理想的选择。例如、及国内的新浪、网易、腾讯等网站都是采用此种导航形式。 1．display属性 2．list-style-type属性 3．制作横向文字导航条的实例 7.2 制作方块导航条 设计师天马行空的进行网页设计，导航条自然也不拘泥于一个简单的文字链接形式。方块导航条可以为设计师提供一些设计灵感。 制作方块导航条，先制作一个最基本的水平导航条，然后在a元素的样式中使用background-color属性将其定义成有颜色的区块，最后使用a:hover达到当光标经过时改变其颜色的效果。下面分别讲解文本对齐属性的使用方法和具体实例应用。 1．文本对齐属性 2．制作方块