网页设计15-超链接
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</style>
/* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */
内部培训资料,不作任何宣传用途
课堂实践 2设置按钮式的超链接样式
（1）设置统一样式： a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px;
内部培训资料,不作任何宣传用途
课堂实践 (2) 设置超链接的样式
…… <style> <!--
a:link{
} a:visited{/* 访问过的超链接 */ color:#CC66CC; /* 紫色 */ text-decoration:none; /* 无下划线 */ } a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */ }……
} （2）利用边框样式模拟按钮效果
内部培训资料,不作任何宣传用途
课堂实践 (3)设置鼠标经过的超链接样式
改变文字颜色、背景色、 位置和边框，模拟“按下 去”的效果
内部培训资料,不作任何宣传用途
课堂实践 3设置浮雕式的超链接样式
（1）制作背景渐变的图片做标题栏的背景
内部培训资料,不作任何宣传用途
The End
Thanks a lot!
内部培训资料,不作任何宣传用途
课堂实践 (2)制作浮雕的背景，样式table.links
制作浮雕的图片做超链接所在表格的行的背景
内部培训资料,不作任何宣传用途
课堂实践 (3)制作按钮的背景图,添加到<a>标记选择器中
制作按钮图片做按钮的背景图
内部培训资料,不作任何宣传用途
课堂实践 (4)制作鼠标经过按钮的样式,添加到<a:hover>选择器 中制作深色浮雕图片做按钮的背景图
内部培训资料,不作任何宣传用途
课堂实践 (5)制作鼠标的样式,添加到<a.help:hover>选择器中
内部培训资料,不作任何宣传用途
课后作业
1. 参照课本P252-257中的例子，创建一网页15-1.htm—设 计出另一种具有按钮式的超链接和荧光灯效果的菜单的网页。
内部培训资料,不作任何宣传用途
网页设计与制作（15）
CSS样式（9） ----超链接
授课人：何蕴婷 EMAIL：jmhyt@126.com
பைடு நூலகம்
知识技能目标
1、通过实训项目了解并掌握用css设置 超链接样式。
内部培训资料,不作任何宣传用途
实训内容
在网页中用css设置超链接样式 实训一：浮雕超链接
内部培训资料,不作任何宣传用途
实训项目
1、超链接实例1 通过实例了解CSS对超链接的控制效果
内部培训资料,不作任何宣传用途
课堂实践 (1) 表格中插入带超链接的正文
<table cellpadding="0" cellspacing="0" > <tr><td><img src="banner1_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" > <tr><td><a href="#">首页导读</a><a href="#">在线 用户</a><a href="#">查询网友</a><a href="#">在线 好友</a><a href="#">好友名单</a><a href="#">查看 讯息</a><a href="#">发送讯息</a></td></tr> </table>
/* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */
内部培训资料,不作任何宣传用途
课堂实践 2设置按钮式的超链接样式
（1）设置统一样式： a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px;
内部培训资料,不作任何宣传用途
课堂实践 (2) 设置超链接的样式
…… <style> <!--
a:link{
} a:visited{/* 访问过的超链接 */ color:#CC66CC; /* 紫色 */ text-decoration:none; /* 无下划线 */ } a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */ }……
} （2）利用边框样式模拟按钮效果
内部培训资料,不作任何宣传用途
课堂实践 (3)设置鼠标经过的超链接样式
改变文字颜色、背景色、 位置和边框，模拟“按下 去”的效果
内部培训资料,不作任何宣传用途
课堂实践 3设置浮雕式的超链接样式
（1）制作背景渐变的图片做标题栏的背景
内部培训资料,不作任何宣传用途
The End
Thanks a lot!
内部培训资料,不作任何宣传用途
课堂实践 (2)制作浮雕的背景，样式table.links
制作浮雕的图片做超链接所在表格的行的背景
内部培训资料,不作任何宣传用途
课堂实践 (3)制作按钮的背景图,添加到<a>标记选择器中
制作按钮图片做按钮的背景图
内部培训资料,不作任何宣传用途
课堂实践 (4)制作鼠标经过按钮的样式,添加到<a:hover>选择器 中制作深色浮雕图片做按钮的背景图
内部培训资料,不作任何宣传用途
课堂实践 (5)制作鼠标的样式,添加到<a.help:hover>选择器中
内部培训资料,不作任何宣传用途
课后作业
1. 参照课本P252-257中的例子，创建一网页15-1.htm—设 计出另一种具有按钮式的超链接和荧光灯效果的菜单的网页。
内部培训资料,不作任何宣传用途
网页设计与制作（15）
CSS样式（9） ----超链接
授课人：何蕴婷 EMAIL：jmhyt@126.com
பைடு நூலகம்
知识技能目标
1、通过实训项目了解并掌握用css设置 超链接样式。
内部培训资料,不作任何宣传用途
实训内容
在网页中用css设置超链接样式 实训一：浮雕超链接
内部培训资料,不作任何宣传用途
实训项目
1、超链接实例1 通过实例了解CSS对超链接的控制效果
内部培训资料,不作任何宣传用途
课堂实践 (1) 表格中插入带超链接的正文
<table cellpadding="0" cellspacing="0" > <tr><td><img src="banner1_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" > <tr><td><a href="#">首页导读</a><a href="#">在线 用户</a><a href="#">查询网友</a><a href="#">在线 好友</a><a href="#">好友名单</a><a href="#">查看 讯息</a><a href="#">发送讯息</a></td></tr> </table>