• Hello!欢迎来到网页设计学!
当前位置: 首页 > HTML&CSS > 用HTML和CSS制作固定的网站导航栏

用HTML和CSS制作固定的网站导航栏

.................................................................................................................................................................

固定导航栏就是无论用户怎么滚动网页,导航栏都会固定在一个地方,一般处于网页的上边或者左边,这是一种常见的网站导航设计模式,无论访客处于哪个页面都能够随时找到网站导航浏览其他内容。这一设计对于用户体验来说非常不错。

在本教程中,我们将用CSS技巧实现一个简单的固定导航栏,举个例子先看看下面的动态图,你可以直观的看到效果:

0444-02_fixed-navigation-bar-example-forbes

这种效果有一种快速简便的实现方法,需要用到HTML和CSS代码。

HTML

<nav class="fixed-nav-bar">
 </nav>

CSS

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

html中为导航栏命名fixed-nav-bar,css属性中position表示位置,fixed表示固定,顶部和左侧的值为0,这样导航就会贴着浏览器的左边和上边,注意z-index的值为9999,他的意思是当导航栏与其他网页元素重叠时,导航栏处于最上方而不会被覆盖。如果你还不是很了解z-index的用法,可以看看这篇文章:z-index属性用法详解

本文链接:用HTML和CSS制作固定的网站导航栏

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

One Response to 用HTML和CSS制作固定的网站导航栏

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流