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下几种文件传输命令 sz rz sftp scp
    jqGrid subGrid配置 如何首次加载动态展开所有的子表格
    MySQL使用规范
    Navicat连接MySQL报错2059
    微信小程序
    完美解决 ios10 及以上 Safari 无法禁止缩放的问题
    html5利用getObjectURL获取图片路径上传图片
    Vue的单页应用中如何引用单独的样式文件
    用JS添加和删除class类名
    APP中的 H5和原生页面如何分辨、何时使用
  • 原文地址:https://www.cnblogs.com/webdm/p/2052602.html
Copyright © 2011-2022 走看看