css3导航-磊哥
<!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导航-磊哥的更多相关文章
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- 磊哥评测之数据库:腾讯云MongoDB vs自建
本文由云+社区发表 作者:磊哥 上期文章我们聊到了redis.这期我们来说说另一个网红nosql数据库:MongoDB.有这么一个介绍MongoDB的说法是:MongoDB是非关系数据库当中功能最丰富 ...
- 磊哥的密码箱icpc11526
问题 D: 磊哥的密码箱 时间限制: 1 Sec 内存限制: 128 MB提交: 238 解决: 61[提交] [状态] [命题人:admin] 题目描述 磊哥有个密码箱,里面装的都是令磊哥羞羞的 ...
- 恭喜磊哥喜提n+1
昨天下午两点多磊哥突然喊我下楼,第一反应是"这孙子,抽烟就直说,还说个事,你以外你是吉祥村大姐啊". 心里骂完以后我慢慢悠悠下楼了,见他在打电话我先默默点上一支,准备待他结束以后对 ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- 小米官网的css3导航菜单
HTML代码: <div class="nav"> <ul> <li><a href="#">首页</a& ...
- JQ+css3 导航栏到底部上移
导航栏 .navigation { position: fixed; bottom: 100px; right: 100px; z-index:; } .navigation { transition ...
- css3导航鼠标经过移动、缩放、转动、拉长、拉伸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- CALayer总结(一)
1.geometryFlipped 设置为yes,则子图层或者子视图本来相对于左上角放置 改为 相对于左下角放置: 2.contents 3.contentGravity: kCAGravityC ...
- poj2002Squares(点集组成正方形数)
链接 可以枚举两个点,因为是正方形两外两点可以由已知求出,据说可以根据三角形全等求出下列式子,数学渣不会证... 已知: (x1,y1) (x2,y2) 则: x3=x1+(y1-y2) y ...
- apiCloud授权绑定第三方账号,微信、QQ、微博。
1.检测软件是否安装 2.授权获取code 3.获取token,openid等 4.获取头像昵称 var wx,qq,weibo; var loginParam={}; apiready = func ...
- 动态替换fragment
// [1]获取手机的宽和高 windommanager WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE); in ...
- OpenGL的几何变换3之内观察全景图
继续上一篇文章的例子:OpenGL的几何变换2之内观察立方体 上一篇是通过绘图方式得到的立方体,没有贴图,这次加上纹理贴图. 通过纹理贴图有两种方案: 1.图片分割化,即是把一张完整的全景图片(就是支 ...
- Hbase之遍历获取数据
import org.apache.hadoop.conf.Configuration;import org.apache.hadoop.hbase.HBaseConfiguration;import ...
- LaTeX内容总结
欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...
- linux笔记:软件包管理-软件包简介
软件包分类: 1.源码包: 2.二进制包(在centos里就是RPM包.和源码包的区别在于已经经过编译.) 源码包的优点和缺点: RPM包的优点和缺点:
- DispatcherServlet默认配置
DispatcherServlet的默认配置在DispatcherServlet.properties(和DispatcherServlet类在一个包下)中,而且是当Spring配置文件中没有指定配置 ...
- javascript之with的使用 弊端
妹的,昨天都快写完了,一不小心点了个关闭,然后...就没有然后了 wordpress的自动保存功能咋就这么不靠谱呢 记得还在懵懂学习JavaScript基础之时,坊间便有传言“with语句是低效率语句 ...