美团demo2_w3cschool

<!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>