网页设计，很多时候会用到导航条，如何制作一个简单的导航条呢？

步骤如下：

1.导航条html代码：

        <!-- 新导航条 -->
        <div class="tnav">
            <div class="tnav_c">
                <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>
            </div>
        </div>

 

2.css代码：

/* 2022.2.22 导航条*/
.tnav{height:50px;background:#0697FF;}
.tnav .tnav_c{width:1000px;height:50px;margin:0 auto;}
.tnav_c ul li{width:200px;height:50px;color:#fff;float:left;line-height:50px;}
.tnav_c ul li a{color:#fff;font-size: 18px;}

 

3.效果图：

 

 

导航条比较简单，没有啥复杂的功能，希望大家喜欢，感谢大家的支持！