如何使用階層式樣式表,在運算式 Web 中建立自訂超連結

文章翻譯 文章翻譯
文章編號: 928715 - 檢視此文章適用的產品。
全部展開 | 全部摺疊

在此頁中

簡介

本文將告訴您,如何使用階層式樣式表 (CSS),在 Microsoft 運算式 Web 中建立自訂超連結。它包含示範如何使用 CSS 功能來建立自訂超連結的範例。

其他相關資訊

範例 1: 建立超連結底線格式會顯示在不同的色彩

本範例將超連結至相同文件的文字的色彩的文字。只將底線格式的超連結會顯示在不同的色彩。若要建立這些自訂的超連結,請依照下列步驟執行:
  1. 啟動運算式 Web,然後建立新的空白頁。
  2. 在 [檢視] 功能表上按一下 [網頁,然後按一下 [程式碼 底部的頁面]。
  3. <head></head> 此頁的範圍插入下列程式碼:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px } 
    a:link { border-bottom-color: blue } a:visited { border-bottom-color: purple } 
    a:hover { border-bottom-color: green } a:active { border-bottom-color: red } 
    </style> 
  4. <body></body> 此頁的範圍插入下列程式碼:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. 在 [檔案] 功能表上按一下 [儲存]。
  6. 另存 新檔] 對話方塊指定您要儲存檔案的位置。
  7. 檔案名稱] 方塊中輸入 Example1,然後按一下 [儲存]。
  8. 在 [檔案] 功能表上指向 [在瀏覽器中的預覽],然後按一下您要用來預覽網頁,網頁瀏覽器]。

範例 2: 建立使用動態顯示按鈕的超連結

此範例建立使用有實心的背景的動態顯示按鈕的超連結。若要建立這些自訂的超連結,請依照下列步驟執行:
  1. 啟動運算式 Web,然後建立新的空白頁。
  2. 在 [檢視] 功能表上按一下 [網頁,然後按一下 [程式碼 底部的頁面]。
  3. <head></head> 此頁的範圍插入下列程式碼:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; padding: 3px } 
    a:link { color: white; background-color: blue } 
    a:visited { color: white; background-color: purple } 
    a:hover { color: white; background-color: green } 
    a:active { color: white; background-color: red } 
    </style> 
  4. <body></body> 此頁的範圍插入下列程式碼:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. 在 [檔案] 功能表上按一下 [儲存]。
  6. 另存 新檔] 對話方塊指定您要儲存檔案的位置。
  7. 檔案名稱] 方塊中輸入 Example2,然後按一下 [儲存]。
  8. 在 [檔案] 功能表上指向 [在瀏覽器中的預覽],然後按一下您要用來預覽網頁,網頁瀏覽器]。

範例 3: 建立使用外框動態顯示按鈕的超連結

此範例建立使用外框動態顯示按鈕的超連結。當停頓這些超連結時超連結文字周圍會出現一個彩色的方塊。這會建立外框效果。若要建立這些自訂的超連結,請依照下列步驟執行:
  1. 啟動運算式 Web,然後建立新的空白頁。
  2. 在 [檢視] 功能表上按一下 [網頁,然後按一下 [程式碼 底部的頁面]。
  3. <head></head> 此頁的範圍插入下列程式碼:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px } 
    a:link { border-color: blue } a:visited { border-color: purple } 
    a:hover { border-color: green } a:active { border-color: red } 
    </style> 
  4. <body></body> 此頁的範圍插入下列程式碼:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p> 
  5. 在 [檔案] 功能表上按一下 [儲存]。
  6. 另存 新檔] 對話方塊指定您要儲存檔案的位置。
  7. 檔案名稱] 方塊中輸入 Example3,然後按一下 [儲存]。
  8. 在 [檔案] 功能表上指向 [在瀏覽器中的預覽],然後按一下您要用來預覽網頁,網頁瀏覽器]。

範例 4: 建立使用不同的文字格式化的超連結

本範例將超連結,以使用無底線、 斜體、 小寫的文字格式設定。當停頓這些超連結時,文字會變成大寫。若要建立這些自訂的超連結,請依照下列步驟執行:
  1. 啟動運算式 Web,然後建立新的空白頁。
  2. 在 [檢視] 功能表上按一下 [網頁,然後按一下 [程式碼 底部的頁面]。
  3. <head></head> 此頁的範圍插入下列程式碼:
    <style> 
    body { color: black; background-color: white; font-family: arial } 
    a { text-decoration: none; font-style: italic; text-transform: lowercase } 
    a:link { color: blue; font-weight: bold } a:visited { color: purple } 
    a:hover { color: green; text-transform: uppercase } 
    a:active { color: red } 
    </style> 
  4. <body></body> 此頁的範圍插入下列程式碼:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p> 
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p> 
  5. 在 [檔案] 功能表上按一下 [儲存]。
  6. 另存 新檔] 對話方塊指定您要儲存檔案的位置。
  7. 檔案名稱] 方塊中輸入 Example4,然後按一下 [儲存]。
  8. 在 [檔案] 功能表上指向 [在瀏覽器中的預覽],然後按一下您要用來預覽網頁,網頁瀏覽器]。

?考

如需詳細資訊按一下 [下面的文件編號,檢視 「 Microsoft 知識庫 」 中 「 文件]:
825450如何藉由使用 FrontPage 2003 中 「 階層式樣式表建立自訂超連結
196488什麼階層式樣式表?
222949如何建立表單按鈕在 FrontPage 中使用 DHTML 和 CSS 的動態顯示效果

屬性

文章編號: 928715 - 上次校閱: 2006年12月6日 - 版次: 1.0
這篇文章中的資訊適用於:
  • Microsoft Expression Web
關鍵字:?
kbmt kbexpertiseinter kbhowto KB928715 KbMtzh
機器翻譯
重要:本文是以 Microsoft 機器翻譯軟體翻譯而成,而非使用人工翻譯而成。Microsoft 同時提供使用者人工翻譯及機器翻譯兩個版本的文章,讓使用者可以依其使用語言使用知識庫中的所有文章。但是,機器翻譯的文章可能不盡完美。這些文章中也可能出現拼字、語意或文法上的錯誤,就像外國人在使用本國語言時可能發生的錯誤。Microsoft 不為內容的翻譯錯誤或客戶對該內容的使用所產生的任何錯誤或損害負責。Microsoft也同時將不斷地就機器翻譯軟體進行更新。
按一下這裡查看此文章的英文版本:928715
Microsoft及(或)其供應商不就任何在本伺服器上發表的文字資料及其相關圖表資訊的恰當性作任何承諾。所有文字資料及其相關圖表均以「現狀」供應,不負任何擔保責任。Microsoft及(或)其供應商謹此聲明,不負任何對與此資訊有關之擔保責任,包括關於適售性、適用於某一特定用途、權利或不侵權的明示或默示擔保責任。Microsoft及(或)其供應商無論如何不對因或與使用本伺服器上資訊或與資訊的實行有關而引起的契約、過失或其他侵權行為之訴訟中的特別的、間接的、衍生性的損害或任何因使用而喪失所導致的之損害、資料或利潤負任何責任。

提供意見

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com