1
如何移动Google+旁边的GitHub图标？如何在不同位置移动小部件元素html/css？
的HTML和JavaScript：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- title and meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Some demos for nicer css3 icons.">
<title>media widgets</title>
<!-- css -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css? family=Roboto+Slab">
<link rel="stylesheet" href="css/demo.css">
<!-- modernizr -->
<script src="js/common/modernizr.js"></script>
</head>
<body>
<a href="#" class="icon icon-mono facebook">facebook</a>
<a href="#" class="icon icon-mono twitter">twitter</a>
<div id="container">
<a href="#" class="icon icon-mono googleplus">google+</a>
<a href="#" class="icon icon-mono github">github</a>
</div>
<!-- demo js -->
<script src="js/demo/demo.js"></script>
<!-- ad -->
<script src="js/common/fusionad.js"></script>
<!-- analytics -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34160351-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
的CSS：
.demo-nav {
margin-bottom: 24px;
text-align: center;
}
.demo-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.demo-nav li {
display: inline-block;
margin: 0 2px 4px 2px;
}
.demo-nav a {
display: block;
padding: 8px 24px;
color: #28aadc;
border: solid 2px #28aadc;
}
.demo-nav a:hover,
.demo-nav li.active a {
color: #fff;
background-color: #28aadc;
}
.component {
text-align: center;
}
.component__title {
margin-bottom: 12px;
color: #fff;
font-size: 22px;
font-weight: 700;
}
.icon {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 20px;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
z-index: 1000
}
.icon-mono {
background: url("../img/icons1.png");
background-image: url("../img/icons1.svg"), none;
background-color: #595959;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.header, .navigation {
width: 100%;
float:left;
height: 80px;
}
/* facebook */
.icon-mono.facebook {
background-position: 0 0;
float: none
}
.icon-mono.facebook:hover {
background-color: #3b5998;
background-position: 0 -96px;
}
/* twitter */
.icon-mono.twitter {
background-position: -96px 0;
float: none
}
.icon-mono.twitter:hover {
background-color: #4099ff;
background-position: -96px -96px;
}
#container {
width:50px;
}
/* google plus */
.icon-mono.googleplus {
background-position: -192px 0;
float: inherit
}
.icon-mono.googleplus:hover {
background-color: #d34836;
background-position: -192px -96px;
}
/* github */
.icon-mono.github {
background-position: -288px 0;
object-position: bottom
}
.icon-mono.github:hover {
background-color: #333333;
background-position: -288px -96px;
}
请更新代码以使其更具可读性，并且如果您ca ñ创建一个片段，它会好得多。 – Dekel
请花时间格式化您的代码。我这次为你做了。但人们并不倾向于尊重不尊重读者的问题。 – clearlight
谢谢！对于那个很抱歉！ – DAN