如何创建自定义的超链接在 Expression Web 使用级联样式表

文章翻译 文章翻译
文章编号: 928715 - 查看本文应用于的产品
展开全部 | 关闭全部

本文内容

简介

本文介绍如何创建自定义的超链接中 Microsoft Expression Web 使用级联样式表 (CSS)。它包含演示如何创建自定义的超链接使用 CSS 功能示例。

更多信息

示例 1: 创建超链接的下划线格式显示在不同的颜色

本示例为文档中的文字为相同颜色的超链接文本的格式设置。一种不同的颜色显示只下划线格式的超链接。若要进行这些自定义的超链接,请按照下列步骤操作:
  1. 启动 Expression 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. 文件 菜单上指向 在浏览器中的预览,然后单击在 Web 浏览器,您要使用预览页。

示例 2: 创建使用悬停按钮的超链接

本示例创建使用具有纯色背景的悬停按钮的超链接。若要进行这些自定义的超链接,请按照下列步骤操作:
  1. 启动 Expression 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. 文件 菜单上指向 在浏览器中的预览,然后单击在 Web 浏览器,您要使用预览页。

示例 3: 创建使用大纲悬停按钮的超链接

本示例创建使用大纲悬停按钮的超链接。当您在这些超链接上时,超链接文本周围会出现一个带颜色的框。这将创建轮廓效果。若要进行这些自定义的超链接,请按照下列步骤操作:
  1. 启动 Expression 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. 文件 菜单上指向 在浏览器中的预览,然后单击在 Web 浏览器,您要使用预览页。

示例 4: 创建使用不同的文本的格式设置超链接

本示例设置要使用不带下划线、 倾斜、 小写文本超链接的格式。当您在这些超链接上时,该文字将变为大写。若要进行这些自定义的超链接,请按照下列步骤操作:
  1. 启动 Expression 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. 文件 菜单上指向 在浏览器中的预览,然后单击在 Web 浏览器,您要使用预览页。

参考

有关详细的信息请单击下面的文章编号,以查看 Microsoft 知识库中相应的文章:
825450如何通过在 FrontPage 2003 中使用级联样式表创建自定义的超链接
196488什么级联样式表?
222949如何创建使用 DHTML 和 CSS,在 FrontPage 中的窗体按钮的悬停效果

属性

文章编号: 928715 - 最后修改: 2006年12月6日 - 修订: 1.0
这篇文章中的信息适用于:
  • Microsoft Expression Web
关键字:?
kbmt kbexpertiseinter kbhowto KB928715 KbMtzh
机器翻译
注意:这篇文章是由无人工介入的微软自动的机器翻译软件翻译完成。微软很高兴能同时提供给您由人工翻译的和由机器翻译的文章, 以使您能使用您的语言访问所有的知识库文章。然而由机器翻译的文章并不总是完美的。它可能存在词汇,语法或文法的问题,就像是一个外国人在说中文时总是可能犯这样的错误。虽然我们经常升级机器翻译软件以提高翻译质量,但是我们不保证机器翻译的正确度,也不对由于内容的误译或者客户对它的错误使用所引起的任何直接的, 或间接的可能的问题负责。
点击这里察看该文章的英文版: 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