各种CSS导航代码集合！CV即可！水平导航，垂直导航，jd粘性导航…

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

287篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

今天，我们综合运用之前所看到的知识，来写 3 个有代表性的导航样式。

注意：文章中的 href 链接均为#，实际项目中替换为目标链接即可。

一、水平导航

先来看下效果。

图片

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 以上为CSS重置部分 */
      .nav-wrapper {
        width: 1200px;
        margin: 0px auto;
        background-color: #242424;
      }
      .nav-left {
        float: left;
      }
      .nav-left li {
        float: left;
        background: #242424;
      }
      .nav-left li a {
        display: block;
        padding: 0px 20px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
      }
      .nav-left li a.down {
        background: url(img/icon-bottom-arrow.png) no-repeat right -5px center; /* 背景图片下三角，背景图片的位置：右侧 居中 */
      }
      .nav-left li.current a {
        color: #fff; /* 当前选中项的文字颜色 */
        background: #000 url(img/icon-top-arrow.png) no-repeat bottom -1px center; /* 背景图片上三角，背景图片的位置：底部-1像素 居中 */
      }
      .nav-left li:hover a {
        color: #fff;
        background-color: #000;
        transition: all 0.5s ease-in; /* css3属性，设置过渡效果，使元素在变化时更加平滑 */
      }
      .nav-left li:hover a.down {
        color: #fff;
        background: #000 url(img/icon-bottom-arrow.png) no-repeat right -5px center;
        transition: all 0.3s; /* css3属性，设置过渡效果，使元素在变化时更加平滑 */
      }
      .nav-right {
        float: right;
      }
      .nav-right a {
        display: inline-block;
        padding: 0px 20px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
        position: relative;
      }
      .nav-right a::after {
        position: absolute;
        content: '|'; /* 竖线分隔 */
        right: 0px;
      }
      .nav-right a:last-child::after {
        content: '';
      }
    </style>
  </head>
  <body>
    <div class="nav-wrapper clearfix">
      <div class="nav-left clearfix">
        <li class="current"><a href="#">精选</a></li>
        <li><a href="#">智能机器</a></li>
        <li><a href="#">居家优品</a></li>
        <li><a href="#">关注</a></li>
        <li><a href="#">进口好物</a></li>
        <li><a href="#" class="down">下载客户端</a></li>
      </div>
      <div class="nav-right">
        <a href="#">帮助中心</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  </body>
</html>

二、垂直导航

咱们这次固定到左侧，先来看下效果。

