css实例－超链接alt 提示效果

2008-05-13 20:25:17

点这里查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
   <title>freeren - CSS </title>
   <meta http-equiv="content-type" content="text/html; charset=gbk" />
<style type="text/css">

h3{margin:30px;text-align:center}
h3 span{color:#53CB1F;}
p{clear:both;text-align:center;padding-top:60px !important;padding-top:0}

/* ---------------------------------
    MiniAdv CSS
    Author: Freeren
    Website: http://www.freeren.org
    Please give us a link back!
    --------------------------------- */

#miniadv{width:90%;margin:8px auto; background-color:#ffffff;}
#miniadv ul{margin:0;padding:0;list-style:none;}
#miniadv ul li {float:left;margin:4px 8px;position:relative;display:inline;}
#miniadv a{
position:relative;
z-index:5;
color:#5a549e;
line-heignt:18px;
display:block;
}
#miniadv a:hover{z-index:10;background:#5a549e;color:#000;}
#miniadv a span{display:none;}
#miniadv a span strong{display:block;color:#97EE3D;margin-bottom:3px}
#miniadv a:hover span{display:block;position:absolute;bottom:1.6em;right:1.6em;padding:4px;width:135px;border:1px solid #97EE3D;background:#000;color:#fff;font-size:12px;}
#miniadv img{border:0px;}

/* end of MiniAdv CSS */
</style>
  
</head>
<body>
<h3><span>FreeRen Css Example</span></h3>
<div id="miniadv">

<ul>
<li><a href="http://www.google.com"><img src="img/google.jpg" alt="Google" /><span><strong>Google.com</strong>Search engine</span></a></li>
<li><a href="http://www.yahoo.com"><img src="img/yahoo.jpg" alt="Yahoo" /><span><strong>Yahoo.com</strong>Quickly find what you're searching for</span></a></li>
<li><a href="http://www.cssbeauty.com"><img src="img/cssbeauty.jpg" alt="CssBeauty" /><span><strong>CSSBeauty.com</strong>News, jobs, community</span></a></li>
<li><a href="http://css.html.it/"><img src="img/htmlit.jpg" alt="HTML.it" /><span><strong>CSS HMTL.it</strong>Guide, articoli di approfondimento e risorse su Css</span></a></li>
<li><a href="http://www.456bereastreet.com/"><img src="img/berea.jpg" alt="456 Berea Street"/><span><strong>456 Berea Street</strong>Articles and news on web standards, accessibility, and usability</span></a></li>
<li><a href="http://www.smashingmagazine.com/"><img src="img/smashingmagazine.jpg" alt="Smashing Magazine" /><span><strong>Smashing Magazine</strong>We smash you</span></a></li>
<li><a href="http://www.freeren.org"><span><strong>公告:</strong>黄金位置出售:每月30RMB.</span></a></li>
<li><a href="http://www.alistapart.com/"><img src="img/alistapart.jpg" alt="Alistapart" /><span><strong>Alistapart.com</strong>XHTML and CSS</span></a></li>
<li><a href="http://www.cameronmoll.com/"><img src="img/cameronmoll.jpg" alt="Cameron Moll" /><span><strong>Cameron Moll</strong>Authentic Boredom</span></a></li>
<li><a href="http://www.tomstardust.com/"><img src="img/tomsturdast.jpg" alt="Tom Sturdust" /><span><strong>Tom Sturdast</strong>About webdesign</span></a></li>
<li><a href="http://www.thinkvitamin.com/"><img src="img/vitamin.jpg" alt="Vitamin" /><span><strong>Vitamin</strong>Nourishment to help the web grow</span></a></li>
<li><a href="http://www.freeren.org"><span><strong>公告:</strong>出售:每月30RMB.</span></a></li>

<li><a href="http://www.google.com"><img src="img/google.jpg" alt="Google" /><span><strong>Google.com</strong>Search engine</span></a></li>
<li><a href="http://www.yahoo.com"><img src="img/yahoo.jpg" alt="Yahoo" /><span><strong>Yahoo.com</strong>Quickly find what you're searching for</span></a></li>
<li><a href="http://www.cssbeauty.com"><img src="img/cssbeauty.jpg" alt="CssBeauty" /><span><strong>CSSBeauty.com</strong>News, jobs, community</span></a></li>
<li><a href="http://css.html.it/"><img src="img/htmlit.jpg" alt="HTML.it" /><span><strong>CSS HMTL.it</strong>Guide, articoli di approfondimento e risorse su Css</span></a></li>
<li><a href="http://www.456bereastreet.com/"><img src="img/berea.jpg" alt="456 Berea Street" /><span><strong>456 Berea Street</strong>Articles and news on web standards, accessibility, and usability</span></a></li>
<li><a href="http://www.smashingmagazine.com/"><img src="img/smashingmagazine.jpg" alt="Smashing Magazine" /><span><strong>Smashing Magazine</strong>We smash you</span></a></li>
<li><a href="http://www.freeren.org"><span><strong>公告:</strong>黄金位置出售:每月30RMB.</span></a></li>
<li><a href="http://www.alistapart.com/"><img src="img/alistapart.jpg" alt="Alistapart" /><span><strong>Alistapart.com</strong>XHTML and CSS</span></a></li>
<li><a href="http://www.cameronmoll.com/"><img src="img/cameronmoll.jpg" alt="Cameron Moll" /><span><strong>Cameron Moll</strong>Authentic Boredom</span></a></li>
<li><a href="http://www.tomstardust.com/"><img src="img/tomsturdast.jpg" alt="Tom Sturdust" /><span><strong>Tom Sturdast</strong>About webdesign</span></a></li>
<li><a href="http://www.thinkvitamin.com/"><img src="img/vitamin.jpg" alt="Vitamin" /><span><strong>Vitamin</strong>Nourishment to help the web grow</span></a></li>
<li><a href="http://www.freeren.org"><span><strong>公告:</strong>出售:每月30RMB.</span></a></li>
<li><a href="http://www.freeren.org"><span><strong>公告:</strong>出售:每月30RMB.</span></a></li>

</ul>

</div>
</body>
</html>

FreeRen Css Example

 

上一篇：CSS2.0基础知识--语法技巧
下一篇：css学习教程-CSS 速成

发表看法1

有什么想说的吗？

  • 域名注册网站设计西安seo帮我建站web前端技术论坛夫子吧JEEDOO-漂博墨白RainWeb站码