插入Spry选单列调整Spry选单列的位置.PDF

Spry 選單列 一、插入 Spry 選單列 通常導覽列的位置可以在 header 之內 ，也可以在header 之下 。 Horizontal header 以下主要以 「橫向」（水平： ）兩層選單列 ，並且位於 之內做說明 。 當網頁預覽存檔之後，網站內會多出一個資料夾，名為SpryAssets ，裡面有一個檔案 SpryMenuBarHorizontal.css 就是它的樣式表檔案，學會修改它才能符合自己的需求 。 二、調整Spry 選單列的位置 修改選單列名稱及外部包覆 div 區塊是為了配合浮動式導覽列的 程式碼 ，請務必確實操作。 1 的 6 Spry 選單列 1. 修改 Spry 選單列名稱 （id ）為 nav 。 2. 點選 Spry 選單列的左上角藍色標籤，並確認程式碼是否有正確選取ul…/ul 。 2 的 6 Spry 選單列 3. 插入 div 標籤，id 為 navwrap ，也可自定名稱 ，只要不是「nav 」即可。 4. 確認 navwrap 有將 Spry 選單列包覆在內。 5. 依照 Spry 選單列的寬度 （3×8=24 em ）及高度 （約50 px ，在文字大小為14 pt 的 情況下 ），新增#navwrap 的CSS 規則 ，設定width 及 height 。 A. 先在程式碼畫面用滑鼠點div id=”navwrap”這一列 。 3 的 6 Spry 選單列 B. 新增 CSS 規則 ，要定義在main.css 內 。 C. 藍色框就是 navwrap ，已將Spry 選單列 nav 包覆在內。 6. 水平對齊：設定 margin-left 及 margin-right ，左 auto 為靠右，左右皆 auto 為置中。 4 的 6 Spry 選單列 7. 垂直對齊：設定 margin-top 的 px 值 。 三 、SpryMenuBarHorizontal.css 說明 1. 寬度 A. ul.MenuBarHorizontal li ：Width 為８em ，表示每個選項文字的寬度是８個字。 B. ul.MenuBarHorizontal ：Width 為 auto ，整個導覽列的寬度會隨著選項文字的寬 度自動調整 。 2. 文字顏色 ul.MenuBarHorizontal a ：修改color 。 3. 背景顏色 ul.MenuBarHorizontal a ：修改background-color 。 4. 滑鼠移過項目的文字與背景顏色 ul.MenuBarHorizontal a.MenuBarItemHover （修改方法和 ul.MenuBarHorizontal a ）相同。 5. 第二層選單的寬度 A. ul.MenuBarHorizontal ul ：修改Width B. ul.MenuBarHorizontal ul li ：修改Width （這兩個寬度應設定為相同值，並稍微大於第一層選單的寬度較為美觀 ） 6.