一个简单的windows 8主题布局。
HTML
<div>
<div class="block01 pink"><span class="entypo-camera"></span></div>
<div class="block02 orange"><b><span class="entypo-video"></span></b></div>
<div class="wrap">
<div class="block03 green"><span class="entypo-facebook fa"></span></div>
<div class="block03 orange"><span class="entypo-twitter"></span></div>
<div class="block03 pink"><span class="entypo-soundcloud"></span></div>
<div class="block03 green"><span class="entypo-basket"></span></div>
</div>
<div class="block01 pink"><span class="entypo-mail"></span></div>
<div class="block02 green"></div>
<div class="block01 pink"></div>
<div class="quotebox orange"><p>"put a quote here"</p></div>
</div>
<div style="visibility:hidden;"><img src="http://i60.tinypic.com/2ij6ypg.jpg"></div>
CSS
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
body {
background-color:#B24444;
}
div {
width:1000px;
margin:auto;
}
.block01 {
width:200px;
height:200px;
margin:0px;
color:#b24444;
float:left;
font-size:100px;
text-align:center;
line-height:200px;
}
.block01.pink {background:#BABABA;}
.block01.green {background:#949494;}
.block01.orange {background:#545454;}
.block02 {
width:400px;
height:200px;
margin:0px;
color:#b24444;
float:left;
font-size:120px;
text-align:center;
line-height:200px;
}
.block02.pink {background:#BABABA;}
.block02.green {background:#949494;}
.block02.orange {background:#545454;}
.block03 {
width:100px;
height:100px;
margin:0px;
color:#b24444;
float:left;
font-size:50px;
text-align:center;
line-height:100px;
}
.block03.pink {background:#BABABA;}
.block03.green {background:#949494;}
.block03.orange {background:#545454;}
.wrap {
float: left;
height: 200px;
width: 200px;
}
.quotebox {
width:400px;
height:200px;
margin:0px;
color:#b24444;
float:left;
font-size:40px;
text-align:center;
display:table-cell;
vertical-align:middle;
font-family: 'Over the Rainbow', cursive;
}
.quotebox.pink {background:#BABABA;}
.quotebox.green {background:#949494;}
.quotebox.orange {background:#545454;}
.block01:hover {
color:#616161;
}
.block02:hover {
color:#616161;
}
.block03:hover {
color:#616161;
}