<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>

.icons
{
    background: url(img/icons.png);
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    display: inline-block;
    border: 0px;
  
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    -o-transition:background 0.3s ease-in-out;
    transition:background 0.3s ease-in-out
}

.icons.facebook
{
    background-position:  0px 0px;
}

.icons.facebook.active, a:hover > .icons.facebook
{
    background-position:  0px 42px;
}

.icons.twitter
{
    background-position:  -42px 0px;
}

.icons.twitter.active, a:hover > .icons.twitter
{
    background-position:  -42px 42px;
}

.icons.events
{
    background-position:  -84px 0px;
}

.icons.events.active, a:hover > .icons.events
{
    background-position:  -84px 42px;
}

.icons.rss
{
    background-position:  -126px 0px;
}

.icons.rss.active, a:hover > .icons.rss
{
    background-position:  -126px 42px;
}
    </style>
</head>
<body>
    <div class="social-bar">
          <a href="https://www.facebook.com/w00tms" title="Like us on FaceBook"><div class="icons facebook"></div></a>
          <a href="https://twitter.com/wootstudio" title="Folllow us on Twitter"><div class="icons twitter"></div></a>
          <a href="http://feeds.feedburner.com/wootstudio/articles" title="Stay up to date via RSS"><div class="icons rss"></div></a>
          <a href="/events" title="See what's coming up"><div class="icons events"></div></a>
      </div>
</body>
</html>

css3导航-磊哥的更多相关文章

  1. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  2. 磊哥评测之数据库：腾讯云MongoDB vs自建

    本文由云+社区发表 作者:磊哥 上期文章我们聊到了redis.这期我们来说说另一个网红nosql数据库:MongoDB.有这么一个介绍MongoDB的说法是:MongoDB是非关系数据库当中功能最丰富 ...

  3. 磊哥的密码箱icpc11526

    问题 D: 磊哥的密码箱 时间限制: 1 Sec  内存限制: 128 MB提交: 238  解决: 61[提交] [状态] [命题人:admin] 题目描述 磊哥有个密码箱,里面装的都是令磊哥羞羞的 ...

  4. 恭喜磊哥喜提n+1

    昨天下午两点多磊哥突然喊我下楼,第一反应是"这孙子,抽烟就直说,还说个事,你以外你是吉祥村大姐啊". 心里骂完以后我慢慢悠悠下楼了,见他在打电话我先默默点上一支,准备待他结束以后对 ...

  5. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  6. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  7. 小米官网的css3导航菜单

    HTML代码: <div class="nav"> <ul> <li><a href="#">首页</a& ...

  8. JQ+css3 导航栏到底部上移

    导航栏 .navigation { position: fixed; bottom: 100px; right: 100px; z-index:; } .navigation { transition ...

  9. css3导航鼠标经过移动、缩放、转动、拉长、拉伸

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Open SQL详解

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. C# DataGridView控件绑定数据后清空数据

    //1.this.dataGridView1.DataSource = null;//会将DataGridView的列也删掉 //2.this.dataGridView1.Columns.Clear( ...

  3. 关于ListView嵌套GridView中的onItemClickListener失效问题

    一开始在ListView中设置了onItemClickListener,在里面Log输出Item列表的位置,完全没有反应, 网上大部分说的什么把子组件屏蔽掉(而且好多都是转载的一样的), 可是我希望的 ...

  4. 输出sed的重定向

    默认情况下,sed编辑器会将进步的结果输出到STDOUT上,你可以在shll脚本中使用所有重订向sed编辑器输出的标准方法. 你可以在脚本中用反引号来将sed编辑器命令的输出重定向到一个变量中供后面使 ...

  5. oracle的基本查询~上

    SQL> --查询一下当前登录的用户名SQL> show user;USER 为 "SCOTT"SQL> --查询当前用户下有哪些表SQL> select ...

  6. iOS - OC SingleClass 单例类

    前言 单例对象能够被整个程序所操作.对于一个单例类,无论初始化单例对象多少次,也只能有一个单例对象存在,并且该对象是全局的,能够被整个系统访问到. 特点: 在内存中只有一个实例 提供一个全局的访问点 ...

  7. SAP接口编程 之 JCo3.0系列(04) : 会话管理

    在SAP接口编程之 NCo3.0系列(06) : 会话管理 这篇文章中,对会话管理的相关知识点已经说得很详细了,请参考.现在用JCo3.0来实现. 1. JCoContext 如果SAP中多个函数需要 ...

  8. 如何读懂 STATSPACK 报告 (转) & Toad 结合

    可与 toad 相结合的内容, 用 这种颜色可以利用 toad(database->monitor->server statistics)查看到下边的很多信息, 比如 wait event ...

  9. bootstrap学习笔记<二>（标题，段落样式）

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

  10. poj3304Segments（直线与多条线段相交）

    链接 枚举两点(端点),循环遍历与直线相交的线段. #include <iostream> #include<cstdio> #include<cstring> # ...