CSS制作导航栏
一款纯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制作导航菜单
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实现⼆级导航菜单效果,通过简单的⿏标事件操作页⾯元素样式变换实现⼆级导航菜单的功能。
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制作⽴体导航栏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标签上。
学习使用HTML和CSS设计网页导航栏
学习使用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 背景颜色和边框通过设置导航栏容器的背景色和边框属性，我们可以改变导航栏的背景和外观。
第7章 使用CSS制作网站导航
7.5.2
盒模型hack
了解了盒模型尺寸的计算原理之后，现在使用CSS模 拟一个盒模型，观察盒模型会带来什么样的问题。在标准方 式下，样式表应当如下。
div.box{ border: 20px solid; padding: 20px; margin: 20px; background: #ffc; width: 500px; }
7.9.2
使用div+h1标签制作
延续横向导航的设计思路，但换一种方式来组织我们 的导航部分的XHTML结构代码。 为了便于读者阅读，在本段代码中不再给每段文字加 上链接<a>标签。这次的XHTML部分的代码与横向导航略 有不同，没有继续使用ul和li标签，其实继续使用ul元素也 能完好地实现纵向导航系统，但是在这里需要更多方法来展 现CSS布局设计的灵活与方便性，以便于抛砖引玉，开拓更 多的设计思想。 1．h标签 2．制作纵向导航条实例
7.1
制作一个简单的横向文字导航条
门户网站的主导航一般都是选用横向导航的形式。这 是因为门户网站下方文字较多，而且每个频道又都有不同的 样式区别，因此在顶部固定一个区域，设计统一风格又不占 用过多空间的横向导航是最理想的选择。例如、 及国内的新浪、网易、腾讯等网站都是采用此种 导航形式。 1．display属性 2．list-style-type属性 3．制作横向文字导航条的实例
7.3
制作标签式导航
在简单的导航系统制作完成后，有必要再为导航增加更 多丰富的可用性设计。 它的导航采用的是类似文件夹标签的样式，这样的导航 样式正是目前网站上常见的，既美观又能让用户非常方便地 知道自己所处的位置。本节中也制作这样的一套导航系统。 1．边框样式属性 2．制作标签式导航实例
Web前端开发基础：CSS控制-标记制作导航菜单
--6-Web前端开发基础
项目列表将按照十
进制编号显示，这本 身是<ol>标记的功能 。换句话说，在CSS中 <ul>标记与<ol>标记 的分界线并不明显， 只要利用list-styletype属性，二者就可 以通用 。
ul{ font-size:0.9em; color:#00458c; list-style-type:decimal; /* 项目编号 */ }
1
单元目标
2
教学内容
3
动手实践
4
课堂小结
--1-Web前端开发基础
单元目标
能力目标 CSS控制<li>标记制作导航菜单 知识目标 学会使用 CSS控制<li>标记 参考资料 《CSS网页样式设计与制作》
--2-Web前端开发基础
1
单元目标
2
教学内容
3
动手实践
4
课堂小结
--3-Web前端开发基础
项目列表 列表的符号 图片符号列表 竖直排列导航菜单 横向导航菜单
--5-Web前端开发基础
1、列表符号
通常的项目列表主要 采用<ul>或者<ol>标记， 然后配合<li>标记罗列各 个项目 。
在CSS中项目列表的 编号是通过属性list-styletype来修改的，无论是 <ul>标记还是<ol>标记， 都可以使用相同的属性 值，而且效果是完全相 同的。
<style title=”text/css”> body{ background-color:#c1daff; } ul{ font-size:0.9em; color:#00458c; } </style> </head> <body> <p>水上运动</p> <ul> <li>freestyle 自由泳</li> <li>backstroke 仰泳</li> <li>breaststroke 蛙泳</li> <li>butterfly 蝶泳</li> <li>individual medley 个人混合 泳</li> <li>freestyle relay 自由泳接力 </li> </ul> </body>
纯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⽂件放在⼀个⽬录下就可以看了，有不妥的地⽅还请指正。
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制作导航菜单
使⽤CSS制作导航菜单⽅式⼀：直接编写代码实现代码如下：<html><head><title>⽆需表格的菜单</title><style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation ul {list-style-type:none;/* 不显⽰项⽬符号 */margin:0px;padding:0px;}#navigation li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation li a{display:block;/* 区块显⽰ */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */width:175px;/* xg_超连接以外的部分也触发CSS样式效果 */}#navigation li a:link, #navigation li a:visited{background-color:#c11136;color:#FFFFFF;}#navigation li a:hover{/* ⿏标经过时 */background-color:#990020;/* 改变背景⾊ */color:#ffff00;/* 改变⽂字颜⾊ */}--></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><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation > ul {list-style-type:none;/* 不显⽰项⽬符号 */margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation > ul > li > a{display:block;/* 区块显⽰ */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#c11136;color:#FFFFFF;}#navigation > ul > li > a:hover{/* ⿏标经过时 */background-color:#990020;/* 改变背景⾊ */color:#ffff00;/* 改变⽂字颜⾊ */}/* ⼦菜单的CSS样式 */#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px;}#navigation ul li ul li{border-top:1px solid #ED9F9F;}#navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00;}--></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制作⼆级菜单或⼆级导航栏 ⼆级菜单的实现思路为：1.在默认状态下，使⽤display:none;将⼆级菜单隐藏。
2.当⼀级菜单中的列表标签li获取焦点(hover)后，使⽤display:blick;将⼆级菜单显⽰出来。
3.使⽤position: relative;和position: absolute;分别得⼀级菜单和⼆级菜单设置相对定位和绝对定位。
本内容⾯向⼩⽩向，我在代码中加了详细的注释，解释了语句的作⽤。
⼆级菜单展开后效果如下(没有美化，见谅)： HTMl代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"/><title>⼆级菜单</title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div class="menu"><ul><li>⾸页</li><li>博客<ul><li>博客1</li><li>博客2</li><li>博客3</li></ul></li><!-- 注意：需要将⼆级菜单的ul放在⼀级菜单的li标签内 --><li>新闻</li><li>账户</li></ul></div></body></html> CSS代码如下：ul li{list-style: none;/* 清除列表原有样式 */}.menu{width: 600px;height: 60px;background-color: aquamarine;}.menu ul li{float: left;/* 使列表(⼀级菜单)横向 */margin-right: 50px;margin-top: 20px;/* 设置⼀级菜单内容的位置 */position: relative;}.menu ul li ul{width: 100px;height: 160px;margin-left: -50px;background-color: #7FFFD4;display: none;/* 设置初始为不显⽰ */position: absolute;}.menu ul li:hover ul{display: block;/* 当⼀级菜单的li获取hover后将⼆级菜单的ul显⽰出来 */}原创内容，转载请注明出处。
实战教程使用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;}```上述代码中，我们为导航菜单添加了背景颜色、内边距和一些基本的布局样式。
CSSDesign之导航条制作
一、滑动门技术制作导航菜单（一）咱们在那个例子中主若是利用滑动门制作一个能够无穷拉伸的导航菜单，在制作前咱们第一要预备两张图片，如下：图一：图二：这两张图别离应用在：图一应用在head中，也确实是整个导航菜单背景图，图二要紧应用在链接中的背景，别离制作出当前页，翻转等成效图。
此刻咱们来看看其第一种制作方式：方式一：先看菜单背景部份HTML标记：先看外部结构，咱们在#header中应用了两个块：#bg_right ，#bg_center；其要紧的作用是操纵导航背景图，咱们别离在#header块中放置左侧圆角，#bg_center放置间变背景，#bg_right 放置右边圆角。
此刻咱们先应用滑动和Sprites技术来制作出导航背景成效，为后面的菜单链接打下相关基础：先给body，header，bg_right应用样式：此刻咱们能看出一点背景成效：上图是在IE中的成效图，此刻咱们做好两边的成效，只要加上中间bg_center背景上去就完成了导航背景的制作成效：那个地址存在一个关键性的动作，什么缘故在应用了中间背景，圆角成效怎么没有了，那是因为咱们的中间北景图把两边圆角成效遮掉了，此刻咱们给它应用一点边距让它显示出来：此刻导航背景成效的两个圆角又回了，大伙儿会问那个地址什么缘故应用30px不是别的值呢这就跟大伙儿的切图很有关系了，因为我为切图的的宽度是30px,因此大伙儿万万记住了。
制作完导航背景成效，此刻咱们来制作导航菜单的链接项，那么咱们在链接中又要如嵌套HTML 标记呢别慌，咱们先来看其标记：咱们在那个地址只显示了部份标记，从标记中，咱们不能看出咱们应用了一个#menu块包裹了链接项，别离在列表项中嵌套链接，在链接中就别离应用了三个span：menubg_left menubg_center menubg_right ；其起的作用是menubg_left放置左图，menubg_center 放置中间间变图menubg_right放置右图。
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制作一个简单网页的下拉导航栏
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.⿏标放在标题上时：这⾥，我只是做了简单写了⼀个，界⾯不是很好看，你⾃⼰可以制作出很精美的导航栏，其中有什么不⾜，请⼤家指出。
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制作导航栏
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 就不标准了呢，我 们不愿意在这个问题上浪费精力，我们更喜欢将精力用在思考如何提高页面的浏 览器兼容性！
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
西北工业大学软件与微电子学院
综合创作训练实验指导书
了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降
低。现在暂不把<li>标签的背景色去掉，当我们把它调成我们需要的效果的时候
再去掉！继续，我们把 li 的高度设置成盒子的高度 35 像素：line-height:35px; 设
置文本属性设置Байду номын сангаас平居中：text-align:center;
做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为
100 像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那
这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就
是说，如果我们再添加一些文字，这个<li>也会跟着变大，大家去掉宽度后试试，
是不是这个样子，这样我们的导航条就比较灵活了，不会对“菜单条目”的大小
<div id="nav"> <ul> <li><a href="#">CSS 学习</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> </div>
为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色，是页面布 局中一个很重要的方法，便于查看块状元素区域范围)
#nav ul li{ width:100px; float:left; list-style:none; background:#900; }
我们的<li>标签的高度并没有和我们的盒子的高度一样，这就是为什么在布 局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你是发下不
6
西北工业大学软件与微电子学院
综合创作训练实验指导书
现在我们要将 a 的高度设定为 35px 和盒子一样高度，这样我们在把刚才的 亮蓝色背景就可以完全覆盖下面盒子的灰色了，于是我们插入下面红色的代码：
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}
效果是不是这样：
5
西北工业大学软件与微电子学院
综合创作训练实验指导书
无论你的“菜单条目”是增大还是缩小，<li>不但宽度会随之增大缩小，但 是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！
5.3 增加导航链接
但是此时的导航条还没有链接，我们需要将上面的导航条做以下几个修改。 1）给上面的导航加上链接；
我们知道了什么是“内容块状元素和内联元素”，以及 XHTML+CSS 布局的 核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮 动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不 扬，可是网上所有的导航条都可以再它的基础上修改而来，其实理论都是一样的， 只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对， EASY ！！！OK！我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且 字体颜色变成白色
}
为了页面在浏览器的兼容性，在 CSS 文件顶部加入标签重置代码，代码如
下：
body,div,ul,li{padding:0; margin:0;}
怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间。盒子
做好了，我们就要往里面放导航条中的内容了“CSS 学习 学前准备 入门教程 提
高教程 布局教程 精彩应用”，如果我们把这内容(目前有 6 个)，当成酒杯的话，
4 实验要求
1) 掌握 CSS 的类选择器和派生选择器； 2) 掌握导航栏的制作方法； 3) 掌握 CSS 中伪类（Pseudo-Classes）的使用。
1
西北工业大学软件与微电子学院
5 实验步骤
综合创作训练实验指导书
5.1 CSS 导航入门
在前几次实验中，我们的网站已经已经越来越完善了，但我们的还没有一个 漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的 菜单栏。这里我们要使用到 CCS 中伪类的特性，简单来说就是根据鼠标的状态 来改变相关样式。
<body> <div id="nav"> </div> </body>
2
西北工业大学软件与微电子学院
综合创作训练实验指导书
</html>
在 html 文档同一目录下建立 css.css 文件，CSS 代码如下：
#nav{ width:960px; height:35px; background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/ margin:0 auto;/*水平居中*/ margin-top:30px;/*顶部 30px*/
有所顾忌了！
虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，
那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加
上左右内边距就 ok 了，padding:0 10px;这里设置边距为 10px，在<li>标签加上下
面代码，顺便把背景颜色去掉，此时 css 全部代码如下：
2）链接文字大小修改为 12px;
a{font-size:12px;}
3）并且规定链接样式，鼠标移上去和拿开的效果，使菜单具有动感。
#nav ul li a{color:#333; text-decoration:none;} #nav ul li a:hover{color:#fff; text-decoration:underline;}
3 实验仪器、设备
1) PC 机最低配置：2G Hz 以上 CPU；1G 以上内存；1G 自由硬盘空间； 2) Internet Explorer、Firefox、Chrome、Opera、Safari 任意浏览器； 3) Macromedia Dreamweaver 8 或 Macromedia Dreamweaver CS3。
效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接，效果如下：
到这里，基本上一个导航条就出来了。但可能还是没有动感，我们希望鼠标 移上去后，链接的背景变成黑色的，首先把链接 a 加上一个背景，以方便看出来 链接 a 的区域。
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}
西北工业大学软件与微电子学院
综合创作训练实验指导书
实验六 CSS 制作导航栏
1 实验目的
1) 掌握 CSS 的类选择器和派生选择器； 2) 掌握导航栏的制作方法； 3) 掌握 CSS 中伪类（Pseudo-Classes）的使用。
2 实验内容
1) 使用 CSS 制作导航菜单栏； 2) 使用伪类的属性使菜单动起来； 3) 丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善； 4) 制作一个绚丽的导航栏，应用到实验三中网站上。
#nav ul li{ float:left;}
现在的效果还不是我们想要的，所有的“菜单项”都没有保持“间距”，后 面的文字全部贴着前面的文字。好~！我们现在就将他们分开！设置<li>标签的 宽度为 100 像素，修改 CSS 如下：
#nav ul li{ width:100px; float:left; list-style:none; }
CSS 代码：
#nav ul{ width:960px; height:35px; }
效果如下：
3
西北工业大学软件与微电子学院
综合创作训练实验指导书
我们不希望我们的条目纵向排列，而是横向排列，怎么办呢？因为<li>标签 也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同 一行，总共六个<li>，所以他们六个就像台阶似的纵向排列起来了。为了横向排 列我们使 li 的浮动 Float 属性：
如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，
但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，
并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文
名字叫：ul，里面的每个单元格我们也给起个英文名字叫“li”。HTML 代码如下：
<div id="nav"> <ul> <li>CSS 学习</li> <li>学前准备</li> <li>入门教程</li> <li>提高教程</li> <li>布局教程</li> <li>精彩应用</li> </ul> </div>
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; }