昨天已經做過了導覽列的介紹，那我們今天就學習用 HTML 和 CSS 基本的語法，來試著做一個簡單的 navbar 吧～

首先可以先建立一個<nav>區塊來包裹我們的導覽列，裡面用了之前提過的<ul><li>標籤，建立無順序性的清單，再結合<a>標籤提供連結，就可以有一個簡單的雛形囉，讓我們看看下面的範例：

<nav class="navbar">
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">關於</a></li>
                    <li><a href="#">產品</a></li>
                    <li><a href="#">聯絡我們</a></li>
                </ul>
            </nav>

（ 小筆記：<nav> 元素代表一個網頁中提供導航欄連結的區域，文件可以有不只一個 <nav> 元素，比如：一個是網站導覽、一個是商品導覽。）

這裡再新增一些導覽列常有的功能及元件，可以把logo化為一個區塊，menu的部分化為一個區塊，之後在排版上會比較方便，大家依照自己的設計去做程式上的區塊切分就好了。在產品的部分預設了一個向下展開的選單，電商網站可能會有產品種類比較多的情況，需要使用到多階層項目列表清單的寫法。

（ 小筆記：多階層 (巢狀式) 項目列表清單，可以在任一項目內容 <li>中，嵌入另外的獨立列表，形成一個階層式的列表清單喔！）

<nav class="navbar">
        <div class="logo">
					<a href="#"><img src= ”放LOGO圖片“ alt=""></a>
				</div>
                <ul class="menu">
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">關於</a></li>
                    <li><a href="#">產品</a>
                       <ul class="dropdown">
							     <li><a href="#">產品分類1</a></li>
    							 <li><a href="#">產品分類2</a></li>
							     <li><a href="#">產品分類3</a></li>
						           </ul>
                    </li>
                    <li><a href="#">聯絡我們</a></li>
                </ul>
            </nav>

寫完HTML後會得到一個像下圖那樣預設樣式的導覽列，誒～好像跟想像中不太一樣！

沒錯，因為我們後續還要再用CSS去幫它做美化修飾。

大家可以先用前面分享的一些CSS標籤去做簡單的顏色、字體字型、padding、margin等調整，明天會介紹CSS語法在導覽列的運用，以及一些進階的互動效果，那我們就明天見啦～