<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.aa{
width: 300px;
height: 50px;
background-color: #4FC0E8;
text-align: center;
padding-top:25px;
font-family:;
}
.bb{
width: 300px;
height: 200px;
background-color: #4FC0E8;
text-align: center;
padding-top:25px;
font-family: Arial;
}
.cc{
width: 300px;
height: 50px;
background-color:#3BAEDA;
text-align: center;
padding-top:25px;
font-family: Arial;
}
.dd{
width: 300px;
height:300px;
background-color: #4FC0E8;
text-align: center;
padding-bottom: -25px;
font-family: Arial;
}
.ee{
text-align: center;
width: 100px;
height:50px;
background-color: #3BAEDA;
text-align: center;
padding-bottom: -25px;
font-family: Arial;
}
.ff{
width: 150px;
height: 50px;
background-color: #3BAEDA;
color: #fff;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="aa" style="color:#fff;">LOAD MORE</div><br/>
<div class="bb" style="color:#fff;" ><span img src="2.jpg"><img src="2.jpg" width="270" height="129">LOREM IPSUM DOLOR</span><p>dasdassdcdsfsddsfrscrf</p></div><br/>
<div class="cc" style="color:#fff;"img src="2.jpg">WEDNESDAY</div>
<div class="dd" style="color:#fff; font-size:90px;" >26</div>
<div class="ee" style="color:#fff;"><input class="ff" type="button" value="ADD EVENT" style="position: relative;bottom: 150px;border:0；text-align: center;"></div>
</body>
</html>
原文：http://www.cnblogs.com/HuanG-zd/p/4014694.html