网页超级链接Title冒泡提示效果

发布时间：2018-09-01 08:23 所属栏目：30 来源：站长网

导读：效果预览传统的mouseover提示效果图： 1、 2、友好的设计 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlheadtitleMingle Web-Bubble Tooltips - liehuo.net/titlemeta http-equiv=content-type content=tex

效果预览

传统的mouseover提示效果图：

1、

网页超级链接Title冒泡提示效果

2、友好的设计

网页超级链接Title冒泡提示效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mingle Web-Bubble Tooltips - liehuo.net</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="TaiChi 0.1"> <script type="text/javascript" src="/uploads/allimg/0911/BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips("content")}; </script> <style type="text/css"> body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333} div#container{width: 750px;margin:0 auto} div#content{float:left;width:480px} div#navigation{float:right;width:230px} div#navigation a{color: #009} h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px} p{margin: 0 0 1.7em} a{color: #F60;font-weight:bold} a:hover{color: #F00} div#container{margin:0 auto} </style> </head> <body> <div id="container"> <h1>气泡式提示</h1> <div id="content"> <p>欢迎光临明高工作室！<a href="http://mingle.cnblogs.com" title="气泡式工具提示在Form中的应用!">下一版本</a>Web设计的组件化开发你准备好了吗？</p> 作者：<input type="text" name="Author" id = "Author"/> 城市： <select name="city" size="1" id="city"> <option>北京</option> <option>上海</option> <option>天津</option> </select> </div> <div id="navigation"> <p><strong>非气泡式提示</strong>丑陋丑陋，太丑陋了！ <a href="http://mingle.cnblogs.com" title="我要泡泡，我要美美！">普通模样</a>快快行动吧，Web3.0来临了！</p> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

作者：MingleLui 出处：http://mingle.cnblogs.com/

（编辑：ASP站长网）