flex简单Demo

最新推荐文章于 2023-09-07 11:45:16 发布

月下ctrlc

最新推荐文章于 2023-09-07 11:45:16 发布

阅读量265

点赞数

分类专栏：前端文章标签： html css less flex css3

本文链接：https://blog.csdn.net/qq_44625142/article/details/109561079

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

flex

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.font.im/css?family=Roboto" rel="stylesheet">
    <title>美食美客</title>
</head>

<body>
    <div class="content">
        <div class="app-header">
            <div class="container">
                <img src="img/logo.png" alt="">
                <p>美食美客</p>
                <input type="text" name="" id="" placeholder="搜索...">
            </div>
        </div>
        <div class="subheader">
            <div>
                <p>配送信息</p>
                <p>外卖小哥正向呢飞奔而来，点击查看具体信息...<i class="fa fa-arrow-right"></i></p>
                </p>
            </div>
            <img src="img/delivery.png" alt="">
        </div>
        <div class="grid">
            <div class="item">
                <h4>火锅</h4>
                <p>没有什么是一顿火锅解决不了的...</p>
                <img src="img/hot-pot.png" alt="">
            </div>
            <div class="item">
                <h4>烧烤</h4>
                <p>在天愿作比翼鸟，在地就要吃烧烤...</p>
                <img src="img/barbecue.png" alt="">
            </div>
            <div class="item">
                <h4>海鲜</h4>
                <p>甄选全球生鲜，尽享美食盛宴...</p>
                <img src="img/seafood.png" alt="">
            </div>
            <div class="item">
                <h4>快餐</h4>
                <p>健康美味，无需等待...</p>
                <img src="img/fast-food.png" alt="">
            </div>
            <div class="item">
                <h4>下午茶</h4>
                <p>我有下午茶，你有时间吗...</p>
                <img src="img/afternoon-tea.png" alt="">
            </div>
            <div class="item">
                <h4>西餐</h4>
                <p>感受西餐文化，体验异域风情...</p>
                <img src="img/western-food.png" alt="">
            </div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><i class="fa fa-heart"></i>收藏</li>
            <li><i class="fa fa-cart-arrow-down"></i>订单</li>
            <li><i class="fa fa-user"></i>我的</li>
            <li><i class="fa fa-map-marker"></i>附近</li>
        </ul>
    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

.app-header {
    background-color: #cc0000;
}

.container {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container img {
    width: 40px;
}

.container input {
    width: 300px;
    height: 30px;
    margin-bottom: 5px;
}

.subheader {
    width: 90%;
    margin: 0 auto 15px auto;
    padding: 15px;
    background-color: #7c0000;
    color: white;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subheader img {
    width: 40px;
}

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 15px;
}

.grid img {
    width: 30px;
}

.grid .item {
    margin: 0 5px 5px 0;
    padding: 15px;
    width: 45%;
    height: 150px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #ccc;
    display: flex;
    flex-direction: column;
}

.item h4 {
    font-weight: bold;
}

.item p {
    color: #7c0000;
    font-weight: bold;
    font-size: 14px;
}

.item img {
    margin-top: 20px;
    align-self: flex-end;
}

.footer ul li {
    list-style: none;
    float: left;
    width: 25%;
    padding: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.footer ul li i {
    font-size: 16px;
}

@media(min-width:768px) {
    .grid .item {
        margin: 0 5px 5px 0;
        padding: 15px;
        width: 30%;
        height: 150px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 3px #ccc;
        display: flex;
        flex-direction: column;
    }
}

图片
在这里插入图片描述

这张图片是白色的

这张也是

在这里插入图片描述

效果
在这里插入图片描述

月下ctrlc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex简单Demo

flexindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link hre
复制链接

扫一扫