網頁設計_導航條

網頁設計，很多時候會用到導航條，如何制作一個簡單的導航條呢？

步驟如下：

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

 

 

導航條比較簡單，沒有啥復雜的功能，希望大家喜歡，感謝大家的支持！