第8讲 内容细化 超链接特效
超链接作为连接各个页面的纽带,在网页中起着至关重要的作用.它主要通过<a>标记来实现.
基本的有<a href=”URL”></a>
我们通过CSS,可以极大的美化超链接.
这里我们运用的主要是鼠标划过,也就是a:hover以及其他的特殊css定义.
举个例子:
HTML
复制内容到剪贴板
代码:
<a href="#">初态是黑色,划过是红色并显示下划线</a>CSS
复制内容到剪贴板
代码:
a{color:#000000; text-decoration:none;}/*文字颜色黑色,无下划线*/
a:hover{color:#FF0000; text-decoration:underline;}/*文字颜色红色,有下划线*/我们还可以通过图像美化,比如常见的伪CSS鼠标滑动特效
运用的图片
HTML,因为代码非常简单,就不做解释了.
复制内容到剪贴板
代码:
<div id="link">
<li><a href="#" class="link">11</a></li>
<li><a href="#" class="link">22</a></li>
<li><a href="#" class="link">33</a></li>
</div>CSS,请注意注释语句
复制内容到剪贴板
代码:
#link li{list-style:none; width:130px;height:33px;}/*list无样式,宽度130px,高度33px*/
#link a{height:33px; width:130px; line-height:33px; display:block;color:#000000; font-size:16px;margin:0px; margin-left:15px; text-align:center;}/*前面3个属性分别是说明高度,宽度,和行高,之后的display:block是定义此为区域这个不可缺少,后面两个属性是字体颜色和字体大小定义,然后像左缩进15px,其他缩进为0,文字居中*/
#link a.link:visted,#link a.link:link{background:url(bg.gif) left top;text-decoration:none;}
/*这一行是定义的普通状态下,即已访问和链接,定义了背景图,左距离和上距离都为0,文字无下划线*/
#link a.link:hover,#link a.link:active{background:url(bg.gif) left -33px;text-decoration:none;}
/*这一行是定义的划过状态下,即鼠标划过和活动链接,定义了背景图,左距离为0上距离为-33,文字无下划线*/下面我们来看看做图像链接的美化…
用到的图片
HTML
复制内容到剪贴板
代码:
<div class="div"><a href="#" class="img" title="练习"><img src="dst_icon.jpg" alt="练习" /></a></div>CSS
复制内容到剪贴板
代码:
.div{padding-top:10px;}/*距离顶部10px这个是为了能让大家能看清全部的样子*/
img{border:0px;}/*重定义图像边框一直为0*/
a.img:link,a.img:visited{border-style:solid; border:#333333 1px; padding:3px;}
/*这一行是定义的普通状态下,即已访问和链接,边框颜色是#333333,宽度是1px,向四周拓展3px*/
a.img:hover,a.img:active{border-style:solid; border:#0099FF 1px;padding:3px;}
/*这一行是定义的划过状态下,即鼠标划过和活动链接,边框颜色是#0099FF,宽度是1px,向四周拓展3px*/本讲讲述了几种常用的超链接美化,希望各位举一反三,能够灵活运用
下一讲 内容细化 构建图文并排样式
我的助手
