链接提示,a标签,title属性建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在默认状态下可以使用<a>标签的title属性实现链接提示效果。例如
View Code <!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>蚂蚁部落</title> </head> <body> <a href="http://www.softwhy.com" title="蚂蚁部落">蚂蚁部落</a> </body> </html>
虽然上面的代码能够实现链接提示效果，但是往往并不能够满足实际需求，可能需要自定义更为美观或者与页面相搭配的链接提示效果。代码实例如下
View Code <!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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>蚂蚁部落</title> <style type="text/css"> ul { list-style:none; font-size:14px; } li { width:100px; height:30px; line-height:30px; float:left; text-align:center; position:relative; border:1px solid red; } span { display:none; } a:link,a:visited { text-decoration:none; } a:hover .tishi { display:block; width:100px; height:30px; background-color:#6C9; line-height:30px; text-align:center; position:absolute; left:80px; top:40px; color:#FFFFFF; } </style> </head> <body> <ul> <li> <a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a> </li> <li> <a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a> </li> <li> <a href="#" class="mylink">JS<span class="tishi">JS</span></a> </li> <li> <a href="#" class="mylink">HTML<span class="tishi">HTML</span></a> </li> <div style="clear:both"></div> </ul> </body> </html>
以上代码顺利实现了我们想要的效果。最主要的方法就是利用超链接伪类实现span元素的显示
链接提示,a标签,title属性
|
