CSS制作导航栏

⼀款纯css实现的漂亮导航菜单（也适⽤于个⼈中⼼） 今天给⼤家分享⼀款纯css实现的漂亮导航。

之前为⼤家分享过jquery实现的个⼈中⼼导航菜单，今天这款也是适合放在个⼈中⼼。

还带来图标，效果不错。

⼀起看下效果图： 实现的代码。

html代码：XML/HTML Code复制内容到剪贴板1. <div class="l-main">2. <div class="menu">3. <header class="menu__header">4. <h1 class="menu__header-title">5. Incoming Messages</h1>6. </header>7. <div class="menu__body">8. <ul class="nav">9. <li class="nav__item"><a href="https://" class="nav__item-link is-active">10. <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>11. <span class="badge badge--warning">32</span> </a></li>12. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">13. </i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a>14. </li>15. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">16. </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a>17. </li>18. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">19. </i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a>20. </li>21. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">22. </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a>23. </li>24. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">25. Show all</span> </a></li>26. </ul>27. </div>28. </div>29. <div class="menu menu--small">30. <header class="menu__header">31. <h1 class="menu__header-title">32. Incoming</h1>33. </header>34. <div class="menu__body">35. <ul class="nav">36. <li class="nav__item"><a href="https://" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">37. </i><span class="badge badge--warning">32</span> </a></li>38. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">39. </i><span class="badge">8</span> </a></li>40. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">41. </i><span class="badge">0/17</span> </a></li>42. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">43. </i><span class="badge">3</span> </a></li>44. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">45. </i><span class="badge">9</span> </a></li>46. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">47. Show all</span> </a></li>48. </ul>49. </div>50. </div>51. </div> css代码：CSS Code复制内容到剪贴板1. body2. {3. background: #F4F4F4;4. font-family: Arial, sans-serif;5. font-size: 14px;6. font-weight: lighter;7. }8.9. .l-main10. {11. width: 530px;12. margin: 0 auto;13. }14.15. .menu16. {17. width: 250px;18. margin: 40px;19. background: #fff;20. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);21. border-radius: 5px;22. float: left;23. }24.25. .menu__header26. {27. background: #4B4F55;28. border-bottom: 1px solid #353A40;29. border-radius: 5px 5px 0 0;30. }31.32. .menu__header-title33. {34. color: #fff;35. padding: 15px;36. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);37. }38.39. .menu__body40. {41. border-radius: 0 0 5px 5px;42. }43.44. .menu--small45. {46. width: 110px;48.49. .nav50. {51. list-style: none;52. }53.54. .nav__item55. {56. position: relative;57. }58.59. .nav__item-link60. {61. padding: 10px 15px;62. text-decoration: none;63. color: #8B8E93;64. display: block;65. border-bottom: 1px solid #F0F0F0;66. }67. .nav__item-link:hover68. {69. background: #f0f0f0;70. }71. .nav__item-link.is-active72. {73. background: #6E757F;74. color: #fff;75. border-bottom-color: #4B4F55;76. box-shadow: 0 1px 0 #7A828D inset;77. }78. .nav__item-link.is-active:after79. {80. content: '';81. display: block;82. position: absolute;83. top: 50%;84. rightright: -6px;85. margin-top: -6px;86. border-top: 6px solid transparent;87. border-bottom: 6px solid transparent;88. border-left: 6px solid #6E757F;89. }90. .nav__item-link.is-active .nav__item-icon91. {92. color: #fff;93. }94. .nav__item:last-child .nav__item-link95. {96. border-bottom: none;97. }98.99. .nav__item-icon100. {101. color: #D2D5DA;102. width: 20px;103. text-align: center;104. font-size: 18px;105. margin-right: 10px;106. }107.108. .badge110. font-size: 12px;111. padding: 2px 8px;112. border: 1px solid #D1D1D1;113. border-radius: 10px;114. position: absolute;115. top: 10px;116. rightright: 15px;117. }118.119. .badge--warning120. {121. background: #ED373F;122. border-color: #ED373F;123. } 以上就是今天分享的⼀款纯css实现的漂亮导航。

纯css实现⼆级导航菜单效果,通过简单的⿏标事件操作页⾯元素样式变换实现⼆级导航菜单的功能。

