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

重要:本文是以 Microsoft 機器翻譯軟體翻譯而成,而非使用人工翻譯而成。Microsoft 同時提供使用者人工翻譯及機器翻譯兩個版本的文章,讓使用者可以依其使用語言使用知識庫中的所有文章。但是,機器翻譯的文章可能不盡完美。這些文章中也可能出現拼字、語意或文法上的錯誤,就像外國人在使用本國語言時可能發生的錯誤。Microsoft 不為內容的翻譯錯誤或客戶對該內容的使用所產生的任何錯誤或損害負責。Microsoft也同時將不斷地就機器翻譯軟體進行更新。

按一下這裡查看此文章的英文版本: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 - 最後檢閱時間:12/09/2015 08:24:49 - 修訂: 1.0

Microsoft Expression Web

  • kbnosurvey kbarchive kbmt kbexpertiseinter kbhowto KB928715 KbMtzh
意見反應