Dreamweaver 說明 / 使用 Spry 自訂選單列 Widget

作者： -

無標題文件



自訂選單列 Widget


「屬性」檢視窗可讓您對選單列 Widget 進行簡單的編輯，但不支援自訂的樣式設計工作。您可以變更選單列 Widget 的 CSS規則，並依照您所喜愛的樣式建立選單列。


以下主題中的所有 CSS 規則都是指 SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 檔案 (視您的選擇而定) 中的預設規則。每當您建立 Spry 選單列 Widget 時，Dreamweaver 都會將這些 CSS 檔案儲存在您網站的 SpryAssets 資料夾中。這些檔案也包含 Widget 所適用各種樣式的實用註解資訊。


您可以輕鬆地在隨附的 CSS 檔案中直接編輯選單列 Widget 的規則，也可以使用「CSS 樣式」面板來編輯選單列的 CSS。「CSS 樣式」面板可以協助您尋找指定給 Widget 不同部分的 CSS 類別，在您使用面板的「目前」模式時，特別有用。




變更選單項目文字樣式


附加至 <a> 標籤的 CSS 包含文字樣式的相關資訊。另外還有幾種附加於 <a> 標籤、與不同的選單狀態相關的文字樣式類別值。



<thead>





</thead>



























要變更的樣式

垂直或水平選單列的 CSS 規則

相關屬性和預設值

預設文字

ul.MenuBarVertical a、ul.MenuBarHorizontal a

color: #333; text-decoration: none;

滑鼠指標滑過時的文字顏色

ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover

color: #FFF;

成為焦點時的文字顏色

ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus

color: #FFF;

滑鼠指標滑過時的選單列項目顏色

ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover

color: #FFF;

滑鼠指標滑過時的子選單項目顏色

ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

color: #FFF;

變更選單項目背景顏色


附加至 <a> 標籤的 CSS 包含選單項目背景顏色的相關資訊。另外還有幾種附加於 <a> 標籤、與不同的選單狀態相關的背景顏色類別值。



  • 若要變更選單項目的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設值：

<thead>





</thead>



























要變更的顏色

垂直或水平選單列的 CSS 規則

相關屬性和預設值

預設背景

ul.MenuBarVertical a、ul.MenuBarHorizontal a

background-color: #EEE;

滑鼠指標滑過時的背景顏色

ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover

background-color: #33C;

成為焦點時的背景顏色

ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus

background-color: #33C;

滑鼠指標滑過時的選單列項目顏色

ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover

background-color: #33C;

滑鼠指標滑過時的子選單項目顏色

ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

background-color: #33C;

變更選單項目尺寸


如果您要變更選單項目的尺寸，請變更選單項目的 li 和 ul 標籤的寬度屬性。



  1. 找出 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則。
  2. 將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度，並將屬性和值white-space: nowrap; 新增至規則)。
  3. 找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
  4. 將寬度屬性變更為您所要的寬度 (或者將屬性變更為 auto 以移除固定寬度)。
  5. 找出 ul.MenuBarVertical ul li 或 ul.MenuBarHorizontal ul li 規則：
  6. 新增下列屬性至規則：float: none; 和 background-color: transparent;。
  7. 刪除 width: 8.2em; 屬性和值。

定位子選單


Spry 選單列子選單的位置是由子選單 ul 標籤上的邊界屬性所控制。



  1. 找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則。
  2. 將 margin: -5% 0 0 95%; 預設值變更為您所要的值。

留言

張貼留言

這個網誌中的熱門文章

超任 三國志3代，登入武將金手指

作者： -
新登入武將 7ED0DB 陸指 250 7ED0DC 水指 250 7ED0DD 武力 200 7ED0DE 知力 200 7ED0DF 政治 200 7ED0E0 魅力 220(DC) 、魅力210(D2)，煲書+7忠誠。 魅力 220 計略"作敵"會失敗。 16進制→魅力230(E6)、魅力210(D2)、魅力200(C8) 新君主一 　 新君主一 新君主二 新君主三 新君主四 新君主五 新君主六 新君主七 顏 7E2004 7E2020 7E203C 7E2058 7E2074 7E2090 7E20AC 性別 7E2005 7E2021 7E203D 7E2059 7E2075 7E2091 7E20AD 陸指 7E2008 7E2024 7E2040 7E205C  7E2078 7E2094 7E20B0 水指 7E2009 7E2025 7E2041 7E205D 7E2079 7E2095 7E20B1 武力  7E200A 7E2026 7E2042 7E205E 7E207A 7E2096 7E20B2 智力 7E200B 7E2027 7E2043 7E205F 7E207B 7E2097 7E20B3 政治 7E200C 7E2028 7E2044 7E2060 7E207C 7E2098 7E20B4 魅力 7E200D 7E2029 7E2045 7E2061 7E207D 7E2099 7E20B5 月  7E200E 　 　 　 　 　 　 日 E200F 　 　 　 　 　 　 年紀...
閱讀完整內容

歐姆龍 HEM-7600T 評價，購買心得分享(打臉文)

