30天打造品牌特色电商网站 Day.13 导览列基础制作(上）

昨天已经做过了导览列的介绍，那我们今天就学习用 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去帮它做美化修饰。