最新公告
  • 欢迎您光临旗鱼小站,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 将导航栏固定在页面顶部的方法(图文详解)

    大家在浏览网站时有没有发现,几乎每个网站都有导航栏,而且有些导航可以固定在顶部不动,不管滚动条移动到哪里,都会固定在一个位置,你知道顶部固定导航栏怎么写吗?这篇文章就给大家讲讲如何使导航栏固定在顶部,以及导航栏固定在顶部的代码,有一定的参考价值,感兴趣的朋友可以看看。

    实现将导航栏固定在顶部需要用到很多CSS中的属性,比如float浮动,position定位, list-style-type属性等等,如有不清楚的同学可以参考PHP中文网的相关文章,或者访问CSS视频教程,希望可以帮助到你。

    实例详解:用html和css将导航栏固定在顶部

    HTML部分:

    创建一个ul标签用于制作无序列表,因为需要页面跳转的效果,还要在li标签中插入a标签,将导航内容写入a标签中。最后创建一个div,将div高度设为1500px,当滑动滚动条时,方便观察导航栏的位置,具体代码如下

    <ul>    <li><a class="active" href="#home">首页</a></li>    <li><a href="#news">新闻动态</a></li>    <li><a href="#contact">联系我们</a></li>    <li><a href="#about">关于我们</a></li> </ul>    <div style="background-color:pink;height:1500px;"></div>

    CSS部分:

    基本框架已经搭建出来了,现在用CSS美化页面,用 float: left将无序列表左边浮动,排列在一行,用Padding调整导航之间的间距,用hover伪类选择器设置鼠标悬停效果,当鼠标经过导航时呈现红色,当导航被激活时,呈现黄色。最重要的一步就是将导航栏固定在页面顶部,我们用position: fixed这个属性,然后将它距离顶部的举例设为0(即top: 0),这样固定在顶部的导航就做好了,详细代码如下:

    *{margin:0;padding: 0;}    ul{        list-style-type: none;        overflow: hidden;        background-color: #333;        position: fixed;        top: 0;        width: 100%;    }      li {        float: left;    }       li a {        display: block;        color: white;        text-align: center;        padding: 14px 16px;        text-decoration: none;    }       li a:hover:not(.active) {        background-color: red;    }       .active {        background-color: yellow;    }

    效果图:

    将导航栏固定在页面顶部的方法(图文详解)

    由图可见,当滚动条往下滑动时,导航栏的位置没有发生变化,一直固定在顶部,实现导航栏固定在顶部的效果,最关键的一步就是使用定位 position并将其属性值设为 fixed,举例顶部的距离top设为0。

    以上给大家介绍了导航栏固定在顶部的实现方法,比较详细,刚刚接触前端的小伙伴,一定要自己动手尝试,看看自己能不能实现更加炫酷的效果,希望这篇文章对你有所帮助!

    旗鱼小站.我们不生产资源,我们只是大资源的搬运工
    旗鱼小站 » 将导航栏固定在页面顶部的方法(图文详解)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 1262500034@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者
    • 1031会员总数(位)
    • 2017资源总数(个)
    • 11本周发布(个)
    • 5 今日发布(个)
    • 207稳定运行(天)

    提供最优质的资源集合

    免费资源 精品源码