一个简单的餐饮APP主页面(HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<title>福生一品鲜</title>
<style>
/*iphone6*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
html{
font-size: 30.1932px;
}
}
/*iphone6+*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
html{
font-size: 33.3333px;
}
}
/*Galaxy S5*/
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation: portrait) {
html{
font-size: 28.9855px;
}
}
/*iphone5*/
@media only screen and (min-device-width: 320px) and (max-device-width:568px) and (orientation: portrait) {
html{
font-size: 25.7649px;
}
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<i class="logo"></i>
<a href="#">
<div class="sch">
<p><img src="images/icon/sch.png">搜索汤粉类</p>
</div>
</a>
</header>
<div id="_contain">
<div class="banner">
<img src="images/index/first.png">
<img src="imges/icon">
<div class="logo-dbs">
<div class="dbs-img">
<img src="images/icon/logo.png">
</div>
<p>汤粉世家 一品鲜出品 必是精品!</p>
</div>
</div>
<div class="menu">
<div class="nav">
<a><img src="images/menu/nav_1.png"></a> <li><a href="#tabs-1">性价比</a></li>
<p>单品</p>
</div>
<div class="nav">
<img src="images/menu/nav_2.png">
<p>爆品</p>
</div>
<div class="nav">
<img src="images/menu/nav_3.png">
<p>套餐</p>
</div>
<div class="nav">
<img src="images/menu/nav_4.png">
<p>节假日优惠</p>
</div>
</div>
<div class="name">
<p>大众爆品</p>
</div>
<div class="favorable">
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/6.png">
<p class="fb-name">单品(6元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>6元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/7.png">
<p class="fb-name">单品(7元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>7元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/8.png">
<p class="fb-name">单品(8元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>8元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/10.png">
<p class="fb-name">单品(10元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>10元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/11.png">
<p class="fb-name">单品(11元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>11元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/12.png">
<p class="fb-name">单品(12元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>12元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/13.png">
<p class="fb-name">单品(13元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>13元</big>起</span>
</p>
</div>
</div>
<div class="fb">
<div class="fb-lt">
<img src="images/scenics/15.png">
<p class="fb-name">单品(15元)</p>
<p class="price">
<span class="discount">节假日9.5折</span>
<span class="num"><big>15元</big>起</span>
</p>
</div>
</div>
</div>
<div class="more">
<p>查看更多、优惠多多<img src="images/icon/arr-right.png"></p>
</div
</div>
<footer>
<div class="foot act">
<img src="images/foot/ft_1_1.png">
<p>推荐</p>
</div>
<div class="foot">
<img src="images/foot/ft_2.png">
<p>下单</p>
</div>
<div class="foot">
<img src="images/foot/ft_3.png">
<p>支付</p>
</div>
<div class="foot">
<img src="images/foot/ft_4.png">
<p>我的</p>
</div>
</footer>
<script type="text/javascript" src="js/Adaptive.js" ></script>
</body>
</html>