CSS样式中超链接的四种常见链接效果设置方法

小七 发表于:2017-05-05 19:47 复制链接

您的等级不够,“初级及以上会员” 开启

?提问题 +写文章
阅读数:5379
接着介绍超链接的CSS效果,我们在网页中最常用的超链接是无修饰的,既没有线条也没有特效,偶尔在某些地方,需要突出超链接的时候,也有需要用到线条和特效进行区分或者突出超链接的存在,这一节就介绍4种常见的超链接效果,完整的演示代码如下:
最后一个是3D超链接,border-style: outset;定义3D outset边框,效果通过border-color颜色来控制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a {
               font-size:12px;
               text-decoration:none;
  }
.testone{
               color:#000000;
               text-decoration:none;
             }
.testtwo{
               color:#FF0000;
               text-decoration:underline;
            }
.testthree{
               color:#FF0000;
               background-color:#CCCCCC;
               border:1px #FF0000 solid;
               }
.testfour{
               color:#000000;
               padding:10px;
               background-color:#CCCCCC;
               text-align:center;
               border:#FFFFCC;
               border-style:  outset;
               border-top-width:5px;
               border-right-width:5px;
               border-bottom-width:5px;
               border-left-width:5px;
              }
.testone:hover{
               color:#FF0000;
               text-decoration:underline;
               }
.testtwo:hover{color: #000000;text-decoration:underline}
.testthree:hover{
                         color: #333333;
                         background-color:#FFFF00;
                         border:1px #0000FF solid;
                                 }
.testfour:hover{
                         color:#000000;
                         padding:10px;
                         background-color:#FFFFCC;
                         text-align:center;
                         border:#CCCCCC;
                         border-style: outset;
                         border-top-width:5px;
                         border-right-width:5px;
                         border-bottom-width:5px;
                         border-left-width:5px
                        }
</style>
</head>

<body>
<a href="http://www.SEOwhy7.com/" class="testone">testone,这是最常见的一种无修饰的超链接效果</a><br /><br />
<a href="http://www.seowhy7.com/" class="testtwo">testtwo,带下划线的超链接效果,用的也比较多</a><br /><br />
<a href="http://www.seowhy7.com/" class="testthree">testthree,块状链接,鼠标放上去,改变四条边的边框颜色、背景颜色、文字颜色</a><br /><br />
<a href="http://www.seowhy7.com/" class="testfour">testfour,按钮风格的超链接,是不是很酷,需要注意的是,这里的阴影3D立体效果,使用border-style: outset;</a><br />
</body>
</html>4中测试超链接的效果图如下:

鼠标放上去的hover效果分别如下:





返回列表 使用道具 举报
18 条评论
您需要登录后才可以回帖 登录 | 注册
高级
sevenyumall sevenyumall 发表于 2017-05-05 22:09 | 阅读全部
谢楼主分享精彩内容、来学习了
使用道具 举报
回复
yaozhong6625 yaozhong6625 发表于 2017-05-05 22:30 | 阅读全部
楼主说得很好,支持了
使用道具 举报
回复
pertepan pertepan 发表于 2017-05-05 22:34 | 阅读全部
不错不错,支持一下
使用道具 举报
回复
肖大胖学seo 肖大胖学seo 发表于 2017-05-06 08:40 | 阅读全部
必看啊,很好
使用道具 举报
回复
缘位餐饮 缘位餐饮 发表于 2017-05-06 16:34 | 阅读全部
一样不会能做SEO吗
使用道具 举报
回复
manyijiedai manyijiedai 发表于 2017-05-06 17:44 | 阅读全部
支持一下,css用途越来越广了
使用道具 举报
回复
fundown fundown 发表于 2017-05-07 09:18 | 阅读全部
他们这些对seo本身的影响大吗?
使用道具 举报
回复
成功玻璃制品 成功玻璃制品 发表于 2017-05-07 19:17 | 阅读全部
谢谢楼主的分享,写的真是太好了,值得学习。
使用道具 举报
回复
写的不错,不错,顶一下!
使用道具 举报
回复
12下一页
相关推荐

您的等级不够,“高级会员” 开启