精通 CSS+DIV 网页样式与布局 78

相濡以沫si

于 2016-12-07 20:36:40 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

分类专栏： css+div 文章标签： css 工作生活

本文链接：https://blog.youkuaiyun.com/myjnt/article/details/53510218

css+div 专栏收录该内容

168 篇文章

订阅专栏

本文介绍了一种使用CSS为超链接设计浮雕效果的方法。通过设置不同的背景图片和颜色，可以在鼠标悬停时改变链接外观，实现美观且实用的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
<a href=”#”>首页</a>
<a href=”#”>心情日记</a>
<a href=”#”>学习心得</a>
<a href=”#”>工作笔记</a>
<a href=”#”>生活琐碎</a>
<a href=”#”>其他</a>
</body>
</html>
<html>
<head>
<title> 浮雕超链接 </title>
<style>
<!–
body{
padding:0px;
margin:0px;
background-color:#f5eee1;
}
table.banner{
background:url(banner1_bg.jpg) repeat-x;
width:100%;
}
table.links{
background:url(button1_bg.jpg) repeat-x;
font-size:12px;
width:100%
}
a{
width:80px; height:32px;
padding-top:10px;
text-decoration:none;
text-align:center;
background:url(button1.jpg) no-repeat; /* 超链接背景图片 */
}
a:link{color:#654300;}
a:visited{color:#654300;}
a:hover{
color:#FFFFFF;
text-decoration:none;
background:url(button2.jpg) no-repeat; /* 变换背景图片 */
}