css布局实现一个window 8 metro风格菜单-html代码-BFW代码库

css布局实现一个window 8 metro风格菜单

代码语言：html

代码描述：css布局实现一个window 8 metro风格菜单

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
@import url(https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

* { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; }

body{
  margin:0px;
  padding:0px;
	font-family: "Open Sans", arial;
	background:#0f6d39;
	color:#fff;
	font-weight:300;
}

h1{
	font-family: "Open Sans", arial;
	font-weight:300;
	float: left;
	width: 55%;
	margin-left: 5px;
	font-size: 40px;
	margin-bottom: 40px;
}
h2{
	margin:0px;
	font-family: "Open Sans", arial;
	font-weight:300;
}
.container{
	margin:50px;
	width: 1251px;
	margin-top: -30px;
  margin-left:10px;
	-webkit-transform:scale(0.9);
}
a.wide, a.box{
	text-decoration:none;
	color:#fff;
	-webkit-transition: -webkit-transform 0.1s;
	position:relative;
	overflow:hidden;
}

a.wide h2, a.box h2{
	position:absolute;
	bottom:5px;
	font-size:14px;
}

a.wide h2.top, a.box h2.top{
	position:static;

	font-size:14px;
}
a.wide i, a.box i{
font-size: 60px;
text-align: center;
display: block;
margin-top: 10px; /* outside Codepen is actually 30px */
}
a.wide:hover, a.box:hover{
	-webkit-transform: scale(1.05);
}

a.wide:active, a.box:active{
	-webkit-transform: scale(1);
}
.wide{
	width:270px;
	height:120px;
	overflow:hidden;
	font-size:13px;
	padding:10px;
	display:block;
	float:left;
	margin:5px;
}

.box{
	width:120px;
	height:120px;
	overflow:hidden;
	font-size:13px;
	padding:10px;
	display:block;
	float:left;
	margin:5px;
}
.lime{background:#61b812;}
.orange{background:#e76022;}
.blue{background:#1E90FF;}
.redgay{background:#DA312E;}
.yellow{background:#dbb701;}
.bluefish{background:#02b9e3;}
.magenta{background:#d22a4e;}
.spacer{
	width:770px;
	margin-right: 50px;
	float:left;
}
.spacer3x{
	width:300px;
}

@-webkit-keyframes galeri
{
1% {background-position: 0px 0px;}
10%{background-position: 0px 140px;}
20%{background-position: 0px 140px;}
30%{background-position: 0px 280px;}
40%{background-position: 0px 280px;}
50%{background-position: 0px 420px;}
60%{background-position: 0px 420px;}
70%{background-position: 0px 560px;}
80%{background-position: 0px 560px;}
100% {background-position: 0px 560px;}
}

.gallery{
	background: url();
	-webkit-animation: galeri 15s infinite;
}
.right{
	float:right;
	text-align:right;
	margin-top: 30px;
}
.right p{
	margin: 5px 0px;
}
img.prof{
	float: right;
	margin: 10px;
	margin-top: 40px;
}
.i_bot{
	font-size: 30px;
	text-align: left;
	position: absolute;
	bottom: 0px;
}
.cal_i{
	margin-top: 20px;
	margin-left: 15px;
	width: 155px;
}
.cal_e h1{
	position: absolute;
	right: 0px;
	width: 115px;
	text-align: center;
	margin: 0px;
	font-size: 60px;
}
.cal_e p{
	position: absolute;
	right: 0px;
	width: 115px;
	text-align: center;
	margin-top: 75px;
	text-transform: uppercase;
}
.cal_e i{
	text-align: left;
	font-size: 25px !important;.........完整代码请登录后点击上方下载按钮下载查看