HTML代码如下<!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt><a class="first" href="#" >⾸页</a></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="ty"><dt><a href="#">特约</a><ul><li class="tip"><a href="#" >签约请求</a></li><li><a href="#" >签约服务</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="bx"><dt><a href="#">保险</a><ul><li class="tip"><a href="#" >保险信息</a></li><li><a href="#" >新员投保</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dd"><dt><a href="#">订单</a><ul><li class="tip"><a href="#" >订单管理</a></li><li><a href="#" >评价管理</a></li><li><a href="#" >维修记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="dp"><dt><a href="#">店铺</a><ul><li class="tip"><a href="#" >店铺设置</a></li><li><a href="#" >店铺信息</a></li><li><a href="#" >维修分类</a></li><li><a href="#" >维修品牌</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="fw"><dt><a href="#">服务</a><ul><li class="tip"><a href="#" >投诉管理</a></li> <li><a href="#" >退约记录</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="hf"><dt><a href="#">会费</a><ul><li class="tip"><a href="#" >年费/保证⾦</a></li> <li><a href="#" >店铺续约</a></li></ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="zp"><dt><a href="#">招聘</a><ul><li class="tip"><a href="#" >招聘信息</a></li> </ul></dt><dd class="line">|</dd><dd class="triangle"></dd></dl><dl class="tj"><dt><a href="#">统计</a><ul><li class="tip"><a href="#" >流量统计</a></li> <li><a href="#" >销售统计</a></li><li><a href="#" >⾏业分析</a></li></ul></dt><dd class="triangle"></dd></dl></div><!-- 头部导航栏结束 --><style>#nav{float:left;margin-left:10px;margin-top:20px;}#nav dl{float:left;font-size:14px;padding-left:5px;position:relative;}#nav dt{float:left;display:block;width:48px;height:auto;text-align: center;line-height:30px;}#nav dt a{color:#999999;}#nav dl .first{color:#fff;font-weight:bold;}#nav .line{float:left;margin-top:6px;margin-left:4px;}#nav .triangle{display:none;background:url(../images/l_bgs_img.png);width:21px;height:13px;background-position:-256px -11px;position:relative;top:41px;left:14px;}#nav dt:hover{background:#fff;}#nav dt:hover a{color:#000;}#nav ul{display:none;width:auto;min-width:90px;height:auto;/*outline: 1px solid #000;*/border:1px solid #000;border-top:0;position:absolute;left:4px;z-index:2;}#nav ul .tip{margin-top:10px;}#nav li{width:auto;margin:6px 4px;}#nav li:hover{background:#555555;}#nav li:hover a{color:#fff;}#nav dt:hover ul{display:block;background:#fff;}</style>有⼀个⽹站的导航栏给我的印象不错,于是就把⽹页保存下来想研究⼀下它的js代码，没想到的是竟然是⽤.NET的⾃定义控件⽣成的！上⾯的代码差点没把我看晕过去！（有兴趣的话可以试⼀试哦，⾥⾯N多变量的～～～汗），还好⼤三时学过c＃（垃圾）加上它的控件可以试⽤，就下下来⽤了，感觉还真的不错，简单易⽤，可是～测试的时候差点没昏了！NND试⽤版的竟然只能再本机测试，别⼈的PC访问不但显⽰不了⽹页还警告说要注册购买⼤哥的竟然还要$（本少爷每⽉实习补助才1千￥啊），⼀怒之下决定⾃⼰封装⼀个。

