zoukankan      html  css  js  c++  java
  • CSS伪类实现的鼠标滑动图片链接

    代码简介:

    CSS伪类实现的鼠标滑动链接,是一个图片导航,在早期的DW中有专一制作本效果的插件,不过随着大家CSS水平的提高,现在做出这种效果好像得心应手了,因为这种果大家应该都挺喜欢的。

    代码内容:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>CSS伪类实现的鼠标滑动图片链接_网页代码站(www.webdm.cn)</title>
    <style>
    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;
    280px;
    border:1px solid #777777;
    }
    
    #Nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    }
    
    #Nav li {
    float:left;
    margin:0;
    130px;
    height:33px;
    margin-left:5px;
    padding:0;
    }
    
    #Nav a {
    display:block;
    130px;
    height:33px;
    line-height:33px;
    }
    
    #Nav a.Dict:link,#Nav a.Dict:visited {
    text-decoration:none;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left top no-repeat;
    }
    
    #Nav a.Dict:hover,#Nav a.Dict:active {
    text-decoration:none;
    font-weight:bold;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left -33px no-repeat;
    }
    
    #Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
    text-decoration:none;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left -66px no-repeat;
    }
    
    #Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
    text-decoration:none;
    font-weight:bold;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left -99px no-repeat;
    }
    
    #Nav a.RealPlay:link,#Nav a.RealPlay:visited {
    text-decoration:none;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left -132px no-repeat;
    }
    
    #Nav a.RealPlay:hover,#Nav a.RealPlay:active {
    text-decoration:none;
    font-weight:bold;
    background:url(http://www.webdm.cn/images/20100419/nav.gif) left -165px no-repeat;
    }
    </style>
    
    </head>
    <body>
    <center>
    <div id="Nav">
    	<ul>
    		<li><a class="Dict" href="#">词霸</a></li>
    		<li><a class="MediaPlay" href="#">MediaPlay</a></li>
    		<li><a class="RealPlay" href="#">RealPlay</a></li>
    		<li><a class="CodeFans" href="#">MediaPlay</a></li>
    		<li><a class="RealPlay" href="#">RealPlay</a></li>
    	</ul>
    </div>
    </center>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/1c7dd0dc-803b-4fc9-bba1-aa546db2feb8.html

  • 相关阅读:
    Linux Xshell常用命令(项目部署)
    返回的数据转换成百分比分的方法
    百度分享插件
    vue请求中 post get传参方式是不同的哦
    Axios 中文使用
    关于iview ui的"Page分页"组件的使用
    Vue 实现前进刷新,后退不刷新的效果
    Vue框架Element UI教程-axios请求数据
    Spring学习总结(8)-接口多个实现类的动态调用
    Redis集群
  • 原文地址:https://www.cnblogs.com/webdm/p/2052602.html
Copyright © 2011-2022 走看看