css仿手机美团外卖首页

CSS是前端开发中必须掌握的一项技能。今天，我们来模仿一下手机美团外卖首页的样式，看看CSS如何实现。

//HTML结构body>
        div id="header">
    .../div>
        div id="advertisement">
    .../div>
        div id="banner">
    .../div>
        div id="iconList">
    .../div>
        div id="shopList">
    .../div>
    /body>
//CSS样式* {
        padding: 0;
        margin: 0;
}
#header {
        height: 2.4rem;
        background-color: #FFF;
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        padding: 0.2rem 0.3rem;
}
#advertisement img {
        width: 100%;
}
#banner img {
        width: 100%;
}
#iconList {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.4rem 0;
        background-color: #FFF;
}
#iconList img {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.3rem;
}
#shopList {
        background-color: #FFF;
        padding: 0.5rem;
}
#shopList .shop {
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #E5E5E5;
}
#shopList .shop img {
        width: 3rem;
}
#shopList .shop .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 2.6rem;
        margin-left: 1rem;
}
#shopList .shop .info .name {
        font-size: 0.9rem;
        color: #333;
}
#shopList .shop .info .rate {
        font-size: 0.7rem;
        color: #999;
}
#shopList .shop .info .delivery {
        font-size: 0.7rem;
        color: #999;
}
#shopList .shop .info .distance {
        font-size: 0.7rem;
        color: #999;
}
     

以上代码实现了手机美团外卖首页的基本样式，其中包括了header、advertisement、banner、iconList以及shopList等区块的样式。我们可以尝试自己编写代码，与手机美团外卖首页进行对比和分析，加深对CSS的理解和运用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！