1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到<head></head>之间。
5、网页此时的效果如图，就完成了。
如果要用html加上css来制作导航条的话，难度不大，代码也不多。要是用于学习的话建议自己用原生代码实现。要是用于生产环境或项目上的话，建议采用bootstrap等前端框架，直接套用他们的导航栏代码即可，样式不仅好看代码也易读，后期想要修改一下也容易！
用表格做！看你的导航是横排的还是竖排的。
横排的就建一个一行多列的表格，竖排的就建一个一列多行的表格。把每一个链接放在各个单元格中。最后把这个表格保存为一个HTML文件，在需要导航的页面上include这个文件在你指定的位置就OK了。这样的好处是你只要做一次导航文件就可以在所有你想要用！的地方引用。改起来也灰常方便，因为你只要改这个HTML文件就会在所有引用的地方全部生效了！1打开网站后台
2找到栏目设置，不同的程序位置有所不同，
3进入栏目设置，吧设计好的栏目导航词条 按顺序填写，排序越小也靠前
4填写完毕，一定要保存，然后生成一下，有的程序不需要生成，伪静态的也不需要生成。
5切换到前台，刷新一下就制作完成。这个怎么能简单的说怎么做呢？html是标签组成的，和css联合以后能展现出很好的效果。同样的效果可能有很多种不同的做法。一般来说像这样的导航是
<ul>
<li></li>
<li></li>
……
</ul>
但是也能用div+css模拟。
这样的一个导航可以交给专门的美工人员做，不是很难的。有很多学生组织和社会组织的集体都能做 。你要是给我背景的素材我都能做。
如果你是想学的话，那么建议从html+css学起<style type="text/css">
#daohang{ width:900px;}
#daohang ul{ list-style:none;}
#daohang ul li{ width:100px; display:block; background:#999999; float:left; text-align:center}
#daohang ul li:hover{}
#daohang ul li a{text-decoration:none; display:block;}
#daohang ul li a:hover{ background:#FF0000; color:#000000;text-decoration:none}
</style>
<div id="daohang">
<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></li>
</ul>
</div>
看看行不行
打开一个有导航的网页打开开发者调试工具（快捷键：f12），选中该处区块，查看参考，如下图为谷歌浏览器的开发者调试工具，左边为“首页“导航的html代码，右侧为css代码
导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。
工具/材料Sublime Text
首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示
接下来我们在html的body结构里添加导航条的内容，如下图所示
然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面
最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）