作者： -
3/28 電話購買歐姆龍 HEM-7600T 3/29 貨到，立馬量血壓126/76、心中覺得怪怪的，         將歐姆龍 HEM-7600T血壓計拿到醫院後，先用醫院的血壓計測量 136/86、         接著使用歐姆龍 HEM-7600T 測量一樣還是126/76，同一時間內這誤差也太大了。 4/1 16:57 打去客服回答說， 1、誤差10上下算正常， ( 打臉文 < 電子血壓計到底準不準  > 文章有提到誤差5算可以接受) 2、我就說130不算高血壓，而140就是高血壓了，這樣怎麼決定我要不要吃藥？       這樣的誤差還說正常。 3、客服跟我說不信可以問醫生，我4/3號跑去總公司問，回答卻說沒有誤差10這回事。 4、客服說可能我有做其它事情才測量不準(例如：運動、咳嗽、講話)。 打電話問賣家，賣家也講了一堆幹話 1、跑步會影響血壓。 2、咳嗽會影響血壓。 3、要退貨要先證明機器有問題才能退，去歐姆龍總公司拿數據。 4、機器本來就會有誤差正負3。 5、醫院的血壓計會調高一點，怕消費者提告。 6、新產品一定比較好。 打臉文 < 教授隔空交手歐姆龍 血壓計不准認錯難 > 跑去總公司也是在說幹話 1、機器剛出廠都有校正過，機器沒問題 2、可以給數據證明 機器沒問題 ，但不是證明 血壓準不準 。(ps:醫療器材你跟我說不準？) 購買七天內本來就可以退，不需要數據。 消基會1950。 我就當場打電話問店家說，總公司說 七天內 可以退不需要數據。 賣家才說請自行寄回辦理退貨。 得出結論是，血壓計一定沒問題，但就是 測量數據 會不準，一定是測量的人有問題 1、一邊 拉屎 一邊測量血壓。 2、一邊 跑步 一邊測量血壓。 3、一邊 咳嗽 一邊測量血壓。 所以你到醫院用腕隧道式測量的時候，會拿著儀器 拉屎+測量血壓 ，或著是測量的時候 咳嗽 。 但是，我在台安醫院測量時，那邊的 服務人員 是不會讓我這樣做的，就是我想也沒辦法做。 感覺是 我的智商 有問題，還是 歐姆龍客服 智商有問題，還是 台安醫院 的人員有問題？ 不相信的人可以自行測試客服打 0809 ...
閱讀完整內容

年青人眼鏡評價(負評)，辛酸血淚史分享文

作者： -
2019/05/07  花費四年的時間與金錢，終於確認(年青人眼鏡) 度數配錯， 只要 度數正確 ，沒有 戴習慣 問題，沒有 視差 問題。 (目前有，遠、中、近、多焦、近近、五付眼鏡， 證實打臉驗光師 )。 文章最下面有配眼鏡相關知識網址。 經過本人幾年的努力，在此公開配眼鏡心得， 如果消費者還是想在年青人配眼鏡( 不建議 )， 請先網路上尋找「年青人眼鏡 客訴」關鍵字， 那麼為了自己的消費權益， 以下一定.. 要懂..要懂..要懂 ..(很重要所以講三次)。 通常驗光時OK，可是眼鏡配出來就不行。 主因有三點 、有可能驗光出問題。(人為或機器出問題) 、有可能磨片出問題。(人為或機器出問題) 、驗光師對散光的細節沒注意到。 可能發生的問題是： 、在年情人配眼鏡，有可能磨片錯誤。 、在年青人配眼鏡，驗光師人員經驗跟水準良莠不齊。 、在年青人配眼鏡，配好後需要再去別家測試度數是否正確。 、同一天不同家驗光，會有不同的數據。 、在年青人配眼鏡，要有客訴的準備。 、在年青人配眼鏡，反應問題後，會發現當初幫你的驗光師不在了。 、在年青人配眼鏡，不會幫你注意適合的鏡框。 、在年青人配眼鏡，洗鏡片會刮傷。 只有自己學會，才有辦法保障權益 一、在年青人配眼鏡，需自己先學會看 處方箋 ， 教學文連結 二、在年青人配眼鏡，需自己懂得挑 適合的鏡框 ， 教學文連結 三、在年青人配眼鏡，有 散光 的消費者要更加小心，有四個數據都一定要懂。 四、在年青人配眼鏡，請保留 最初 的「 驗光數據 」及 日期 。 五、在年青人配眼鏡，請保留 實際 的「 鏡片數據 」及 日期 。(鏡片請至 眼科 驗光) 如果真的走到客訴這步：(公司電話：0286636890、官網http://tw.ypgo.net/ 、FB官網)。 只有你真正學會了，才有辦法保障自己權益 、不要太相信年青人眼鏡內部的溝通反應。 、一定要讓自己的問題正確無誤的反應到上級。 、一定要確保自己連絡的人是不是主官。 、所有對話過程，一定要 錄音 ，小心店家反告你，保護自己也保護店家。 文章歡迎轉載，減少受害者 。 故事： 在105年11月在年青人配眼鏡一副，說是要看電腦用的，配好之後反應怪怪的， 店家卻說：「戴久了就習慣了，而且本來就會有 ...
閱讀完整內容