导航条制作怎么用html+css做一个导航条

导航条制作时间:2021-10-29 阅读:()

怎样用dreamweaver制作如下css导航条

伪类样式。

首先你要新建css样式，要建成高级的，比方说名字叫：.test(不要漏掉“.”),然后在.test里面设置初始时的样式，包括文字颜色，大小，然后在建一个名字叫.test a:hover(.test后要空一个格，只要名字统一，会自动套用)这个是你鼠标移上去的样式，修改文字颜色，大小或者加粗什么的。

然后选中整个导航所在的表格套用第一个样式即：.test。

就可以了，在要用之前一定要把文字上设上超链接，否则不好用的

dreamweaver怎么做导航条

具体为：在FIREWORKS中打开，分别另存该图片设置为125*25和140*25。

在左边颜色栏目下设置颜色为#CCFFFF，选中“油漆桶”工具，再点击图片改变图片的颜色。

选中左边矢量栏目下的“文本”工具，点击图片输入文字，颜色设为#999999，分别做首页、相册、美文欣赏、FLASH、音乐聆听、个人档存为11.PNG、22.PNG、33.PNG、4.PNG、55.PNG、66.PNG。

同样，用相同的方式设置图片颜色为#CC6666，字体颜色为#FFFFFF，制作同类弄的图片，存为1.PNG、2.PNG、3.PNG、4.PNG、5.PNG、6.PNG。

对应的图片的大小要设置成一样。

这是我做好的网站中的导航条，红色的是鼠标经过图像 2，在FIREWORKS中打开图片A，选中它，设置到你想要的大小。

3，在左边颜色栏目下设置颜色为#CCFFFF（点击，选择你要的颜色就是），选中“油漆桶”工具，再点击图片改变图片的颜色。

4，选中左边矢量栏目下的“文本”工具，点击图片定位，输入文字，并可以设置文字的颜色保存就是

怎样制作网站导航条

网页菜单导航制作助手——硕思魔法菜单。

是一款无需了解DHTML和JavaScript代码编程的导航工具，只需点击鼠标就可以制作具有专业水准的动态菜单和简单专业的菜单导航。

真正地体现了“简单才是专业”。

步骤/方法现在很多人有个人网站，公司的网站更是日新月异。

一个友好的菜单导航，不仅能让用户快捷的访问相关页面，也能让搜索引擎更快的抓取到我们网站。

而制作网站时会遇到各种各样的问题。

比如：如何展示更多的内容，怎样让访问者便捷地到达想要的页面等等。

网页菜单导航，能很好地帮你解决这些问题！所以，网站的菜单导航制作便成为重中之重了。

选择一款很强大的菜单制作工具，让我们不懂DHTML和JavaScript的小白，都可以用它轻松制作具有专业水准的动态菜单和导航条的工具也是大势所趋。

网页菜单导航制作助手——硕思魔法菜单。

是一款无需了解DHTML和JavaScript代码编程的导航工具。

硕思网页魔法菜单可以生成多级菜单，其独特的菜单悬浮和任意定位功能更是最大限度地节省了页面空间，而丝毫不影响页面布局。

多种子菜单弹出效果使你的页面化平庸为神奇！您可以在菜单项中插入生动的动画图片、设置背景图、编辑文字以及定义边框。

生成的菜单还会根据浏览器窗口的大小，自动调整弹出菜单的位置。

硕思网页魔法菜单支持多款主流浏览器：IE、Netscape 和Opera。

这些体贴的功能一定能让您制作出非同凡响的菜单！魔法菜单还可以作为插件在FrontPage、DreamWeaver和硕思主页编辑器中使用。

制作好的网页菜单可以根据用户自己的需要自动生成相应的代码。

e79fa5e98193e4b893e5b19e31333332636335可以选择生成搜索引擎友好代码可以生成站点地图，谷歌xml站点地图或者发布js脚本代码等。

提供了很大的选择空间，可以满足大部分网页菜单制作及导航条制作的要求。

硕思魔法菜单支持多种编码格式，我们可以根据我们所使用的编码选择一种合适的编码格式，同时还支持任意类型文档，并且支持UTF-8字符编码。

提供多种动态菜单模板样式，可以根据自己所要创建的菜单项的需要，编辑菜单上的文字、设置背景图、式样以及定义边框等。

操作简单，只要点击鼠标就可以创建出属于你的个性化的、专业的菜单项。

更多精彩电脑信息，请登录:中国高速网-IT频道。

如何用DIV+CSS做漂亮的横排导航栏

先码好导航栏所需要的基本的HTML代码这个就不必多说具体的代码如下： <html> <head> <title>横向导航栏</title> <style>  </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> <li><a href="#">导航6</a></li> </ul> </div> </body> </html> 下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。

不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。

方法是在<style></style>之间加入如下代码来改变他的宽度。

为了让结果明显，我们给它又加了一个边框。

<style>  </style> 接下来我们让他居中。

我们在样式中加入以下代码。

.nav ul{ width:980px;/*设置元素宽度为980px*/ border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/ margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/ } 因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。

我们在样式中加入以下代码。

.nav ul li{ float:left;/*让li元素左浮动*/ } 我们看到测试结果如图4。

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。

（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。

接下来，我们通过给元素<a>添加样式，让他更美观。

加入以下代码。

.nav ul li a{ width:80px;/*设置元素宽为80px*/ height:28px;/*设置高度为28px*/ line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/ background:red;/*设置元素的背景为红色*/ color:#FFF;/*文字颜色是白色*/ margin:5px 10px; font-size:12px;/*用12号字*/ display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/ text-align:center;/*让文本居中*/ text-decoration:none; /*去掉下划线*/ } 我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。

要实现这个我们就要用到:hover这个伪类。

在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/ width:78px; height:26px; line-height:28px; border:1px solid red; color:red; background:#FFF; } 最后稍微整理一下代码 .nav ul{ width:980px; margin:0px auto; height:38px; padding:0; } .nav ul li{ float:left; } .nav ul li a{ width:80px; height:28px; line-height:28px; background:red; color:#FFF; margin:5px 10px; font-size:12px; display:block; text-align:center; text-decoration:none; } .nav ul li a:hover{ width:78px; height:26px; line-height:28px; border:1px solid red; color:red; background:#FFF; } 看看效果，成功没？思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。

怎么用html+css做一个导航条

首先建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为： ul {width:宽度值；height：高度值； list-style:none；} 如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left;} 每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条的更多样式及详细步骤可去这里参考/article/da1091fb05fe93027849d600.html

展开全文