美团demo

2018-06-11 14:13 更新

<!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 阿里字体导入的样式。

以上内容是否对您有帮助:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号