这里有新鲜出炉的精品教程,程序狗速度看过来!
它是一种用来表现 html(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS(层叠样式表) 即 级联样式表 。
CSS 伪类实现的鼠标滑动链接,是一个图片导航,在早期的 DW 中有专一制作本效果的插件,不过随着大家 CSS 水平的提高,现在做出这种效果好像得心应手了,因为这种果大家应该都挺喜欢的。
下面的代码用到上面的图片,大家注意保存下。
- <!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">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <title>
- CSS伪类实现的鼠标滑动链接
- </title>
- <style>
- @charset "utf-8"; /* CSS Document For www.jb51.net*/ body { text-align:center;
- font-size:12px; color:#777777; font-family:Verdana, Arial, Verdana, sans-serif,"宋体";
- background-color:#FFFFFF; margin:0; padding:0; } #Nav { margin:0; float:left;
- padding:5px 5px; text-align:center; width:280px; border:1px solid #777777;
- } #Nav ul { margin:0; padding:0; list-style-type:none; } #Nav li { float:left;
- margin:0; width:130px; height:33px; margin-left:5px; padding:0; } #Nav
- a { display:block; width:130px; height:33px; line-height:33px; } #Nav a.Dict:link,#Nav
- a.Dict:visited { text-decoration:none; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left top no-repeat; } #Nav a.Dict:hover,#Nav a.Dict:active { text-decoration:none;
- font-weight:bold; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left -33px no-repeat; } #Nav a.MediaPlay:link,#Nav a.MediaPlay:visited
- { text-decoration:none; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left -66px no-repeat; } #Nav a.MediaPlay:hover,#Nav a.MediaPlay:active
- { text-decoration:none; font-weight:bold; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left -99px no-repeat; } #Nav a.RealPlay:link,#Nav a.RealPlay:visited {
- text-decoration:none; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left -132px no-repeat; } #Nav a.RealPlay:hover,#Nav a.RealPlay:active {
- text-decoration:none; font-weight:bold; background:url(http://files.jb51.net/demoimg/200910/nav.gif)
- left -165px no-repeat; }
- </style>
- </head>
- <body>
- <center>
- <div>
- <ul>
- <li>
- <a href="#">
- 词霸
- </a>
- </li>
- <li>
- <a href="#">
- MediaPlay
- </a>
- </li>
- <li>
- <a href="#">
- RealPlay
- </a>
- </li>
- <li>
- <a href="#">
- MediaPlay
- </a>
- </li>
- <li>
- <a href="#">
- RealPlay
- </a>
- </li>
- </ul>
- </div>
- </center>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0714/286397.html