使⽤CSS制作⽴体导航栏css制作的⽴体导航栏，具体实现代码如下所⽰：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>CSS制作⽴体导航</title><link rel="stylesheet" href="/demo/css3/base.css"><style>body{background: #ebebeb;}.nav{width:560px;height: 50px;font:bold 0/50px Arial;text-align:center;margin:40px auto 0;background: #f65f57;/*制作导航圆⾓*/border-radius: 8px;/*制作导航⽴体效果*/box-shadow: 0 7px 0 #ba4a45;}.nav a{display: inline-block;/* a元素的过渡属性：1、设置所有a标签过渡；2、过渡时间；3、速度曲线：以慢速开始的过渡效果 */-webkit-transition: all 0.2s ease-in;/* Safari 和 Chrome */-moz-transition: all 0.2s ease-in;/* Firefox */-o-transition: all 0.2s ease-in;/* Opera */-ms-transition: all 0.2s ease-in;/* IE 9 */transition: all 0.2s ease-in;}.nav a:hover{/* ⿏标移上时的效果；定义2D旋转10度 */-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);}.nav li{position:relative;display:inline-block;padding:0 16px;font-size: 14px;text-shadow:1px 2px 4px rgba(0,0,0,.5);list-style: none outside none;}/*制作导航分隔线效果*/.nav li::before,.nav li::after{content:"";position:absolute;top:14px;height: 25px;width: 1px;}.nav li::after{right: 0;/* 线性渐变 */background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));}.nav li::before{left: 0;background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);}/*删除导航第⼀个导航项左边的分隔线*/.nav li:first-child::before{background: none;}/*删除导航最后⼀个导航右边的分隔线*/.nav li:last-child::after{background: none;}.nav a,.nav a:hover{color:#fff;text-decoration: none;}</style></head><body><ul class="nav"><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></ul></body></html>效果图：总结：1、body部分⽤⽆序列表2、（1）hover ⿏标移上时的效果。

垂直导航栏1. 创建名为navmenu.css的样式表文件2. 创建名为nav.html的HTML文件3. 在名为nav.html的HTML文件中通过属性→样式→附加样式表,导入名为navmenu.css的样式表文件4. 创建新样式如下:在选择器类型中选择:高级;在名称栏中输入:#navmenu定位设置:position: absolute;width: 150px;left: 25px;top: 50px;5. 创建列表和<div>标签在名为nav.html的HTML文件中,插入<div>标签和项目列表,并作相关的链接如下:<div id="navmenu"><ul ><li><a href="#">首页</a></li><li><a href="#">个人简历</a></li><li><a href="#">我的能力</a></li><li><a href="#">联系我</a></li></ul></div>6. 创建导航栏样式/*为所有的列表项定义字体外形和大小，删除标准项目符号，并清除列表中的空白和填充*/#navmenu ul {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;margin: 0px;padding: 0px;border: 1px solid #990000;list-style-type: none;}/*保证所出现底部的空白用于分隔每个列表项，两项之间为2px*/#navmenu li {margin-bottom: 2px;}/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/#navmenu a {background-image: url(images/listnav_out.jpg);display: block;width: 140px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 5px;border: 1px solid #cc9900;}/*当按钮处于标准或已按状态时定义其文本外观，制定一种特别的颜色并清除连接的下划线,此项定义在标签#navmenu 中正常链接、已访问链接的样式*/#navmenu a:link,#navmenu a:visited {color: #993300;text-decoration: none;}/*在跳转状态中交换图像并改变文本颜色*/#navmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}/*设定所选按钮的外观和感觉，在导航栏中指示当前页面*/#selnavmenu a:link,sel#navmenu a:visited,#selnavmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}水平导航步骤一:创建名为:menunav.html文件，创建一个项目列表（文本→列表→项目列表<ul><li><a href="#">学生信息</a></li><li><a href="#">学费信息</a></li><li><a href="#">报到信息</a></li><li><a href="#">就业信息</a></li></ul>效果如下：•学生信息•学费信息•报到信息•就业信息步骤二:隐藏li的默认样式定义CSS如下:<style type="text/css"><!--/*表示定义的样式将作用在menunav的层里的ul标签上。

学习使用HTML和CSS设计网页导航栏第一章：HTML和CSS的基础知识HTML（超文本标记语言）和CSS（层叠样式表）是开发和设计网页所必备的两种编程语言。

在开始学习如何设计网页导航栏之前，我们需要对HTML和CSS的基础知识有一定的了解。

1.1 HTML的基础语法HTML由一系列的标签组成，它们告诉浏览器如何展示网页的内容。

一个基本的HTML文件通常由<html>、<head>和<body>这三个标签组成。

1.2 CSS的基本概念CSS用于控制网页的样式和布局。

它通过选择器（如标签名、类或ID）和属性（如颜色、字体、边框）来定义元素的外观。

第二章：构建网页导航栏的HTML结构在设计一个网页导航栏之前，我们需要先了解导航栏的基本结构。

一个典型的导航栏通常包含一个标题（Logo）、几个导航链接（Links）以及可能的菜单（Menu）。

2.1 创建导航栏的外部容器使用HTML的<div>标签创建一个包含导航栏所有内容的容器。

给这个容器添加一个唯一的标识符，方便在CSS中访问。

2.2 添加Logo和导航链接在导航栏容器中，我们可以使用HTML的<img>标签添加Logo，并使用<a>标签添加导航链接。

Logo可以是一个图片文件，而导航链接可以是文本或按钮。

2.3 导航栏菜单的设计如果导航栏中有多个链接，我们可以使用HTML的<ul>和<li>标签创建一个无序列表，并将导航链接放在每个<li>标签中。

这样就可以形成一个简单的导航栏菜单。

第三章：使用CSS设计网页导航栏的样式一旦导航栏的HTML结构创建完成，我们就可以使用CSS来设计导航栏的样式。

CSS提供了丰富的属性和选择器，可以实现各种导航栏的样式效果。

3.1 背景颜色和边框通过设置导航栏容器的背景色和边框属性，我们可以改变导航栏的背景和外观。

纯css实现的下拉导航栏附html结构及css样式这⾥是html⽂件复制代码代码如下:<!DOCTYPE html><html><head><title>导航栏</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="css/navigator.css"></head><body><div class="navigator"><ul><li><a href="#">AAAA</a><ul><li><a href="#">A1</a></li><li><a href="#">A2</a></li><li><a href="#">A3</a></li><li><a href="#">A4</a></li><li><a href="#">A5</a></li><li><a href="#">A6</a></li></ul></li><li><a href="#">BBBB</a><ul><li><a href="#">B1</a></li><li><a href="#">B2</a></li><li><a href="#">B3</a></li><li><a href="#">B4</a></li><li><a href="#">B5</a></li><li><a href="#">B6</a></li></ul></li><li><a href="#">CCCC</a><ul><li><a href="#">C1</a></li><li><a href="#">C2</a></li><li><a href="#">C3</a></li><li><a href="#">C4</a></li><li><a href="#">C5</a></li><li><a href="#">C6</a></li></ul></li><li><a href="#">DDDD</a><ul><li><a href="#">D1</a></li><li><a href="#">D2</a></li><li><a href="#">D3</a></li><li><a href="#">D4</a></li><li><a href="#">D5</a></li><li><a href="#">D6</a></li></ul></li><li><a href="#">EEEE</a><ul><li><a href="#">E1</a></li><li><a href="#">E2</a></li><li><a href="#">E3</a></li><li><a href="#">E4</a></li><li><a href="#">E5</a></li><li><a href="#">E6</a></li></ul></li><li><a href="#">FFFF</a><ul><li><a href="#">F1</a></li><li><a href="#">F2</a></li><li><a href="#">F3</a></li><li><a href="#">F4</a></li><li><a href="#">F5</a></li><li><a href="#">F6</a></li></ul></li><li><a href="#">GGGG</a><ul><li><a href="#">G1</a></li><li><a href="#">G2</a></li><li><a href="#">G3</a></li><li><a href="#">G4</a></li><li><a href="#">G5</a></li><li><a href="#">G6</a></li></ul></li></ul></div></body></html>下⾯是css⽂件复制代码代码如下:.navigator{/*当然，宽度可以你⾃⼰定义*/width: 100%;margin: 0;}.navigator ul{/*这⾥必须设置内边距和外边距，因为浏览器会⾃动给ul设定值，会把导航栏挤歪*/ padding: 0;margin: 0;list-style-type: none;}.navigator li{/*本来ul是竖直排列的，对所有li元素进⾏float:left他就会⾃动全部靠左*/float: left;position :relative;}.navigator ul li a,.navigator ul li a:visited {/*这⾥设置text-decoration是为了防⽌a标签⾃⼰的样式*/ display: block;text-align: center;text-decoration: none;/*不对⽂本设置效果 */width: 184px;/*每⼀块的宽度*/height: 50px;/*每⼀块的⾼度*/color: black;/*⽂字颜⾊ */border: 1px solid #fff;/*边框⼤⼩和颜⾊ */border-width: 1px 1px 0 0;/*四个边框的宽度 ,注意，左右边框没有像素哦，仔细看导航栏左右有缝隙*/ background: #CCCCCC;/*背景颜⾊ */line-height: 50px;/*这是⼀个技巧，这⾥将height和line-height设置为⼀样的⾼度⽂字就会⽔平竖直居中 */ font-size: 17px;}.navigator ul li:hover a {/*这是⼀个css伪类，将⿏标移上去的时候字体和背景都会变⾊，移开⼜会变回来 */ color: #fff;background: #CCCCFF;}.navigator ul li ul {/*这⾥是为了将导航栏⾥的内容隐藏*/display: none;}.navigator ul li:hover ul {/*这⾥就是弹出的下拉菜单了*/display: block;position: absolute;top: 51px;left: 0;width: 185px;}.navigator ul li:hover ul li a {/*这⾥当然是定义下拉菜单⾥的a标签了*/display: block;background: #CCFFFF;color: #000;}.navigator ul li:hover ul li a:hover {/*这个是伪类，上⾯有说*/background: #dfc184;color: #000;}把css⽂件和html⽂件放在⼀个⽬录下就可以看了，有不妥的地⽅还请指正。

HTML+CSS实现顶部导航栏菜单制作导航栏的制作：技术要求：CSSHTML各类标签实现⽬的：制作导航栏菜单代码分析：基本样式清除⽆序列原点删除下划线删除⽂字默认居中a标签设置块级元素伪类选择器对a状态修饰分步实现：分三栏布局：使⽤浮动logo⼀栏；选择栏⼀栏；搜索栏⼀栏logo部分：img标签，导⼊图⽚，a标签超链接，img导⼊图⽚，防⽌图⽚失真width和height设置⼀个就可以了<div class="logo"><a href="#"><img src="D:\惠州客家⾯.jpg" width="150" alt="惠州客家⾯"></a></div>选择栏：ul>li标签列表标签，a标签超链接<ul class="list"><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></ul>搜索栏：font表单，input属性，输⼊框和按钮<div class="search"><form><input type="submit" value="搜索" class="search1"><input type="text" class="content1"></form></div>实现分析：⾸先在body内设置⼀个站点的头部盒⼦，头部盒⼦⾥⾯有⼀个中⼼的盒⼦。