美团demo2
<!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: #f9f9f9; display: flex; justify-content: space-around; align-items: center; border-bottom: 0.1vw solid #b1b1b1; }
header div span{
display: block;
font-size: 3.7vw;
width: 28vw;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
header input{
/*background: url(img/search.jpg) no-repeat left;
background-position-x: 14vw;*/
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.2vw;
}
nav{
height: 12.2vw;
/*background-color: yellow;*/
display: flex;
justify-content: space-around;
align-items :center;
flex-wrap: wrap;
align-content: flex-start;
position: relative;
}
nav a{
font-size: 3.7vw;
color: #646464;
text-decoration: none;
}
section{
height: 24vw;
background-color: #f0f1f3;
border-bottom: 0.2vw solid #d7d7d7 ;
display: flex;
justify-content: space-around;
align-items:center;
flex-wrap: wrap;
/*align-content: flex-start;*/
}
section div{
width: 21.57vw;
height:8.33vw ;
background-color: #fff;
border-radius: 4vw;
border: 0.2vw solid #e1e1e1;
display: flex;
justify-content: center;
align-items: center;
}
section div span {
font-size: 3.24vw;
color: #9b9b9b;
}
footer{
height: 14.63vw;
/*background-color: yellow;*/
display: flex;
justify-content: space-around;
align-items: center;
}
main{
flex: 1;
overflow: auto;
background-color: #ccc;
}
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;
}
.con{
height: 51.30vw;
width: 100%;
display: flex;
justify-content: flex-start;
border-top: 0.28vw solid #d7d7d7;
border-bottom: 0.28vw solid #d7d7d7;
background-color: #fff;
margin-bottom: 4vw;
}
.rir{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.rir p{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.img{
display: flex;
justify-content: center;
align-items: center;
margin-right: 8vw;
margin-left: 8vw;
}
.img img{
height: 27.22vw;
}
</style>
<!--
1080
-->
<link rel="stylesheet" href="font_meituan/iconfont.css" />
<link rel="stylesheet" href="css/iconfont2.css" />
<link rel="stylesheet" href="font_obsbcsm4e5pl23xr/iconfont.css" />
</head>
<body>
<header>
<div>
<span>成都旅游学习网站公略</span>
</div>
<input type="text" placeholder="搜索商家，品类或商圈"/>
</header>
<nav>
<a href="">享美食</a>
<a href="">住酒店</a>
<a href="">爱玩了</a>
<a href="">全部</a>
<span style="position: absolute;left: 0;bottom: 0; width: 25.09vw;height: 0.56vw;background-color: #fb556b;"></span>
</nav>
<section>
<div style="background-color: #fe566d;">
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
<div>
<span>热门</span>
</div>
</section>
<main>
<div class="con">
<div class="img">
<img src="img/canting.jpg" alt="" />
</div>
<div class="rir">
<h2 style="font-size: 4.15vw;color: #282e3e;">重庆红板凳火锅
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;" class="iconfont icon-quan"></em>
</h2>
<h4 style="font-size: 3.33vw;color: #646464;font-weight: 100;">
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
￥73/人
</h4>
<p style="font-size:3.33vw ;color: #666666;"> <span>火锅|青羊宫</span> <span style="display: block; border-radius: 0.5vw; width: 10.56vw;height: 5vw;background-color: #9e9e9e;font-size: 2.6vw;text-align: center;line-height: 5vw;">123m</span></p>
<h4 style="font-size:3.33vw ;color: #323232;font-weight: 200;text-indent: 2em;">4555消费</h4>
<hr />
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-tuan"></em>
3-4人餐168元</h5>
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-quan"></em>
40代50元，88人餐共用168元</h5>
</div>
</div>
<div class="con">
<div class="img">
<img src="img/canting.jpg" alt="" />
</div>
<div class="rir">
<h2 style="font-size: 4.15vw;color: #282e3e;">重庆红板凳火锅
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;" class="iconfont icon-quan"></em>
</h2>
<h4 style="font-size: 3.33vw;color: #646464;font-weight: 100;">
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
￥73/人
</h4>
<p style="font-size:3.33vw ;color: #666666;"> <span>火锅|青羊宫</span> <span style="display: block; border-radius: 0.5vw; width: 10.56vw;height: 5vw;background-color: #9e9e9e;font-size: 2.6vw;text-align: center;line-height: 5vw;">123m</span></p>
<h4 style="font-size:3.33vw ;color: #323232;font-weight: 200;text-indent: 2em;">4555消费</h4>
<hr />
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-tuan"></em>
3-4人餐168元</h5>
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-quan"></em>
40代50元，88人餐共用168元</h5>
</div>
</div>
<div class="con">
<div class="img">
<img src="img/canting.jpg" alt="" />
</div>
<div class="rir">
<h2 style="font-size: 4.15vw;color: #282e3e;">重庆红板凳火锅
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;" class="iconfont icon-quan"></em>
</h2>
<h4 style="font-size: 3.33vw;color: #646464;font-weight: 100;">
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
<em style="font-size: 3.33vw;color: #f39730; "class="iconfont icon-pingfenwujiaoxing">
</em>
￥73/人
</h4>
<p style="font-size:3.33vw ;color: #666666;"> <span>火锅|青羊宫</span> <span style="display: block; border-radius: 0.5vw; width: 10.56vw;height: 5vw;background-color: #9e9e9e;font-size: 2.6vw;text-align: center;line-height: 5vw;">123m</span></p>
<h4 style="font-size:3.33vw ;color: #323232;font-weight: 200;text-indent: 2em;">4555消费</h4>
<hr />
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-tuan"></em>
3-4人餐168元</h5>
<h5 style="font-size:3.33vw ;color: #666666;">
<em style="font-size: 4.25vw;color: #fd9301;background-color: #fff;"class="iconfont icon-quan"></em>
40代50元，88人餐共用168元</h5>
</div>
</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>