网页设计_导航条

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

步骤如下：

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.效果图：

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