基于CSS技术的网页导航栏制作

合集下载

一步步教大家编写酷炫的导航栏js+css实现

⼀步步教⼤家编写酷炫的导航栏js+css实现⼀步⼀步的学习制作导航栏，⽂章末尾再做个综合页⾯，分享给⼤家⼀个炫酷的导航栏供⼤家参考，具体内容如下1.当前页⾯⾼亮显⽰的导航栏⾸先是HTML代码,很简单,ul+li实现菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航栏⼀</title></head><body><header class="header"><div class="nva"><ul class="list"><li><a href="Android.html">Android</a></li><li><a href="C++.html">C++</a></li><li><a href="IOS.html">IOS</a></li><li><a href="Java.html">Java</a></li><li><a href="Ruby.html">Ruby</a></li></ul></div></header><h1>⾸页</h1></body></html>基本效果:接下来设置CSS属性,这⾥要注意标签a是⾏级元素,所以需要⽤display转成块级元素,这个很常⽤,还有就是line-height的常见⽤法*{ margin:0; padding: 0; }a{ text-decoration: none; }.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }.list li{ float: left; }.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }.list li a:hover{ background:#333; color:#fff; }.list li a.on{ background:#333; color:#fff; }h1{ margin: 20px auto; text-align: center; }实现的效果:最后就是JS动态添加定位效果了js⾥⾯这样考虑,页⾯跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果需要注意的就是如何获取URL,如何从URL⾥⾯查找出href信息$(function(){//当前链接以/分割后最后⼀个元素索引var index = window.location.href.split("/").length-1;//最后⼀个元素前四个字母,防⽌后⾯带参数var href = window.location.href.split("/")[index].substr(0,4);if(href.length>0){//如果匹配开头成功则更改样式$(".list li a[href^='"+href+"']").addClass("on");//[attribute^=value]：匹配给定的属性是以某些值开始的元素。

一款纯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+DIV制作导航菜单

边框：style：全为solid，width：全为1，color：灰色#ccc 方框：width：100
3
实验步骤及内容
Step5：选中某一行项目列表（<li>）,新建CSS规则,类型为：复合内容（基于选择的内容），名称为：#menu ul li。类型：line-height：30px 背景：background-color：白灰色#eee 方框：height：30 边框：style：solid（仅为bottom），1px，#ccc 下面为这些菜单加上链接，并制作交互效果，定义鼠标划过的状态。 Step6：选中要链接的文字，输入链接，可先设虚拟链接# Step7：新建CSS规则，类型为：标签（重新定义HTML元素），名称为： a 类型：color：黑色#000，text-decoration：none Step8：现在要为链接做交互效果。选中链接文字，新建CSS规则，类型：复合内容（基于选择的内容），名称为：a：hover 类型：color：红色#foo， underline（下划线）
4
2、超链接样式超链接有四种样式：
A:link （未访问的连接） A:visited（已访问的连接） A:hover（鼠标移动到连接上时的效果） A:active（选定的连接）
插入的链接默认是蓝色的带下划线的样式，我们可以通过 CSS样式来修改新建CSS规则，类型为：复合内容（基于选择的内容），名称从下拉列表中选择
最终效果
8
实验六：使用css+div制作导航菜单实验目的
掌握列表导航菜单的制作方法熟悉超链接的四种样式学会用CSS制作按钮掌握横向表导航菜单
纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务

CSS导航栏

CSS导航栏CSS 导航栏⼀、导航栏熟练使⽤导航栏，对于任何⽹站都⾮常重要。

使⽤CSS你可以转换成好看的导航栏⽽不是枯燥的HTML菜单。

⼆、导航栏=链接列表作为标准的HTML基础⼀个导航栏是必须的。

在我们的例⼦中我们将建⽴⼀个标准的HTML列表导航栏。

导航条基本上是⼀个链接列表，所以使⽤ <ul> 和 <li>元素⾮常有意义：<ul><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li></ul>注意：这⾥我们⽤ href="#"作为测试连接。

但在⼀个真正的 web 站点上需要真实的 url。

现在，让我们从列表中删除边距和填充：ul {list-style-type: none;margin: 0;padding: 0;}例⼦解析：list-style-type:none - 移除列表前⼩标志。

⼀个导航栏并不需要列表标记移除浏览器的默认设置将边距和填充设置为0上⾯的例⼦中的代码是垂直和⽔平导航栏使⽤的标准代码。

三、垂直导航栏上⾯的代码，我们只需要 <a>元素的样式，建⽴⼀个垂直的导航栏：a{display:block;width:60px;}⽰例说明：display:block - 显⽰块元素的链接，让整体变为可点击链接区域（不只是⽂本），它允许我们指定宽度width:60px - 块元素默认情况下是最⼤宽度。

使用CSS制作立体导航栏

使⽤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 ⿏标移上时的效果。

CSS导航栏创建操作步骤

垂直导航栏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标签上。

css3制作炫酷导航栏效果

css3制作炫酷导航栏效果今天主要利⽤hover选择器。

⿏标滑过查看效果。

⼀。

普通导航栏对于这种普通的导航栏，只是⿏标滑过的时候颜⾊会变，所以思路变得很简单。

（1）使⽤ul标签布局（2）⿏标经过事件<div id="demo1"><ul><li>Home</li><li>Content</li><li>Service</li><li>Team</li><li>Contact</li></ul></div>*{padding:0;margin:0;list-style:none;text-decoration:none;}a{color:#fff;}#demo1{width:600px;}#demo1 ul li{float:left;width:100px;height:50px;text-align:center;background:#ccc;line-height:50px;color:#FFF;}#demo1 ul li:hover{background:#999;}（⼆）括号类导航栏对于导航栏的排版这⾥就不多说了，可以看到当⿏标经过的时候会从⽂字中出现括号，思路：（1）当⽆⿏标经过事件时，括号其实是有的，只不多它处于隐形状态在⽂字中间（2）当⿏标经过时，括号从中间移动到两边，并且从隐形变为显⽰。

<div id="demo2"><ul><li><a href="#">Home</a></li><li><a href="#">Content</a></li><li><a href="#">Service</a></li><li><a href="#">Team</a></li><li><a href="#">Contact</a></li></ul></div>#demo2{width:600px;height:50px;margin:20px auto;}#demo2 ul li{position:relative;float:left;width:100px;height:50px;text-align:center;line-height:50px;background:#000;}#demo2 ul li a:before{content:"[";margin-right:10px;transform:translateX(20px);-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);}#demo2 ul li a:after{content:"]";margin-left:10px;transform:translateX(-20px);-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);}#demo2 ul li a:before,#demo2 ul li a:after{display:inline-block;opacity:0;transition:transform 0.3s, opacity 0.2s;-moz-transition:transform 0.3s, opacity 0.2s;-webkit-transition:transform 0.3s, opacity 0.2s;-ms-transition:transform 0.3s, opacity 0.2s;}#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {opacity: 1;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);transform: translateX(0px);}三。

CSS导航栏及弹窗示例代码

CSS导航栏及弹窗⽰例代码最近整理了CSS导航栏及弹窗，具体如下：CSS导航先来看下效果：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>body{font-size:12px;}#discuss{width:990px;margin:0 auto;}#mt{/*⾼度：30px，边框，上边框，背景颜⾊*/height:30px;border:1px solid #ddd;border-top:2px solid #9d9d9d;background:#F7F7F7;}#discuss-content{border-bottom:1px solid #ddd;padding-bottom:2px;}#discuss-datas{width:990px;}#discuss-datas thead td{/*加粗，上下内边距，下边框，⽂本居中对齐*/font-weight:bold;padding:5px 0;border-bottom:1px solid #ddd;text-align:center;color:#666;}/*处理 .col1 的样式 (每⾏第⼀列的效果)*/#discuss-datas td.col1{width:620px;text-align:left;}/*内容⾏中所有的列*/#discuss-datas tbody td{/*虚线下边框，上下内边距，⽂本⽔平居中对齐，⽂本颜⾊*/border-bottom:1px dotted #ddd;padding:5px 0;text-align:center;color:#9c9a9c;}/*处理所有超链接*/#discuss a{color:#005aa0;text-decoration:none;}#discuss a:hover{text-decoration:underline;}/*晒，论两幅图*/#discuss-datas b{/*宽度，⾼度，背景属性*/padding-left:21px;padding-bottom:2px;padding-top:3px;background-image:url(../Images/iconlist_1.png); background-repeat:no-repeat;margin-right:5px;}b.shai{background-position:-110px -220px;}b.lun{background-position:-152px -220px;}/*2017-01-09 浮动练习*/#mt a{float:left;width:100px;height:30px;text-align:center;line-height:30px;}#mt a.current{/*左右上边框，背景颜⾊，⽂本颜⾊*/border:1px solid #ddd;border-bottom:none;border-top:2px solid #E4393C;background-color:#fff;color:#E4393C;/*位置上调:margin-top 给负值*/margin-top:-6px;height:35px;line-height:35px;}#extra p{margin:0;}/*⽅案1*//*#extra p.new{float:left;}#extra p.total{float:right;}#extra{overflow:hidden;}*//*⽅案2*/#extra p.total{float:right;}</style></head><body><div id="discuss"><div id="mt"><a href="#">⽹友讨论圈</a><a href="#" class="current">晒单帖</a><a href="#">讨论帖</a><a href="#">圈⼦帖</a><a href="#">问答帖</a></div><div id="discuss-content"><table id="discuss-datas"><thead><tr><td class="col1">主题</td><td>回复/浏览</td><td>作者</td><td>时间</td></tr></thead><tbody><tr><td class="col1"><b class="shai"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="lun"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="shai"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="lun"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr></tbody></table><div id="extra"><p class="total">共900个话题<a href="#">浏览全部话题</a></p><p class="new">有问题与其他⽤户讨论<a href="#">[发表帖⼦]</a></p></div></div></div></body></html>最后效果图：商城导航：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>#nav{/*宽度，⾼度，背景颜⾊，⽔平居中对齐*/width:990px;height:40px;background-color:#E64346;margin:0 auto;}#nav p{/*取消默认margin，宽度，⾼度，背景颜⾊*/margin:0;width:210px;height:40px;background-color:#CD2A2C;}#nav>p>a{/*左浮动，⾼度，⾏⾼，⽂字：加粗，⼤⼩，颜⾊，取消下划线*/ float:left;height:40px;line-height:40px;font-weight:bold;font-size:14px;color:#fff;text-decoration:none;padding-left:15px;}#nav>p>b{/*右浮动，宽度，⾼度，背景，位置*/float:right;width:20px;height:20px;background:url(../Images/iconlist_2.png) no-repeat -65px 0;margin:10px 10px 0 0;}#nav>p{float:left;}margin:0;padding:0;list-style:none;}#nav>ul li{float:left;}#nav>ul li a{/*宽度，⾼度，⾏⾼，⽂本：⽔平居中，⼤⼩，颜⾊，下划线，加粗*/ float:left;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;color:#fff;text-decoration:none;font-weight:bold;}#nav>ul li a:hover{background-color:#BD2A2C;}#container{width:990px;min-height:200px;margin:0 auto;}#cate_box{margin:0;padding:0;list-style:none;/*宽度，⾼度，背景颜⾊，左右下边框*/width:210px;min-height:400px;background-color:#FAFAFA;border:2px solid #CD2A2C;border-top:none;box-sizing:border-box;/*上内边距*/padding-top:5px;}#cate_box>li{/*左内边距，上下内边距，宽度，下边框(⽩⾊)*/padding:5px 0 5px 10px;width:196px;box-sizing:border-box;border-bottom:1px solid #fff;border-top:1px solid transparent;}#cate_box li:hover{border-top-color:#ddd;border-bottom-color:#ddd;background-color:#fff;}#cate_box li>a{color:#333;text-decoration:none;font-size:14px;}</style></head><body><nav id="nav"><p><a href="#">全部商品分类</a><b></b></p><ul><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><a href="#">⾦融</a></li></ul></nav><div id="container"><ul id="cate_box"><li><a href="#">图书、⾳像、数字商品</a> </li><li><a href="#">家⽤电器</a></li></ul></div></body></html>导航列表弹框效果：初始状态：⿏标悬停时：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>#my_jd{width:100px;height:30px;text-align:center;line-height:30px;border:1px solid #000;background-color:#fff;/*相对定位：配合 #menu 的绝对定位*/position:relative;cursor:pointer;}#menu{width:400px;height:100px;background-color:#fff;border:1px solid #000;/*绝对定位*/position:absolute;top:30px;left:-1px;/*隐藏*/display:none;}#my_jd:hover #menu{display:block;}#my_jd:hover #line{width:100px;position:absolute;border-top:1px solid #fff;}</style></head><body><div id="my_jd">我的京东<div id="menu">模拟我的京东弹出菜单</div><div id="line"></div></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

简单的导航栏(css html)

今天在业余时间之时；制作一个简单娱乐影视导航栏；话不多说 \ 先展示效果:•HTML代码如下：<!doctype html><html><head><meta charset="utf-8"><title>首页</title><lixxxxnk rel="stylesheet" href="../css/index.css" type="text/css"> </head><body><header><div id="nav"><ul><li><a href="#">首页</a></li></ul><ul ><li><a href="#">电影</a></li></ul><ul><li><a href="#">电视剧</a></li></ul><ul><li><a href="">动漫</a></li></ul><ul><li><a href="#">反馈</a></li></ul></div></header></body></html>•css代码演示如下：@charset "utf-8";/* CSS Document */*{margin: 0;padding: 0}header{height: 200px;width: 616px;background-color:#FFFFFF;font-family: "方正书宋简体";font-size: 16;color: #131313;border-top: 0px;border-bottom: 0.5px solid #CCCACA; border-left: 0.5px solid #CCCACA;border-right: 0.5px solid #CCCACA;margin: 0 auto;}#nav{position: relative;height: 30px;width: 616px;background-color:#D4042B;}#nav ul{height: 30px;width: 120px;display: inline-block;list-style: none;}#nav ul li{width: 120px;height: 30px;line-height: 30px;}#nav ul li a{width: 120px;height: 30px;text-decoration: none;color:#FCFCFC;display: block;margin:0 40px;}#nav ul li:hover{background-color: #F37B7B;color: #4601EF;}希望大家喜欢！同时希望大家从当中学到想要的知识；创作不易；请多多支持！。

纯css实现的下拉导航栏附html结构及css样式

纯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⽂件放在⼀个⽬录下就可以看了，有不妥的地⽅还请指正。

CSS制作一个简单网页的下拉导航栏

CSS制作⼀个简单⽹页的下拉导航栏⽹页下拉导航栏的制作⽹页下拉导航栏的制作很简单，只需要运⽤好CSS中伪选择器。

⾸先说明⼏个简单的伪选择器（⽐较常⽤的）： link:连接平常的状态 visited:连接被访问过之后 hover:⿏标放到连接上的时候 active:连接被按下的时候通常导航栏是⽤列表标签制作，通过伪选择器的控制，实现其下拉的效果。

下⾯写⼀段简单导航栏： <div> <div class="navbar"> <ul class="link"> <li class="one_hopmepage"><a href="#">⽗标签零</a> <ul> <li><a href="#">⼦标签⼀</a></li></ul> </li> <li><a href="#">⽗标题⼀</a> <ul class="link"> <li><a href="#">⼦标题⼀</a></li> <li><a href="#">⼦标题⼆</a></li> <li><a href="#">⼦标题⼆</a></li> </ul> </li> <li><a href="#">⽗标题⼆</a> <ul class="link"> <li><a href="#">⼦标题⼀</a></li> <li><a href="#">⼦标题⼆</a></li> <li><a href="#">⼦标题⼆</a></li> </ul> <li><a href="#">⽗标题三</a> <ul> <li><a href="#">⼦标题⼀</a> <li><a href="#">⼦标题⼆</a> </ul> </li> </ul> </div></div>CSS代码：.navbar{ height: 120px; width: 100%; text-align:left; font-family: arial, sans-serif; background:url(navbar.png) no-repeat; padding-top:10px; }/***********************************//*⼀级列表属性*/.navbar ul{ float:left; margin-top:0px; padding:0px;/*Ul默认有内边距*/ }.navbar ul li{ float:left; width:91px; padding-left:0px; padding-top:0px; }.navbar ul li a{ text-align: center; /*border-right:1px solid #e9e9e9; */ padding:10px; display:block; text-decoration:none; color:#999;}/***************************************/.link a:hover{ color: #F63; }/***************************************//*⼆级列表属性*/.navbar ul li ul { display: none;/**/ }.navbar ul li:hover ul { display: block; position: absolute; background-color:#CCC; }/*⼆级列表的样式*/.navbar ul li ul{ width:95px; }.one_hopmepage{ width:80px; }.navbar ul li ul li{ width:119px; text-align:center; padding-left:2px; float:left; }/**********************************/显⽰效果如下： 1.⿏标未在标题栏时 2.⿏标放在标题上时：这⾥，我只是做了简单写了⼀个，界⾯不是很好看，你⾃⼰可以制作出很精美的导航栏，其中有什么不⾜，请⼤家指出。

HTML+CSS实现顶部导航栏菜单制作

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内设置⼀个站点的头部盒⼦，头部盒⼦⾥⾯有⼀个中⼼的盒⼦。

用CSS制作的30个优秀网站导航条1

用CSS制作的30个优秀网站导航条11. The Menumenu2. Pure CSS hovermenuView Demo3. Matte CSSMenuView Demo4. CSS BlurMenuView Demo5. CSS Navigation with GlowingIconsView Demo6. CSS Sliding Door using only 1imageView Demo7. Navigation MatrixReloadedView Demo8. CSS HorizontalMenuView Demo9. Woody CSSMenu10. Advanced CSSMenu11. ** YellowTabbed12. Vimeo-Like TopNavigationView Demo13. Apple Like Colorful CSSMenu14. CSSHoverbox76个CSS导航条欣赏之前转载过一篇关于css导航条收集的文章：52个超酷的CSS标签导航条，今天转到一个网站感觉挺不错，也是介绍css导航条的，其中showcase板块展出了76个各具特色的css导航条，在techniques部分则展出了37个样式，点进去有具体的制作方法哦。

下面的76个导航条只是欣赏欣赏了。

嘿嘿……该网站地址<=∙∙∙∙pixelgraphix.de∙surfgarden.de∙∙∙Designologue Mint Demo∙∙∙∙∙∙∙ [1]∙ [2]∙∙∙∙∙Butterflyproject.nl∙∙∙Machine From Hell VI∙Markt9.de∙Immobilienfinder-Leipzig.de∙∙Dept. of Biochemistry & Molecular Biology∙Hiram College∙Marx Bixby∙∙∙Getmenus.ca∙Stayfriends.de∙∙ | Movies∙Annilill.ee∙CSS Beauty∙∙∙∙∙∙∙∙Coda.co.za∙Badboy.ro∙∙5000xzukunft.de∙∙∙Sevenload.de∙∙Acceptance Rock∙∙Kurier.at∙∙Chris Williams。

CSS制作导航栏

body,div,ul,li{padding:0; margin:0;} #nav{
width:960px; height:35px; background:#CCC; margin:0 auto;/*水平居中*/ margin-top:30px;/*顶部 30px*/ } #nav ul{ width:960px; height:35px; } #nav ul li{ height:35px; float:left; list-style:none; line-height:35px; text-align:center; padding:0 10px; }
6
西北工业大学软件与微电子学院
综合创作训练实验指导书
现在我们要将 a 的高度设定为 35px 和盒子一样高度，这样我们在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了，于是我们插入下面红色的代码：
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}
#nav ul li a{display:block; height:35px; color:#333; text-decoration:none; background:#0FF;}
IE 内核浏览器下的效果：
Firefox 下的效果：
IE 和 FF 显示效果居然大相径庭，IE 中为什么所有链接纵向排列了呢？其实这个也很简单，IE 认为 a 既然转化成块状元素，就拥有块状元素的特性--- 霸道，它是不允许其他元素和它同一行，再加上也没有对 a 的宽度进行设定，所以才导致 IE 中这么显示，不过 FF 中为什么不这样呢，和我们想象的一样，那是因为 FireFox 认为 a 即使为块状元素，也应该受到外面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为 FF 是标准浏览器，所以大家可以以 FF 为标准，不过不用管谁标准不标准，那都是相对的，认为 IE 标准，FF 就不标准了呢，我们不愿意在这个问题上浪费精力，我们更喜欢将精力用在思考如何提高页面的浏览器兼容性！

基于CSS技术的网页导航栏制作

基于CSS技术的网页导航栏制作作者：徐平来源：《无线互联科技》2016年第07期摘要：CSS的开发技术已成为现如今网页前台开发的主要应用技术，导航栏作为整个网站的向导，用途至关重要，基于CSS技术开发的导航栏能在各类浏览器中正常使用，解决了浏览器不兼容的情况，从而解决了网页开发的难题。

关键词：CSS；网页制作；导航栏；浏览器兼容对网页前台设计师而言，网页的兼容性至关重要，用户的体验是设计师设计的出发点，随着浏览器的更新，许多网页的导航栏无法正常使用，导致网站浏览异常，使得网页需要频繁地更新维护。

而使用CSS技术进行开发的网页导航栏，在多个浏览器中都可正常使用，并且还能在网页开发中广泛应用。

1 CSS简介1.1 CSS概述CSS（Cascading Style Sheet，层叠样式表）是用于控制网页元素显示样式的标记语言，是目前流行的网页设计技术，与传统使用的HTML技术布局网页相比，CSS可以实现网页分离，同一个网页应用不同的CSS，会呈现不同的效果的特点。

同时，CSS可以支持几乎所有的字号和字体，对网页中的对象可以进行精确到像素为单位的排版，是目前最主流的设计语言之一，并且具有较强的易读性，可针对各类人群。

1.2 CSS语法CSS样式表分为嵌入式样式表、外部样式表和内联样式表3种，其中，优先级：内联式>嵌入式>外联式，本文所采用的主要为外部样式表设计，更加方便应用、修改。

CSS基本语法：td{ text-align：center；}，td为选择器，text-align为属性，center为值。

期中，选择器分为类选择器、标签选择器、ID选择器和复合内容，属性与属性值之间使用“：”隔开，多个属性之间使用“；”隔开。

2 CSS技术的导航栏制作2.1 使用Photoshop设计导航栏美工在使用CSS制作网站导航栏之前，首先使用Photoshop制作网站导航栏的美工设计，根据网站整体风格以及色彩搭配，设计好网页所需的一级菜单和二级菜单的图片样式。

使用CSS制作导航菜单

使⽤CSS制作导航菜单⽅式⼀：直接编写代码实现代码如下：<html><head><title>⽆需表格的菜单</title><style></style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Sports</a></li><li><a href="#">Weather</a></li><li><a href="#">Contact Me</a></li></ul></div></body></body></html>效果如下：⽅式⼆：使⽤jQuery 代码实现代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>伸缩的菜单，⽤toggle()重写</title><style></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li").find("ul").prev().click(function(){$(this).next().toggle();});$("li:has(ul)").find("ul").hide();});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div></body></html>注意：该代码必须加载了jquery.min.js ⽂件，并且所写的CSS 只能在Firefox 浏览器中正常显⽰。

实战教程使用HTML和CSS创建漂亮的导航菜单

实战教程使用HTML和CSS创建漂亮的导航菜单HTML和CSS是网页设计中最基本也是最重要的两种技术语言。

HTML负责页面结构和内容的展示，而CSS则负责页面的样式和布局。

在本教程中，我将为你详细介绍如何使用HTML和CSS创建一个漂亮的导航菜单。

一、HTML结构首先，我们需要使用HTML来构建导航菜单的结构。

以下是一个基本的导航菜单的HTML代码示例：```html<nav><ul><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></nav>上述代码中，`<nav>`标签表示导航菜单的容器，`<ul>`标签用于包裹菜单项，`<li>`标签表示每个菜单项，`<a>`标签用于定义菜单项的链接。

二、应用CSS样式接下来，我们将使用CSS为导航菜单添加样式。

以下是一个基本的CSS样式代码示例：```cssnav {background-color: #f2f2f2;padding: 10px;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline;nav ul li a {display: block;padding: 10px;text-decoration: none;color: #333;font-weight: bold;}nav ul li a:hover {background-color: #333;color: #fff;}```上述代码中，我们为导航菜单添加了背景颜色、内边距和一些基本的布局样式。

CSS网页导航栏设计指南

CSS网页导航栏设计指南导言在网页设计中，导航栏是一个重要的部分，它提供了用户在网页中进行导航的功能。

良好设计的导航栏能够提升用户体验，帮助用户快速找到所需内容。

本文将为你提供CSS网页导航栏设计的指南，帮助你创建出美观实用的导航栏。

一、选择合适的导航栏样式1. 固定导航栏固定导航栏将导航栏固定在网页顶部或侧边，保持导航栏的可见性。

这种样式适用于长页面和需要用户频繁导航的情况。

2. 悬浮导航栏悬浮导航栏在网页滚动时保持在页面顶部，但不固定在屏幕上方。

这种样式可以在用户阅读页面时提供便捷的导航。

3. 下拉导航栏下拉导航栏将子导航项目隐藏在主导航项下方，当用户将鼠标悬停在主导航项上时展开子导航项目。

这种样式适用于网站拥有大量页面或者子页面。

4. 响应式导航栏响应式导航栏会根据设备的屏幕大小自动调整布局，以适应不同的屏幕分辨率。

这种样式能够提供更好的移动设备上的导航体验。

二、设计导航栏的布局1. 导航栏的位置导航栏通常位于网页的顶部或侧边。

将导航栏放置在显眼的位置，可以帮助用户快速找到导航入口。

2. 导航栏的宽度导航栏的宽度可以根据网页布局的需要进行调整。

在固定导航栏中，宽度充满整个屏幕；在悬浮导航栏中，宽度与内容区域相同。

3. 导航栏的高度导航栏的高度应当适中，不要过小导致文字拥挤，也不要过大影响页面的可视区域。

4. 导航栏的背景颜色和样式选择适合网页整体风格的导航栏背景颜色和样式。

可以使用纯色背景、渐变背景或图片背景等。

三、导航栏文字和图标设计1. 导航栏链接文字导航栏的链接文字应当简洁明了，与用户常用词汇相符，并且要易于点击。

可以使用CSS样式修改链接的颜色、字体和下划线。

2. 导航栏图标图标可以用来增加导航栏的可视吸引力，并帮助用户更好地理解导航项的含义。

在选择图标时，考虑与网页整体风格的一致性，并确保图标清晰可辨认。

四、导航交互设计1. 悬停效果为导航栏的链接添加悬停效果，比如改变背景颜色或添加下划线，可以提升用户交互的可感知性。

7个强大超酷的CSS导航菜单

7个强⼤超酷的CSS导航菜单
via noupe.
新的技术在不断的发展和更新，利于我们创造更多独特和看上去很酷的菜单效果。

下⾯是7个基于CSS创建的⽹页导航菜单：
1)
这是来⾃Nick La设计的⼀个漂亮的CSS导航菜单效果，其中详细的介绍了如何对⼀幅图⽚进⾏切⽚并把它们组合在⼀起，形成⼀个独特漂亮的菜单。

需要注意的是，这个菜单在IE6下⾯有⼀个bug，在悬浮的时候，并不能达到背景图⽚切换的效果，这个时候，你需要给链接属性指定mouseover来进⾏显⽰。

2)
这是⼀个全新的菜单设计概念。

通常我们设计⼀个导航菜单，会改变⿏标悬浮在它上⾯时的样式，⽽这个菜单是当你⿏标悬浮在当前导航链接时，改变其它链接的样式。

3)
著名的Suckerfish Dropdowns回来了，并且这次它的体积更⼩了，仅仅12⾏的Javascript代码，并且正常运⾏于Safari和Opera,⽀持多级下拉菜单。

4)
树蛙菜单，光是这个名字就挺有趣的。

