各大网站页尾----不断更新中

原创
2015/01/18 23:44
阅读数 1K

1.imooc

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>footer</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		a{
			text-decoration: none;
		}

		ul {
			list-style: none;
		}
		div{
			display: block;
		}
		#footer {
			background: #000000;
			border-top: 1px solid #e2e4e6;
			font-size: 12px;
			color: #787d82;
			padding: 40px 0;
			min-width: 1200px;
		}
		.footer-wrap {
			width: 1200px;
			height: 40px;
			margin: 0 auto;
		}
		#footer .footer-intro, #footer .footer-link, #footer .others {
			float: left;
			height: 40px;
		}
		.footer-logo {
			float: left;
			background: url(http://static.mukewang.com/static/img/common/footer-sprite.png) 0 -230px no-repeat;
			height: 40px;
			width: 120px;
			margin: 0 20px;
		}
		#footer p {
			margin-left: 180px;
			line-height: 1.7;
		}

		#footer .footer-intro {
			border-right: 1px solid #363c41;
			width: 639px;
		}
		#footer .footer-link {
			padding: 0 30px;
			width: 320px;
			border-right: 1px solid #363c41;
			line-height: 1.8;
		}
		.footer-link ul {
			overflow: hidden;
			margin-top: -1px;
		}
		#footer .footer-link li {
			width: 80px;
			text-align: center;
			float: left;
		}
		.footer-link a:link, .footer-link a:visited, .footer-link a:active {
			color: #787d82;
		}
		.footer-link a:hover{
			color: #FFFFFF;
		}
		#footer .others {
			padding-left: 30px;
		}
		.others a {
			float: left;
			position: relative;
			width: 32px;
			height: 32px;
			background-image: url(http://static.mukewang.com/static/img/common/footer-sprite.png);
			background-repeat: no-repeat;
			margin: 3px 6px 0;
			opacity: 0.5;
			filter: alpha(opacity=50);
			-webkit-transition: opacity 0.2s;
			-moz-transition: opacity 0.2s;
			transition: opacity 0.2s;
		}
		#others-box-1 {
			position: absolute;
			display: none;
			width: 170px;
			height: 220px;
			left: -69px;
			bottom: 35px;
			background: url(http://static.mukewang.com/static/img/common/footer-sprite.png) no-repeat 0 0;
		}


	</style>
	<script type="text/javascript">
		function mOn(){
			document.getElementById('others-box-1').style.display="block";
		}
		function mOut(){
			document.getElementById('others-box-1').style.display="none";
		}



	</script>
</head>
<body>
	<div id="footer">
		<div class="footer-wrap">
			<div class="footer-intro">
				<div class="footer-logo"></div>
				<p>我们的使命:传播互联网最前沿技术,帮助更多的人实现梦想!</p>
				<p>
					Copyright © 2014 imooc.com All Rights Reserved | 京ICP备 13046642号-2
				</p>

			</div>
			<div class="footer-link">
				<ul>
					<li>
						<a href="">网站首页</a>
					</li>
					<li>
						<a href="">联系我们</a>
					</li>
					<li>
						<a href="">关于我们</a>
					</li>
					<li>
						<a href="">意见反馈</a>
					</li>
					<li>
						<a href="">友情链接</a>
					</li>
					<li>
						<a href="">人才招聘</a>
					</li>
					<li>
						<a href="">最新动态</a>
					</li>
					<li>
						<a href="">最新动态</a>
					</li>
				</ul>

			</div>
			<div class="others">
				<a class="others-1" id="others-1" href="javascript:;" target="_blank" title="微信" onmouseover ="mOn()" onmouseout ="mOut()">
					<div id="others-box-1"></div>
				</a>
				
				<a class="others-1" id="others-1" href="javascript:;" target="_blank" title="微信" onmouseover ="mOn()" onmouseout ="mOut()">
					<div id="others-box-1"></div>
				</a>
				
				<a class="others-1" id="others-1" href="javascript:;" target="_blank" title="微信" onmouseover ="mOn()" onmouseout ="mOut()">
					<div id="others-box-1"></div>
				</a>
				


			</div>
		</div>
	</div>

</body>
</html>



展开阅读全文
打赏
0
7 收藏
分享
加载中
更多评论
打赏
0 评论
7 收藏
0
分享
返回顶部
顶部