您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

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

时间：01-20来源：作者：点击数：27

前言

今天，我们综合运用之前所看到的知识，来写 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>