css 实现电梯导航

.星空.

已于 2023-08-19 19:57:01 修改

阅读量740

点赞数

分类专栏： css 文章标签： css tensorflow 前端

于 2023-08-19 18:32:45 首次发布

本文链接：https://blog.csdn.net/m0_72759446/article/details/132382629

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现原理：利用css实现电梯导航很简单，基本原理就是通过a标签绑定跳转目标的id来实现的

html代码：

 <div class="body">
      <div class="top" id="top"></div>
      <div class="con1" id="con1"></div>
      <div class="con2" id="con2"></div>
      <div class="footer" id="footer"></div>
    </div>
    <div class="navs">
      <div class="navs_top">
        <a href="#top">top</a>
      </div>
      <div class="navs_nav">
        <a href="#con1">nav</a>
      </div>
      <div class="navs_con">
        <a href="#con2">con</a>
      </div>
      <div class="navs_footer">
        <a href="#footer">footer</a>
      </div>
    </div>

css代码：

.top {
        width: 80%;
        background-color: aqua;
        height: 300px;
        margin: auto;
      }
      .con1 {
        position: relative;
        width: 80%;
        background-color: brown;
        height: 300px;
        margin: auto;
      }
      .con2 {
        width: 80%;
        background-color: wheat;
        height: 300px;
        margin: auto;
      }
      .footer {
        width: 80%;
        background-color: rebeccapurple;
        height: 300px;
        margin: auto;
      }
      .navs {
        position: fixed;
        right: 4.375rem;
        top: 50%;
      }

      html{
        /* 页面滚动效果 */
        scroll-behavior: smooth;
      }