在网页设计中，导航栏是非常重要的一个元素，它为用户提供了网站的结构和导航。CSS可以让我们很方便地设计出漂亮的导航栏，下面就来介绍一种常用的方法：平铺式导航栏。

我们可以使用

和
• 标签来创建一个简单的导航栏，例如：

  <ul><li><a href="">首页</a></li><li><a href="">最新消息</a></li><li><a href="">产品介绍</a></li><li><a href="">联系我们</a></li></ul>

  要实现平铺式导航栏，我们需要设置一些CSS样式。首先，将

  的默认样式设置为清除内部元素的float值，并将list-style和margin设为0：

  ul {list-style: none;margin: 0;padding: 0;}li {float: left;}a {display: block;padding: 10px;text-decoration: none;font-weight: bold;color: #333;}

  以上代码将导航栏中的每个

  • 元素向左浮动，并将元素设置为块级元素，使其可以填充整个空间。我们还可以添加一些鼠标悬停的样式效果：

    a:hover {background-color: #555;color: #fff;}

    这段代码将在鼠标悬停在导航栏上时，将背景颜色改为深灰色，并将字体颜色改为白色。最终的效果就是一个简单的平铺式导航栏。

    当然，这只是一个基础的例子，我们可以通过改变字体、颜色、间距等样式设置来创建不同的导航栏。注意：在写CSS样式时要结合HTML代码来修改，才能呈现出最理想的效果。