iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

30天打造品牌特色電商網站系列 第 13

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去幫它做美化修飾。

https://ithelp.ithome.com.tw/upload/images/20210927/20141820V3Us1QNMNM.jpg

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


上一篇
30天打造品牌特色電商網站 Day.12 一定要有的導覽列
下一篇
30天打造品牌特色電商網站 Day.14 導覽列基礎製作(下)
系列文
30天打造品牌特色電商網站30

尚未有邦友留言

立即登入留言