In the front, we talked about the underline of the link text, and now we consider how to implement the link text to create a shadow? When the mouse moved to the link text, the link text can change the color, and create a certain shadow and create a stereo effect, must be more eye-catching.
Link text Shadow effect CSS code:
ul,li{margin:0px; padding:0px; list-style-type:none;}
#nav {font-family:verdana, "XXFarEastFont-Arial";
#nav li{float:left; margin-left:30px;}
#nav Span{display:none;}
#nav a{font-size:12px; font-weight:800; color: #c00; text-decoration:none; display:block;}
#nav a:hover{color: #999; top:1px; left:1px; position:relative;}
#nav a:hover span{display:block; top:-1px; left:-2px; position:absolute; color: #000; cursor:pointer;}
Link text Shadow effect XHTML code:
<div id= "nav"
<ul>
<li><a href= "webjx.comhttp:// www.webjx.com/">Webjx.Com<span> home </span></a></li>
<li><a href=" Div+css ' >http://www.webjx.com/' >div+css tutorials <span>div+css tutorials </span></a></li>
<li><a href= "CSS ' >http://www.webjx.com/" >css layout instance <span>css layout instance </span></a> </li>
<li><a href= "CSS2.0 ' >http://www.webjx.com/" >css2.0 tutorials </span></a></li>
<li><a href= "CSS ' >http://www.webjx.com/" >css online manual < SPAN>CSS Online manual </span></a></li>
<li><a href= "Web ' >http://www.webjx.com/" >web Standard <span>web Standard </span></a></li>
<li><a href= "XHTML" >http:// www.webjx.com/">xhtml tutorial <span>xhtml tutorial </span></a></li>
</ul>
</ Div>
Link Text Shadow effect instance:
<! 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" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" text/css "><!--ul,li{margin:0px ; padding:0px; List-style-type:none;} #nav {font-family:verdana, "XXFarEastFont-Franklin, Arial;} #nav li{float:left; margin-left:30px} #nav Span{display:none;} #nav A{font-siz e:12px; font-weight:800; Color: #c00; Text-decoration:none; Display:block;} #nav a:hover{color: #999; top:1px; left:1px position:relative;} #nav a:hover span{display:block; top:-1px; po Sition:absolute; Color: #000; Cursor:pointer;} --></style></pead><body><div id= "NAV" > <ul> <li><a href= "http://" www.webjx.com/">Webjx.Com<span> site home </span></a></li> <li><a href=" http:// www.webjx.com/">div+css Tutorial <span≫div+css Tutorials </span></a></li> <li><a href= "http://www.webjx.com/" >css layout instance <span >css Layout instance </span></a></li> <li><a href= "http://www.webjx.com/" >css2.0 tutorial <span >css2.0 Tutorials </span></a></li> <li><a href= "http://www.webjx.com/" >css online manual <span >CSS Online manual </span></a></li> <li><a href= "http://www.webjx.com/" >web standard <span> Web standards </span></a></li> <li><a href= "http://www.webjx.com/" >xhtml tutorials <span> XHTML Tutorials </span></a></li> </ul></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
