今天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用HTML+CSS做了个一模一样的，下面就把导航条的制作方法及步骤分享给大家！
代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>一级导航</title> <style>/*css样式可以在style里面写*/ body { margin: 0;/*外边距:分别左,上,右,下都为0,这样就不会出现左右上下间距*/ padding: 0;/*内边距:分别左,上,右,下都为0,这样就不会出现左右上下内间距*/ } /*第一个div样式*/ #menu { width: 100%;/*宽度:100%表示浏览器默认宽度*/ height: 45px;/*高度*/ background-color:#FF0033;/*背景颜色:红色*/ } /*第二个div样式*/ #menu-title { width: 1000px; height: 45px; margin-left: auto;/*margin-left: auto;margin-right: auto;可以把div自动居中*/ margin-right: auto; } /*第二个div里面无需列表样式*/ #menu-title ul {/*ul是无序列表*/ margin: 0px; padding: 0px; list-style: none;/*列表样式:无*/ } /*第二个div里面无需列表li样式*/ #menu-title ul li { width: 142.8px; height: 45px; float: left; /*多个li往左浮动*/ line-height: 45px;/*行高*/ text-align: center;/*文本对齐:居中*/ } /*第二个div里面无需列表li里的a：超链接样式*/ #menu-title ul li a { color: white; /*颜色:白*/ text-decoration: none;/*文本下划线:无*/ } /*第二个div里面无需列表li里的a：超链接鼠标经过样式*/ #menu-title ul li:hover { background-color: #333333; } </style> </head> <body> <div id="menu"> <div id="menu-title"> <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> <li><a href="#">会员登录</a></li> </ul> </div> </div> </body></html>以上HTML+CSS代码复制可用。
好多小白不知道怎么搭配颜色，为你们搜集了一下网页颜色搭配工具：http://tool.c7sky.com/webcolor/#hue_0
下一个文章：HTML+CSS二级导航制作，敬请期待