HTML,使用ul制作横向导航条
HTML：使用ul制作横向导航条
说明：
1：为了方便学习，采用把每一个关键步骤完全分开写的方式。
2：所有内容采用360极速浏览器测试，因为其采用Chrome内核，而Chrome是对标准支持最好的内核。
3：小菜原创。
Html代码：
为了方便观察，为所有元素添加边框和边距：加入样式：
#menu,ul,li,a{
border:solid thin black;
margin:10px;
}
效果：
第一步：
去掉前面的小圆点
加入样式：
#menu li {
list-style:none; }
效果如图：
第二步：
可以看到，链接还不是块状，其大小仅由内容文字决定，所以四个链接的宽度是不同的改变链接的样式，使链接以块状展示
加入样式：
#menu a {
display:block;
}
效果如图：
注意对比观察链接部分的变化。
第三步：
去掉链接的下划线：
加入样式：
#menu a {
text-decoration:none; }
效果如图：
第四步：
使列表横向显示
加入样式：
#menu li {
float:left;
}
效果如图：
看，出现问题了，对吧，这不是错误，这是因为使用了float:left之后，元素脱离了文档流，就好像元素
不在文档中，而是漂浮在文档之上，所以不包含在外层容器之中。
那么，如何把这些元素“拽”回文档，放到容器之中呢？请看下一步。
第五步：
清除浮动属性
需要在浮动元素的后面加上一个元素，用于清理之前的浮动我们加上一个div元素，作为清理浮动的元素。
还需要为这个div赋予清理浮动的属性。
加入样式：
.clear {
clear:both;
}
注意，这是一个类选择器，因为可能有多处浮动需要清理
改变后的ul部分为：
效果如图：
第六步：
现在让我们为这些链接设置背景色：我是个俗人，就设置红色吧：
加入如下样式：
#menu a {
background-color:red; }
效果：
第七步：
貌似不太好看，因为链接中的字和边框紧紧地挨在一起。只需调整一下链接的边框的内边距：
加入样式：
#menu a {
padding:10px;
}
效果如图：
第八步：
为链接设置鼠标停留在上面的样式：
加入样式：
#menu a:hover {
background-color:blue;
}
效果如图：
因为鼠标悬停状态不方便被截图下来，所以请大家自行想象那里有一个手型光标。
大家可以看出来，小弟在这里动用了和之前不一样的截图工具，可惜那只手还是显示不出来，想象吧。
第九步：
去掉多余的用于演示的边框，边距。
加入样式：（当然，也可以直接删除前面的对应样式）
#menu,ul,li,a{
border:solid thin black;
margin:0px;
padding:0px;
}
顺便改变字体颜色,加入样式：
#menu a {
color:white;
}
效果如图：
一个简单的横向导航条就完成了，如果你还对细节不满意，可以继续使用CSS进行调整。
竖型导航栏的制作
竖型导航栏的制作 1、新建html文件index.html，使用文本编辑器进行编辑。如下图： 2、在
内开始编写导航栏的html代码。使用ul标签建立一个无序列表 效果如下图： 此时的列表还不能点击进行导航，我们使用标签进行超链接:效果如下图： 3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在
标签里进 行引用。 4、新建CSS文件使用文本编辑器进行编辑 A.应为html页面默认有内、外边距。为方便我们进行样式设计，把所有标 签默认的内、外边距设为0px。 *{ margin:0px; padding:0px; } B.为了使导航栏在页面中间我们通过设置列表所在的纵向导航菜单
今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单，包含以下内容和知识点： ■纵向列表 ■标签的默认样式 ■css派生选择器 ■css选择器的分组 ■纵向二级列表 ■相对定位和绝对定位 一、纵向列表 纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作 先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。
从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉生成的css代码如下： 下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性 body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等 接下来定义li的背景色为浅灰色及下边框和内边距 这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。 要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面。
10个导航栏的设计技巧
10个导航栏设计技巧 想要全面掌握UI设计技能，需要自己付出更多的努力，除了专业的学习，在平常还要多看书，多动手，进行一些实践训练，这样才能更好地提升自己的能力，在工作中游刃有余，推荐10个导航栏设计技巧，希望对学习UI的你有所帮助！ 1、超大菜单栏 即使许多设计师不喜欢这样的设计，但是对于许多客户而言，它依然是一个客户反响很好的设计方案。 不过过大的导航栏可能还是存在一些可用性问题的。通常，超大的导航栏存在的主要原因在于，导航栏项目很多难以缩减。对于网站的运营者而言需要仔细考量这件事情，或者通过搜集来的数据来做设计决策的论据。 2、加入显眼的搜索框 用户常常使用搜索来筛选信息，更快更直接地获取重要的信息，所以，搜索框应该突出展示。它应该出现在每个页面上，应该和主导航栏一起存在，应该够大也易于访问。 用户对于搜索的需求是刚性的，不要试图打破这种客观存在的规律，尽量让搜索融入到主导航当中来吧。（确保输入框足够大，可以输入，并且足以一次显示常见的搜索内容） 3、限制导航内条目数量 作为设计师，你需要预测用户经常访问的内容，将最重要、最常用到的条目置于导航栏当中。值得一提的是，几乎每个网站的导航中都会包含搜索、关于我们、首页，而电商类网站则通常会包含购物车、购买的按钮。 但是无论如何，永远将最关键、最重要的导航类目让用户看到，才是导航所应该做到的事情，换句话来说，就是关键内容驱动导航分类。
4、更聪明的导航机制 好的导航设计，能让用户能在页面和页面之间合理快速切换，网站不同的内容和功能之间是有一定的自然逻辑的，这个自然逻辑可以作为导航设计的一个重要参考。 在这个用户体验高度个性化的时代，网页导航的玩法可以更加多样。以Amazon 为例，当你登录了之后，会发现导航开始围绕着你的信息进行了调整，导航栏从通用的条目变为更贴近你的个人情况的样式，其中包括最近的购买记录，信用额度和Amazon 的服务信息等。 5、正确地排布导航内的条目 导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的，并且也通常是用户点击最多的，所以作为设计者，你需要特别注意这些条目的设计。 对于这一点，还有不少科学研究和理论支持。比如，序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目，而首位效应说的是，相比于列表中间的内容，用户更容易记住列表开头的几个条目。 6、垂直导航 垂直导航设计也是目前越来越流行的设计之一。最常见的是垂直导航，是侧边栏导航，它和许多软件的UI设计不谋而合。侧边栏导航对于如今的许多网站是个合理的选择，尤其是诸如长滚动式的页面。 侧边栏导航通常为常驻式的，让用户可以随时定位，快速跳转，并且其中所能承载的元素相对比顶部导航更多。垂直导航尤其要注意条目之间的空间间隔。 7、长滚动页面上使用悬浮导航 对于长滚动页面而言，导航设计是否可靠是一件颇为重要的事情，无论导航是在顶部、侧边栏还是在底部，它最好能够悬浮置顶，不论用户滚动到哪个
CSS制作导航栏
实验六 CSS制作导航栏 1实验目的 1)掌握CSS的类选择器和派生选择器； 2)掌握导航栏的制作方法； 3)掌握CSS中伪类（Pseudo-Classes）的使用。 2实验内容 1)使用CSS制作导航菜单栏； 2)使用伪类的属性使菜单动起来； 3)丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善； 4)制作一个绚丽的导航栏，应用到实验三中网站上。 3实验仪器、设备 1)PC机最低配置：2G Hz以上CPU；1G以上内存；1G自由硬盘空间； 2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器； 3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。 4实验要求 1)掌握CSS的类选择器和派生选择器； 2)掌握导航栏的制作方法； 3)掌握CSS中伪类（Pseudo-Classes）的使用。
5实验步骤 5.1CSS导航入门 在前几次实验中，我们的网站已经已经越来越完善了，但我们的还没有一个漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的菜单栏。这里我们要使用到CCS中伪类的特性，简单来说就是根据鼠标的状态来改变相关样式。 我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来，其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！OK！我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且字体颜色变成白色 5.2制作导航菜单 新建一个html文档，我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；)，这个容器就是放我们的导航的，html代码如下：
如何用DIV CSS制作横向表单
如何用DIV+CSS制作横向菜单？我们先来看一个菜单的例子，最终效果是: ?首页 ?产品介绍 ?服务介绍 ?技术支持 ?立刻购买 ?联系我们 然后我们来详细讲解步骤 第一步：建立一个无序列表 我们先建立一个无序列表，来建立菜单的结构。代码是：
效果是： ?首页 ?产品介绍 ?服务介绍 ?技术支持 ?立刻购买 ?联系我们 第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。 当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：
CSS定义为： .test ul{list-style:none;} 说明：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。 现在的效果是没有圆点了： ?首页 ?产品介绍 ?服务介绍 ?技术支持 ?立刻购买 ?联系我们 第三步：关键的浮动 这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。 CSS定义为： .test li{float:left;} 效果是：实验八 制作网页导航条
实验八制作网页导航条 使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。 一、利用列表制作垂直方向的导航栏 步骤： 1.在站点中新建nav01.html，页面设置如下。 2.在“插入”菜单中选择“Div”命令，在弹出的对话框中设置如下： 3.在插入的Div标签中输入如下段落文字，给文字设置空链接并应用项目列表， 如下图所示效果： 4.打开【CSS样式】面板，新建以下CSS规则，保存在当前文档，具体设置如 下： 1)新建“ID”的样式#navigation，属性设置如下： 2)新建“复合内容“样式#navigationul，属性设置如下： 3)新建“复合内容”样式#navigation li ，属性设置如下
4)新建“复合内容”样式#navigation li a ，属性设置如下 5)新建“复合内容”样式#navigation li a：hover ，属性设置如下 6)保存并预览该页面，最终效果图如下： 7)可修改其中相应样式的属性，将导航菜单变为水平排列的菜单，操作参 考如下： 选择【CSS样式】面板中的#navigation样式，将【方框】分类中的“width”属性改为600px。
选择【CSS样式】面板中#navigationli样式，将【方框】分类中的“width”属性设置为100px。“float(浮动)”属性设为：left(左对齐)，单击【应用】按钮查看效果。继续将“margin”的右right、左left属性分别设为5px，单击【应用】按钮查看效果。最后单击【确定】按钮，则可看到垂直导航菜单变为水平导航菜单。 二、制作垂直方向的导航栏 在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件，将图1左侧竖排的导航栏制作成如2的效果： 图1 初始竖排导航栏图2 导航栏最终效果
特效导航栏