各种CSS导航代码集合！CV即可！水平导航，垂直导航，jd粘性导航…
时间：01-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，本文完。
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号