基于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>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

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。