Day 19 静态页面结束固定导航栏-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70432149/article/details/126510524

博客讲述了如何使用HTML和CSS技术创建一个静态页面的固定导航栏，详细讲解了相关HTML结构和CSS样式设置，实现了在页面滚动时始终保持在顶部的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

    <!--有好货 爱逛街-->
    <div class="layer clearfix mt10">
      <!-- 有好货 -->
      <div class="goods fl">
        <div class="head clearfix">
          <h3 class="fl">
            <img src="../images/go.png" alt="有好货">
            <span class="iconfont">&#xe790;</span>
            <i>与品质生活不期而遇</i>
          </h3>
          <a href="#" class="fr change">换一换</a>
        </div>
        <ul class="list">
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <h4><a href="#">max破产都要买的口红</a></h4>
            <p class="text"><a href="#">《破产姐妹》max最爱tarte哑光口红笔</a></p>
            <a href="#" class="comment">
              <span class="iconfont">&#xe688;</span><i>5950人说好</i>
            </a>
          </li>
        </ul>
      </div>
      <!-- 爱逛街 -->
      <div class="goods fr shopping">
        <div class="head clearfix">
          <h3 class="fl">
            <img src="../images/go.png" alt="有好货">
            <span class="iconfont">&#xe790;</span>
            <i>献给聪明可爱的你</i>
          </h3>
          <a href="#" class="fr change">换一换</a>
        </div>
        <ul class="list">
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          <li>
            <a href="#"><img src="../images/2.jpg" alt=""></a>
            <p class="text">
              <span class="iconfont">&#xe617;</span>
              <a href="#">[饰悟]925纯银小花迷你耳钉女耳环气质复古略略略略略略</a>
            </p>
            <a href="#" class="comment">
              <span><img src="../images/图标.png" alt=""></span><i>哒哒哒哒</i>
            </a>
          </li>
          
        </ul>
      </div>
    </div>
    <!-- 右侧固定定位导航 -->
    <div id="tool">
      <span class="iconfont">&#x35ba;</span>
      <div class="btn">
        <a href="#" class="c4 active">爱逛 好货</a>
        <a href="#" class="c5">好店 直播</a>
        <a href="#" class="c6">品质 特色</a>
        <a href="#" class="c7">实惠 热卖</a>
        <a href="#" class="c4">猜你 喜欢</a>
        <a href="#" class="item6">反馈</a>
        <a href="#" class="">暴恐 举报</a>
      </div>
    </div>
  </body>
</html>

CSS：

/* 有好货 爱逛街 */
.goods {
  width: 590px;
  height: 658px;
  background-color: #fff;
  overflow: hidden;
}
.goods .head{
  height: 24px;
  line-height: 24px;
  margin: 20px 0;
  padding: 0 20px;
}
.goods .head h3{
  font-size: 0;
  font-weight: normal;
}
.goods .head h3 img{
  height: 24px;
}
.goods .head h3 span{
  vertical-align: middle;
  color: #ccc;
  font-size: 20px;
  margin: 0 5px;
}
.goods .head h3 i{
  font-size: 12px;
  vertical-align: middle;
  color: #999;
}
.goods .head .change{
  color: #999;
}
.goods .list{
  font-size: 0;
  text-align: center;
}
.goods .list li{
  width:180px;
  display: inline-block;
  margin: 0 2px 35px 2px;
  text-align: left;
}
.goods .list li img{
  width:180px;
  height: 180px;
}
.goods .list li h4{
  font-size: 16px;
  height: 28px;
  line-height: 28px;
  font-weight: normal;
}
.goods .list li h4 a:hover{
  color: #f40;
}
.goods .list li .text{
  font-size:14px;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
}
.goods .list li .text a{
  color: #999;
}
.goods .list li .comment{
  display: block;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #35b1ff;
  margin-top: 12px;
}
.goods .list li .comment span{
  font-size: 14px;
  margin-right: 4px;
}
/* 爱逛街 */
.shopping .list li .text{
  height: 44px;
  line-height: 22px;
  font-size: 14px;
  overflow: hidden;
  ma
}
.shopping .list li .text span{
  font-size:14px ;
  color: #ebebeb;
  position: relative;
  top:-5px;
}
.shopping .list li .text a:hover{
  color:#f40 ;
}
.shopping .list li .comment img{
  width:22px;
  height: 22px;
  border-radius: 50%;
}
.shopping .list li .comment{
  color: #999;
}
/* 右侧固定定位导航 */
#tool{
  width: 50px;
  height: 350px;
  
  position: fixed;
  top: 100px;
  right:3%;
  
}
#tool span{
  font-size: 32px;
  color: #ff7f13;
  width: 50px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  text-align: center;
  top: -28px;
}
#tool div{
  height: 350px;
  border-radius: 8px;
  overflow: hidden;
}
#tool a{
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #fff;
  word-break:keep-all;
  /* 在空格的地方强制换行 */
  padding-top: 7px;
  box-sizing: border-box;
  position: relative;
}
#tool a:after{
  /* 一个冒号是伪类，两个冒号是伪元素 */
  content:'';
  border-bottom: 1px solid #efefef;
  width: 34px;
  position: absolute;
  left: 8px;
  bottom:0;
}
#tool a.item6{
  line-height: 36px;
  /* padding-top: 16px; */
  
  /* 为什么是40？？？？ */
  
  
}
#tool a:hover,a.active{
  background-image: linear-gradient(135deg, #ff9000, #ff5000);
  /* deg是度数 */
  color: #fff;
  font-weight: bold;
}
#tool a:hover:after,a.active:after{
  border: none;
}

最终效果：

Day 19 静态页面结束 固定导航栏

Day 19 静态页面结束固定导航栏