【正规SEO排名技术】排名上了再付款 正规SEO排名技术 704696534 【正规SEO排名技术】排名上了再付款

【小七教程】CSS样式中超链接的四种常见链接效果设置方 ...

小七 于  19:47 发表在  软文区 商家入驻 5226
接着介绍超链接的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效果分别如下:





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

评论 举报

评论

帮你查询到 25 条优质的评论。
您需要登录后才可以回帖 登录 | 注册

小七

管理员

  1. 240 文章
  2. 5010 积分

最近发表

搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,是致力于培养学员、高端人才输送服务。
快速回复 返回顶部 返回列表