当⿏标悬停的时候才出现⼆级菜单列表，⽽同时⼜⽀持多级的浮动菜单。

5)
这个菜单的最⼤特点是当⿏标悬浮的时候，出现对导航菜单的补充说明。

这⼀应⽤能精简你的导航系统，且给⽤户⼀个更直观的导航描述，让⽤户知道，他将点击的东西会为他带为什么样的内容，⽽这⼀切，都是纯CSS的，不需要任何Javascript.
6)
这是8个基于CSS的导航菜单，它们或许并不是最特别的，却是最常⽤最基础的，你不能错过。

7)
Drop Down Tabs 提供了五种不同样样式的下拉选项卡的导航单，当然，你完全可以⾃定义它，让它看上去更加漂亮和特别。

CSS+HTML实现顶部导航栏功能

CSS+HTML实现顶部导航栏功能导航栏的实现、固定顶部导航栏、⼆级菜单实现效果图：2018/11/16更新：最近在使⽤这个导航栏的时候，发现页⾯在放⼤和缩⼩的情况下，导航栏的布局和显⽰都有些⼩问题，所以重新改了⼀下css部分的代码，重新贴上来新的代码实现（优化布局）：<html><head><style type="text/css">.top{/* 设置宽度⾼度背景颜⾊ */height: auto; /*⾼度改为⾃动⾼度*/width:100%;margin-left: 0;background:rgb(189, 181, 181);position: fixed; /*固定在顶部*/top: 0;/*离顶部的距离为0*/margin-bottom: 5px;}.top ul{/* 清除ul标签的默认样式 */width: auto;/*宽度也改为⾃动*/list-style-type: none;white-space:nowrap;overflow: hidden;margin-left: 5%;/* margin-top: 0; */padding: 0;}.top li {float:left; /* 使li内容横向浮动，即横向排列 */margin-right:2%; /* 两个li之间的距离*/position: relative;overflow: hidden;}.top li a{/* 设置链接内容显⽰的格式*/display: block; /* 把链接显⽰为块元素可使整个链接区域可点击 */color:white;text-align: center;padding: 3px;overflow: hidden;text-decoration: none; /* 去除下划线 */}.top li a:hover{/* ⿏标选中时背景变为⿊⾊ */background-color: #111;}.top ul li ul{/* 设置⼆级菜单 */margin-left: -0.2px;background:rgb(189, 181, 181);position: relative;display: none; /* 默认隐藏⼆级菜单的内容 */}.top ul li ul li{/* ⼆级菜单li内容的显⽰ */float:none;text-align: center;}.top ul li:hover ul{/* ⿏标选中⼆级菜单内容时 */display: block;}body{background:#eff3f5;}</style><body><div class="top"><center><ul><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀级菜单</a></li><li><a href="#"><b>⼀级菜单</b></a></li><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀级菜单</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li></ul></center></div></body></head></html>下⾯的原来的代码实现（页⾯放⼤缩⼩的时候导航版排版有问题）：<html><head><style type="text/css">.top{/* 设置宽度⾼度背景颜⾊ */height: 50px;width:100%;background:rgb(189, 181, 181);position: fixed; /*固定在顶部*/top: 0;/*离顶部的距离为0*/}.top ul{/* 清除ul标签的默认样式 */width: 80%;list-style-type: none;margin: 0;padding: 0;overflow: hidden;}.top li {float:left; /* 使li内容横向浮动，即横向排列 */margin-right:50px; /* 两个li之间的距离*/}.top li a{/* 设置链接内容显⽰的格式*/display: block; /* 把链接显⽰为块元素可使整个链接区域可点击 */color:white;text-align: center;padding: 14px 16px;text-decoration: none; /* 去除下划线 */}.top li a:hover{/* ⿏标选中时背景变为⿊⾊ */background-color: #111;}.top ul li ul{/* 设置⼆级菜单 */width: auto;background:rgb(189, 181, 181);position: absolute;display: none; /* 默认隐藏⼆级菜单的内容 */}.top ul li ul li{/* ⼆级菜单li内容的显⽰ */margin-right:0;float:none;text-align: center;}.top ul li:hover ul{/* ⿏标选中⼆级菜单内容时 */display: block;}</style><body><div class="top"><center><ul><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀集菜单</a></li><li><a href="#"><b>⼀级菜单</b></a></li><li><a href="#">⼀级菜单</a></li><li><a href="#">⼀级菜单</a><ul><li><a href="#">⼆级菜单</a></li><li><a href="#">⼆级菜单</a></li></ul></li></ul></center></div></body></head></html>到此这篇关于CSS+HTML 实现顶部导航栏功能的⽂章就介绍到这了,更多相关css顶部导航栏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

基于CSS技术的网页导航栏制作
摘要：CSS的开发技术已成为现如今网页前台开发的主要应用技术，导航栏作为整个网站的向导，用途至关重要，基于CSS技术开发的导航栏能在各类浏览器中正常使用，解决了浏览器不兼容的情况，从而解决了网页开发的难题。

关键词：CSS；网页制作；导航栏；浏览器兼容
对网页前台设计师而言，网页的兼容性至关重要，用户的体验是设计师设计的出发点，随着浏览器的更新，许多网页的导航栏无法正常使用，导致网站浏览异常，使得网页需要频繁地更新维护。

而使用CSS技术进行开发的网页导航栏，在多个浏览器中都可正常使用，并且还能在网页开发中广泛应用。

1 CSS简介
1.1 CSS概述
CSS（Cascading Style Sheet，层叠样式表）是用于控制网页元素显示样式的标记语言，是目前流行的网页设计技术，与传统使用的HTML技术布局网页相比，CSS可以实现网页分离，同一个网页应用不同的CSS，会呈现不同的效果的特点。

同时，CSS可以支持几乎所有的字号和字体，对网页中的对象可以进行精确到像素为单位的排版，是目前最主流的
设计语言之一，并且具有较强的易读性，可针对各类人群。

1.2 CSS语法
CSS样式表分为嵌入式样式表、外部样式表和内联样式表3种，其中，优先级：内联式>嵌入式>外联式，本文所采用的主要为外部样式表设计，更加方便应用、修改。

CSS基本语法：td{ text-align：center；}，td为选择器，text-align为属性，center为值。

期中，选择器分为类选择器、标签选择器、ID选择器和复合内容，属性与属性值之间使用“：”隔开，多个属性之间使用“；”隔开。

2 CSS技术的导航栏制作
2.1 使用Photoshop设计导航栏美工
在使用CSS制作网站导航栏之前，首先使用Photoshop 制作网站导航栏的美工设计，根据网站整体风格以及色彩搭配，设计好网页所需的一级菜单和二级菜单的图片样式。

要注意视觉区域的划分、重点主题突出等特点。

并且使用Photoshop保存出透明无底色的背景图片作为备用，以我校实验教学部网站为例（见图1-2）。

2.2 使用CSS和表格布局制作导航栏初步结构
使用DIV+CSS的布局方式设置导航栏的位置，布局好整体架构，并使用表格的布局方法完成导航栏内部文字的布局设计。

代码如图3所示。

设置ID选择器dh和类选择器mainMenu属性，完成导
航栏的视觉美工设计（见图4）。

#dh{ width：1024px；height：67px；float：left}
.mainMenu a：link，.mainMenu a：visited{fontsize：16px；display：block；line-height：42px；verticalalign：middle；text-align：center；color：#FFF；textdecoration：none；font-family："SimSun"；font-weight：600}
2.3 制作鼠标划过弹出菜单效果
#sub1{display：none；margin-top：-2px；paddingtop：
6px；position：relative；}本语句定义ID选择器sub1的显示框为未显示，距离顶部距离为-2像素，文字距离盒子模型顶部距离为6像素，并且定位为相对定位。

#sub1 a{margin-left：10px；color：#636363；fontsize：13px；font-weight：600；text-decoration：none}定义了sub1选择器中的超链接的文字属性。

#sub1 a：visited{color：#636363；}定义了sub1选择器
中的超链接访问后的文字属性。

#sub1 a：hover{color：#0160a2}定义了sub1选择器中的超链接鼠标划过时的文字属性。

#sub1{margin-left：120px；}定义了sub1选择器距离左
侧偏移值。

在完成以上样式的定义后，完成HTML页面中的二级菜单制作（见图5）。

其中：o n m o u s e o v e r = " d o c u m e n t . getElementById（’sub1’）.style.display=’block’"，表示鼠标划过得到的对象为sub1，并且显示为块级元素。

onmouseover="document.getElementById（’sub1’）. style.display=’block’"onmouseout="document. getElementById（’sub1’）.style.display=’none’"表示鼠标离开，sub1元素隐藏。

最后完成导航栏所有二级菜单的制作（见图6）。

3 网页兼容性测试
网页开发完成后，往往会遇到浏览器兼容性问题。

浏览器兼容性问题又称网页兼容性问题，是指网页在不同的浏览器上的效果可能会显示的不一致，会导致出现页面混乱、效果在某些浏览器中无法正常使用等，严重影响浏览者的用户体验。

因此，完成网页开发后必须进行浏览器的兼容性测试，保证网页效果在不同的浏览器中显示正常。

经过测试，使用CSS技术的导航栏能够在Firefox，Google Chrome，IE11以及IETester上的各个版本兼容，因此满足网页开发兼容性的要求（见图7-10）。

4 结语
CSS技术对网页中的对象的位置排版进行像素级的精确控制，成为现如今网页开发的主流趋势，本文介绍了使用CSS 技术制作导航栏的过程以及方法。

在实际操作中可按照该方
法灵活运用，根据不同的风格制作出不同的、具有良好兼容性的网站导航栏。

[参考文献]
[1]支和才，叶宾，吴嵘.网页制作三合一项目教程[M].上海：上海科学普及出版社，2015.
[2]温谦.HTML+CSS网页设计与布局从入门到精通[M].北京：人民邮电出版社，2008.
[3]余跃泓.Web标准下的CSS+DIV布局初探[J].计算机光盘软件与应用，2012（10）：67-68.
[4]闻立鸥.基于表现与结构分离的网页布局实践[J].教育教学论坛，2015（27）：93-94.
The Production of Web Navigation Bar Based on CSS Technology
Xu Ping
（Guangdong Petroleum and Chemical Engineering Institute，Maoming 525000，China）
Abstract：CSS development technology has become now a webpage downstage development the main application technology，the navigation bar as a guide for the entire site，use is essential，CSS technology development of navigation based on can be normally used in the various web browsers to solve the browser is not compatible with the，in order to solve
the problems of web development.
Key words：CSS；Web；navigation；browser compatibility。