美团demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
{
margin: 0;padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
header{
height: 14.44vw;
width: 100%;
background-color: #05c0ab;
display: flex;
justify-content: space-around;
align-items: center;
}
header div{
display: flex;
justify-content: center;
align-items: center;
}
header div:first-of-type span{
font-size: 3.98vw;
color: #fff;
}
header div em{
font-size: 1.76vw;
color: #fff;
}
header div:last-of-type em{
font-size: 5.83vw;
color: #fff;
}
header input{
background: url(img/search.jpg) no-repeat left;
background-position-x: 4vw;
border-style: none;
height: 8.52vw;
width: 57.96vw;
background-color: #fff;
text-align: center;
border-radius: 8vw;
color: #9a9a9a;
font-size: 3.4vw;
}
section{
height: 51.85vw;
width: 100%;
/background: yellow;*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
border-bottom: 1px solid #eeeeee;
}
section div{
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section div em{
width: 11.10vw;
height: 11.10vw;
border-radius:5.55vw;
text-align: center;
line-height: 11.10vw;
font-size: 5.56vw!important;
color: #fff;
}
section div span{
font-size: 3.15vw;
color: #333333;
margin-top: 3vw;
}
play{
height: 15.93vw;
/*background-color: yellow;*/
}
#play img{
display: block;
float: left;
width: 19.35vw;
height: 15.92vw;
border-right: 1px solid #eeeeee;
}
#play .le{
height: 15.92vw;
float: left;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.le p{
margin-left: 3vw;
font-size: 3.33vw;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
}
main{
flex: 1;
display: flex;
border-bottom: 2.31vw solid #ccc;
border-top: 2.31vw solid #ccc;
overflow: auto;
flex-wrap: wrap;
align-content: flex-start;
}
main div{
height: 34.8vw;
width: 33%;
/*background-color: yellow;*/
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-bottom: 0.2vw solid #e5e5e5;
border-right: 0.2vw solid #e5e5e5;
}
main div:nth-of-type(3n){
border-right: none;
}
main div h3{
font-size: 4.44vw;
color: #343434;
}
main div h6{
font-size: 2.78vw;
color: #d3af51;
}
main div img{
width: 16.02vw;
height: 16.02vw;
background-color: red;
}
footer{
height: 14.63vw;
/*background-color: yellow;*/
display: flex;
justify-content: space-around;
align-items: center;
}
footer div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer div em{
font-size: 6.12vw!important;
color: #ababab;
}
footer div span{
font-size: 3.15vw;
color: #626262;
}
</style>
<!--
1080
-->
<link rel="stylesheet" href="font_meituan/iconfont.css" />
<link rel="stylesheet" href="css/iconfont2.css" />
</head>
<body>
<header>
<div>
<span>成都</span>
<em class="iconfont icon-zititubiao2xiajiao"></em>
</div>
<input type="text" placeholder="搜索商家，品类或商圈"/>
</label>
<em style="font-size: 5.83vw;
color: #fff;" class="iconfont icon-iconfontyunyingpingtai01"></em>
<em style="font-size: 5.83vw;
color: #fff;" class="iconfont icon-xiaoxi"></em>
</header>
<section>
<div>
<em style="background-color: #fe970e;" class="iconfont icon-meishi"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #f4413c;" class="iconfont icon-dianying"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #7d4ce4;" class="iconfont icon-jiudian"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #fcbb01;" class="iconfont icon-xiuxianyule"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #fe970e;" class="iconfont icon-icon-yxj-takeout"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #4c93ed;" class="iconfont icon-iconfontfeiji1"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #feba00;" class="iconfont icon-ktv"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #08b8f3;" class="iconfont icon-zhoubianyou"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #f63e86;" class="iconfont icon-liren"></em>
<span>美食</span>
</div>
<div>
<em style="background-color: #14d896;" class="iconfont icon-travel"></em>
<span>美食</span>
</div>
</section>
<div id="play">
<img src="img/meituan.jpg" alt="" />
<div class="le">
<p> 柬埔寨密云系列，原始丛林的诱惑，你还在等啥子么</p>
<p> 柬埔寨密云系列，原始丛林的诱惑，你还在等啥子么</p>
</div>
</div>
<main>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
<div>
<h3>冯导大片</h3>
<h6>我不是金莲</h6>
<img src="img/meituan.jpg" alt="" />
</div>
</main>
<footer>
<div>
<em class="iconfont icon-shouyeshouye"style="color: #06c0a9;"></em>
<span style="color: #06c0a9;">首页</span>
</div>
<div>
<em class="iconfont icon-fujin"></em>
<span>附近</span>
</div>
<div>
<em class="iconfont icon-wo"></em>
<span>我的</span>
</div>
</footer>
</body></html> //icon 阿里字体导入的样式。