图片

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 固定在左侧 */
      .nav-left {
        width: 20%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;

        background-color: #242424;
      }
      .nav-left li a {
        display: block;
        line-height: 50px;
        color: #cccccc;
        font-size: 14px;
        padding-left: 20px;
        /* 这里统一加图标，如需个性图标，给a加class 分别写入图标路径即可 */
        background: url(img/icon-heart.png) no-repeat left -2px center;
      }
      .nav-left li.current a {
        color: #fff;
        background-color: #da1f15;
      }
      .nav-left li:hover a {
        color: #fff;
        background-color: #da1f15;
        transition: all 0.3s; /* css3属性，设置过渡效果，使元素在变化时更加平滑 */
      }
      .main-box {
        margin-left: 20%; /* 设置主内容区域与左侧导航栏的距离 */
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="nav-left">
      <li class="current"><a href="#">精选</a></li>
      <li><a href="#">智能机器</a></li>
      <li><a href="#">居家优品</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">进口好物</a></li>
      <li><a href="#">精选</a></li>
      <li><a href="#">智能机器</a></li>
      <li><a href="#">居家优品</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">进口好物</a></li>
      <li><a href="#">精选</a></li>
      <li><a href="#">智能机器</a></li>
      <li><a href="#">居家优品</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">进口好物</a></li>
      <li><a href="#">精选</a></li>
      <li><a href="#">智能机器</a></li>
      <li><a href="#">居家优品</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">进口好物</a></li>
      <li><a href="#">精选</a></li>
      <li><a href="#">智能机器</a></li>
      <li><a href="#">居家优品</a></li>
      <li><a href="#">关注</a></li>
      <li><a href="#">进口好物</a></li>
    </div>
    <div class="main-box">
      <p>周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000 年，发行个人首张音乐专辑《Jay》 [26]。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002 年，举行“The One”世界巡回演唱会 [1]。2003 年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004 年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到 300 万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005 年，主演个人首部电影《头文字 D》 [314]，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖 [3] [315]。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。</p>
      <p>周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000 年，发行个人首张音乐专辑《Jay》 [26]。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002 年，举行“The One”世界巡回演唱会 [1]。2003 年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004 年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到 300 万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005 年，主演个人首部电影《头文字 D》 [314]，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖 [3] [315]。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。</p>
      <p>周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000 年，发行个人首张音乐专辑《Jay》 [26]。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002 年，举行“The One”世界巡回演唱会 [1]。2003 年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004 年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到 300 万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005 年，主演个人首部电影《头文字 D》 [314]，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖 [3] [315]。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。</p>
    </div>
  </body>
</html>

三、粘性导航

比如，jd 这样的。主要配合了之前的定位知识。CSS基础：position定位的5个类型详解！

图片

咱们的效果如下：

图片

代码如下：

      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box; /* 改变元素的盒模型，使得元素的宽度和高度包括内容的宽度和高度，以及内边距和边框的空间。这样做的好处是可以更加直观地设置元素的尺寸，不必过多考虑内边距和边框的影响，简化了布局计算过程，提高了开发效率 */
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 以上为CSS重置部分 */
      .nav-box {
        position: sticky;
        top: 0px;
        background-color: #242424;
        border-bottom: 5px solid #c20c0c;
      }
      .nav-box li {
        float: left;
        background: #242424;
      }
      .nav-box li a {
        display: block;
        padding: 0px 20px;
        line-height: 70px;
        color: #cccccc;
        font-size: 14px;
      }
      .nav-box li a.down {
        background: url(img/icon-bottom-arrow.png) no-repeat right -5px center; /* 背景图片下三角，背景图片的位置：右侧 居中 */
      }
      .nav-box li.current a {
        color: #fff; /* 当前选中项的文字颜色 */
        background: #000 url(img/icon-top-arrow.png) no-repeat bottom -1px center; /* 背景图片上三角，背景图片的位置：底部-1像素 居中 */
      }
      .nav-box li:hover a {
        color: #fff;
        background-color: #000;
        transition: all 0.5s ease-in; /* css3属性，设置过渡效果，使元素在变化时更加平滑 */
      }
      .nav-box li:hover a.down {
        color: #fff;
        background: #000 url(img/icon-bottom-arrow.png) no-repeat right -5px center;
        transition: all 0.3s; /* css3属性，设置过渡效果，使元素在变化时更加平滑 */
      }
      .container {
        margin: 20px 0px;
      }
      .container div {
        float: left;
        width: 22%;
        margin-right: 4%;
        border: 1px solid #333;
        box-sizing: border-box;
      }
      .container div:nth-child(4n) {
        margin-right: 0;
      }
      .container img {
        transition: all 0.3s; // 添加过渡效果
      }
      .container div p {
        margin: 10px 10px;
        line-height: 24px;
        height: 48px;
        color: #333;
        font-size: 14px;
        /* 设置超出2行显示省略号 */
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .container div:hover img {
        opacity: 0.5;
      }
      .main-container {
        width: 1200px;
        margin: 0px auto;
      }
      .intro {
        margin: 50px 0px;
      }

 <div class="main-container">
      <div>
        <p class="intro">周杰伦（Jay Chou），1979 年 1 月 18 日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000 年，发行个人首张音乐专辑《Jay》 [26]。2001 年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002 年，举行“The One”世界巡回演唱会 [1]。2003 年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第 15 届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004 年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到 300 万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005 年，主演个人首部电影《头文字 D》 [314]，并凭借该片获得第 25 届香港电影金像奖和第 42 届台湾电影金马奖的最佳新演员奖 [3] [315]。2006 年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。</p>
        <br />
        <h1>向下滑动页面，以查看粘性导航的效果~</h1>
        <br />
      </div>
      <div class="nav-box clearfix">
        <li class="current"><a href="#">精选</a></li>
        <li><a href="#">智能机器</a></li>
        <li><a href="#">居家优品</a></li>
        <li><a href="#">关注</a></li>
        <li><a href="#">进口好物</a></li>
      </div>
      <div class="">
        <div class="container clearfix">
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
          <div>
            <img src="img/tree.png" alt="" />
            <p>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          </div>
        </div>
      </div>
    </div>

ok，本文完。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/576760.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

mysql的多表查询和子查询

mysql的多表查询和子查询

多表查询&#xff1a;查询数据时&#xff0c;需要使用多张表来查询 多表查询分类&#xff1a; 1.内连接查询 2.外连接查询 3.子查询 笛卡尔积&#xff1a; create table class (id int primary key auto_increment,name varchar(10) ); create table student (id int primar…
阅读更多...
【TCP：可靠数据传输，快速重传，流量控制，TCP流量控制】

【TCP：可靠数据传输，快速重传，流量控制，TCP流量控制】

文章目录 可靠数据传输TCP&#xff1a;可靠数据传输TCP发送方事件快速重传流量控制TCP流量控制 可靠数据传输 TCP&#xff1a;可靠数据传输 TCP在IP不可靠服务的基础上建立了rdt 管道化的报文段 GBN or SR 累计确认&#xff08;像GBN&#xff09;单个重传定时器&#xff08;像…
阅读更多...
搞懂特殊的引用类型接口、枚举、注解、记录、包装类！

搞懂特殊的引用类型接口、枚举、注解、记录、包装类！

面向对象系列——特殊的引用类型&#xff08;与class并列地位&#xff09; 文章目录 面向对象系列——特殊的引用类型&#xff08;与class并列地位&#xff09;特殊的&#xff1a;接口、枚举、注解、记录&#xff0c;包装类一、interface接口(不是类)—提供一种规范(具有多态性…
阅读更多...
ionic 中对Input输入框、searchbar进行solr检索

ionic 中对Input输入框、searchbar进行solr检索

一、概述 Ionic 是一个用于开发跨平台应用程序的开源工具&#xff0c;可以使用 Angular、React 或 Vue 等前端框架。要在 Ionic 应用程序中实现实时与 Solr 通信&#xff0c;可以使用 HTTP 客户端&#xff08;如 Angular 的 HttpClient 或 Ionic 的 Native HTTP&#xff09;…
阅读更多...
MySQL—MySQL的存储引擎之InnoDB

MySQL—MySQL的存储引擎之InnoDB

MySQL—MySQL的存储引擎之InnoDB 存储引擎及种类 存储引擎说明MyISAM高速引擎&#xff0c;拥有较高的插入&#xff0c;查询速度&#xff0c;但不支持事务InnoDB5.5版本后MySQL的默认数据库存储引擎&#xff0c;支持事务和行级锁&#xff0c;比MyISAM处理速度稍慢ISAMMyISAM的…
阅读更多...
一分钟教你下载小程序视频到手机#下载高手

一分钟教你下载小程序视频到手机#下载高手

本文就教你们如何下载小程序的视频到手机 首先将小程序视频下载到电脑上&#xff0c;然后再传送到手机上,这样就实现了下载小程序到手机上 可是怎么将小程序下载到电脑上呢&#xff1f;这里要借用一个工具&#xff1a;下载高手 下载高手工具我已经打包好了&#xff0c;有需要…
阅读更多...
【算法题解】

【算法题解】

文章目录 day4_26最长回文子串思路&#xff1a;代码&#xff1a; **DP30** **买卖股票的最好时机(一)**思路&#xff1a;贪心代码&#xff1a; 过河卒思路&#xff1a;动态规划---路径类代码&#xff1a; day4_26 https://www.nowcoder.com/questionTerminal/12e081cd10ee4794…
阅读更多...
生命周期评估（LCA）Simapro软件应用与碳足迹分析

生命周期评估（LCA）Simapro软件应用与碳足迹分析

各企事业单位&#xff1a; SimaPro以系统和透明的方式轻松建模和分析复杂的生命周期&#xff0c;通过确定供应链中每个环节的热点&#xff0c;从原材料的提取到制造&#xff0c;分销&#xff0c;使用和处置&#xff0c;衡量所有生命周期阶段的产品和服务对环境的影响。SimaPro是…
阅读更多...
又重新搭了个个人博客

又重新搭了个个人博客

哈喽大家好&#xff0c;我是咸鱼。 前段时间看到一个学弟写了篇用 Hexo 搭建博客的教程&#xff0c;心中沉寂已久的激情重新被点燃起来。&#xff08;以前搞过一个个人网站&#xff0c;但是因为种种原因最后不了了之&#xff09; 于是花了一天时间参考教程搭了个博客网站&…
阅读更多...
广工电工与电子技术实验报告-8路彩灯循环控制电路

广工电工与电子技术实验报告-8路彩灯循环控制电路

实验代码 module LED_water (clk,led); input clk; output [7:0] led; reg [7:0] led; integer p; reg clk_1Hz; reg [7:0] current_state, next_state; always (posedge clk) begin if(p25000000-1)begin …
阅读更多...
JVM（Jvm如何管理空间？对象如何存储、管理？）

JVM（Jvm如何管理空间？对象如何存储、管理？）

Jvm如何管理空间&#xff08;Java运行时数据区域与分配空间的方式&#xff09; ⭐运行时数据区域 程序计数器 程序计数器&#xff08;PC&#xff09;&#xff0c;是一块较小的内存空。它可以看作是当前线程所执行的字节码的行号指示器。Java虚拟机的多线程是通过时间片轮转调…
阅读更多...
Flutter 从 Assets 中读取 JSON 文件：指南 [2024]

Flutter 从 Assets 中读取 JSON 文件：指南 [2024]

在本教程中&#xff0c;我们将探讨如何从 Flutter 项目中的 asset 中读取 JSON 文件。您将找到详细的解释、实际示例和最佳实践&#xff0c;使您的 JSON 文件处理顺利高效。那么&#xff0c;让我们深入了解 Flutter 和 JSON 的世界吧&#xff01; 从 asset 中读取 JSON 文件 …
阅读更多...
RTK负载（4K可见光+高分热成像+超广角+激光测距）四光AI智能识别跟踪吊舱技术详解

RTK负载（4K可见光+高分热成像+超广角+激光测距）四光AI智能识别跟踪吊舱技术详解

无人机光电吊舱的RTK负载&#xff08;4K可见光高分热成像超广角激光测距&#xff09;AI智能识别跟踪吊舱技术是一种高度集成和先进的无人机观测系统。系统结合了无人机的飞行能力和光电吊舱的多功能传感器&#xff0c;通过集成RTK&#xff08;实时动态差分定位&#xff09;技术…
阅读更多...
WebGL开发框架比较

WebGL开发框架比较

WebGL开发框架提供了一套丰富的工具和API&#xff0c;使得在Web浏览器中创建和操作3D图形变得更加容易。以下是一些流行的WebGL开发框架及其各自的优缺点。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Three.js 优点&#xff1a…
阅读更多...
WoodMart主题下载：为您的电商网站带来自然而优雅的购物体验

WoodMart主题下载：为您的电商网站带来自然而优雅的购物体验

在电子商务的激烈竞争中&#xff0c;一个设计精良、用户友好的在线商店是吸引和保留客户的关键。WoodMart主题&#xff0c;作为一款专为Shopify平台设计的高级主题&#xff0c;以其自然美学和强大的功能&#xff0c;帮助您的商店在众多竞争对手中脱颖而出。 [WoodMart主题的核…
阅读更多...
运行游戏提示dll文件丢失，分享多种有效的解决方法

运行游戏提示dll文件丢失，分享多种有效的解决方法

在我们日常频繁地利用电脑进行娱乐活动&#xff0c;特别是畅玩各类精彩纷呈的电子游戏时&#xff0c;常常会遭遇一个令人困扰的问题。当我们满怀期待地双击图标启动心仪的游戏程序&#xff0c;准备全身心投入虚拟世界时&#xff0c;屏幕上却赫然弹出一条醒目的错误提示信息&…
阅读更多...
【书生浦语第二期实战营学习作业笔记(二)】

【书生浦语第二期实战营学习作业笔记(二)】

书生浦语第二期实战营学习作业&笔记(二) 操作文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/helloworld/hello_world.md 基础作业 &#xff1a; 使用 InternLM2-Chat-1.8B 模型生成 300 字的小故事&#xff1a; 八戒部署&#xff08;笔记&#xff0…
阅读更多...
基于灰狼算法的综合能源系统多时间尺度优化调度（附matlab程序）

基于灰狼算法的综合能源系统多时间尺度优化调度（附matlab程序）

0.代码链接 基于灰狼算法的综合能源系统多时间尺度优化调度&#xff08;MATLAB程序&#xff09;资源-CSDN文库 1.简述 对于冷、热、电联供综合能源系统优化问题&#xff0c;为了提高可再生能源利用率&#xff0c;故以弃风、弃光量最小和综合能源系统运行经济性为优化目标&…
阅读更多...
mac配置maven

mac配置maven

在 macOS 上配置 Maven 也相对简单。以下是一种常用的方法&#xff1a; 1. 安装maven **下载 Maven&#xff1a;**首先&#xff0c;你需要从 Maven 官网&#xff08;https://maven.apache.org/download.cgi&#xff09;下载最新版本的 Maven。你可以选择二进制压缩包&#xf…
阅读更多...
redis常用数据结构

redis常用数据结构

redis常用数据结构 Redis 底层在实现下面数据结构的时候&#xff0c;会进行特定的优化&#xff0c;来达到节省时间/空间的效果。 内部结构 String raw&#xff08;最基本的字符串&#xff09;&#xff0c;int&#xff08;实现计数功能&#xff0c;当value为整数的时候会用整…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站