flex布局昵图网【案例】

🕗 发布于 2024-11-23 17:33 css 前端

效果展示

只是个大概，可自己完善。

昵图网

代码展示

<body>
    <!-- https://static.ntimg.cn/original/images/soso.png -->
    <div class="container">
        <div class="header">
            <!-- <div class="logo"><img src="https://static.ntimg.cn/original/images/soso.png" alt=""></div> -->
            <div class="navigation">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">设计</a></li>
                    <li><a href="#">摄影</a></li>
                    <li><a href="#">多媒体</a></li>
                    <li><a href="#">AI生画</a></li>
                </ul>
            </div>
            <div><button>登录/注册</button></div>
        </div>

        <div class="body">
            <div class="search">
                <input type="text" class="sear" placeholder="请输入标题、关键词、作品编号搜索">
                <button>搜索</button>
            </div>
            <div class="inner1">
                <div class="img-flex">
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                </div>

                <div class="type">
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                </div>
            </div>

            <div class="inner">
                <div class="img-flex">
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                    <div class="img"><img src="" alt=""></div>
                </div>

                <div class="type">
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                    <div><a href="#"></a></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="about">
                <div class="header1"><a href="#">关于昵图</a></div>
                <div class="con">
                    <div><a href="#">昵图简介</a></div>
                    <div><a href="#">网站公约</a></div>
                    <div><a href="#">版权声明</a></div>
                    <div><a href="#">网站声明</a></div>
                    <div><a href="#">汇图网</a></div>
                    <div><a href="#">联系我们</a></div>
                </div>
            </div>

            <div class="about">
                <div class="header1"><a href="#">关于昵图</a></div>
                <div class="con">
                    <div><a href="#">昵图简介</a></div>
                    <div><a href="#">网站公约</a></div>
                    <div><a href="#">版权声明</a></div>
                    <div><a href="#">网站声明</a></div>
                    <div><a href="#">汇图网</a></div>
                    <div><a href="#">联系我们</a></div>
                </div>
            </div>

            <div class="about">
                <div class="header1"><a href="#">关于昵图</a></div>
                <div class="con">
                    <div><a href="#">昵图简介</a></div>
                    <div><a href="#">网站公约</a></div>
                    <div><a href="#">版权声明</a></div>
                    <div><a href="#">网站声明</a></div>
                    <div><a href="#">汇图网</a></div>
                    <div><a href="#">联系我们</a></div>
                </div>
            </div>
        </div>
    </div>
</body>


    *{
        margin: 0;padding: 0;
    }
    /* header-start */
    .header{
        width: 100%;
        height: 75px;
        background-color: antiquewhite;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .header .navigation ul{
        display: flex;
        gap: 10px;
    }
    .header .navigation ul li{
        list-style: none;
        
    }
    .header .navigation ul li a{
        text-decoration: none;
        color: black;
        font-size: 17px;
    }
    .header button{
        width: 100px;
        height: 38px;
        border-radius: 5px;
        border-width: 0px;
        background-color: rgb(115, 136, 230);
        color: white;
        font-size: 1.1rem;
    }
    /* header-end */

    /* body-start */
   
    .body .search{
        width: 100%;
        height: 482px;
        background-color: azure;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-image: url(); */
    }
    .body .search .sear{
        width: 590px;
        height: 50px;
        outline: none;
        box-sizing: border-box;
        border-width: 0;

    }
    .body .search button{
        width: 97px;
        height: 50px;
        border-width: 0;
        background-color: rgb(213, 190, 223);
        color: white;
        font-size: 1.1rem;
        border-radius: 0 5px 5px 0;
    }
    /* https://pic.ntimg.cn/BannerPic/20241118/home/20241118151744.jpg */
    .inner{
        width: 1260px;
        height: 390px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        align-content:space-evenly ;
       
    }
    .inner .img-flex{
        width: 1260px;
        height: 200px;
        background-color: rgb(231, 224, 182);
        display: flex;
        justify-content: space-between;

    }
    .inner .img-flex .img{
        width: 290px;
        height: 200px;
        background-color: rgb(187, 236, 139);
        
    }
    .inner .type{
        display: flex;
        justify-content: space-between; /*不起作用 没搞明白。。*/
        gap: 46px;
    }
    .inner .type div{
        width: 140px;
        height: 37px;
        background-color: rgb(198, 244, 229);
    }

    .inner1{
        width: 1260px;
        height: 390px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        align-content:space-evenly ;
       
    }
    .inner1 .img-flex{
        width: 1260px;
        height: 200px;
        background-color: rgb(231, 224, 182);
        display: flex;
        justify-content: space-between;

    }
    .inner1 .img-flex .img{
        width: 290px;
        height: 200px;
        background-color: rgb(187, 236, 139);
        
    }
    .inner1 .type{
        display: flex;
        justify-content: space-between; /*不起作用*/
        gap: 46px;
    }
    .inner1 .type div{
        width: 140px;
        height: 37px;
        background-color: rgb(198, 244, 229);
    }
    /* body-end */

    /* footer-start */
    .footer{
        width: 100%;
        height: 307px;
        background-color: rgb(173, 156, 189);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    .footer .con{
        text-align: left;
        width: 300px;
        height: 100px;
        display: grid;
        grid-template-rows: repeat(2,32px);
        grid-template-columns: repeat(3,100px);
        align-items: center;
        align-content: center;
    }
    .footer .about a{
        text-decoration: none;
        color: rgb(234, 228, 228);
    }
    .footer .about .header1{
        font-weight: bold;
    }
   
    
    /* footer-end */

知识小天地

Flex布局

当然，下面是Flexbox布局中容器和项目的主要属性列表，以及它们的简要说明：
CSS知识点：弹性Flex布局_flex嵌套-CSDN博客

容器属性

display

flex：将容器设置为Flex布局模式。

flex-direction

row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

nowrap：不换行，所有项目在一行显示。
wrap：需要时项目可以换行。
wrap-reverse：需要时项目可以反向换行。

justify-content 多行交叉轴在主轴上的对齐方式

flex-start：项目在主轴起点对齐。
flex-end：项目在主轴终点对齐。
center：项目在主轴中心对齐。
space-between：项目在主轴上均匀分布，两端对齐。
space-around：项目在主轴上均匀分布，两端留有空间。
space-evenly：项目在主轴上完全均匀分布。

align-items

flex-start：项目在交叉轴起点对齐。
flex-end：项目在交叉轴终点对齐。
center：项目在交叉轴中心对齐。
baseline：项目在交叉轴基线对齐。
stretch：项目在交叉轴上拉伸以填满容器。

align-content：多行主轴在交叉轴上的对其方式

flex-start：多行时，行在交叉轴起点对齐。
flex-end：多行时，行在交叉轴终点对齐。
center：多行时，行在交叉轴中心对齐。
space-between：多行时，行在交叉轴上均匀分布，两端对齐。
space-around：多行时，行在交叉轴上均匀分布，两端留有空间。
stretch：多行时，行在交叉轴上拉伸以填满容器。

注意：指定为 wrap 时，应该把每一行看做成一个新的flex容器，并且每一行都有自己的主轴和交叉轴。

原文地址：https://blog.csdn.net/m0_74897683/article/details/143983880

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Java 基于SpringBoot+vue框架的老年医疗保健网站
下一篇：科研深度学习：如何精选GPU以优化服务器性能

Windows电脑本地部署llamafile并接入Qwen大语言模型远程AI对话实战
Windows电脑本地部署llamafile并接入Qwen大语言模型远程AI对话实战
阅读更多2024-11-23
解决vm虚拟机中ctrl键粘滞问题（一直处于按下状态）
虚拟机中点击鼠标左键没有问题，单独按下键盘也没有问题，但是如果按下键盘的同时在按下鼠标左键就会卡住。而且100%稳定复现。发现问题原因：vm版本的问题，我的版本是17.5.0，升级成17.5.2 bu
阅读更多2024-11-23
第十章 JavaScript的应用
10.1.1 JavaScript简介1 简单性JavaScript 设计之初就考虑到了非专业程序员的使用，因此它的语法相对简单，容易上手。2 动态性JavaScript 是一种解释型语言，代码可以在
阅读更多2024-11-23
非root用户安装CUDA
4.下载完成后执行.run文件，需要添加两个参数，一个是--override，用于跳过某些检查或限制；另一个是--toolkitpath，它表示安装路径，必须是自己目录下面的路径，如果是根目录就会安装
阅读更多2024-11-23
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）
【代码】## Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）
阅读更多2024-11-23
【通俗理解】Jensen不等式与变分分布q(z)在积分计算中的应用
Jensen不等式 #变分分布 #积分计算 #期望 #凸函数 #优化问题 #下界估计 #机器学习。
阅读更多2024-11-23
「Mac玩转仓颉内测版27」基础篇7 - 字符串类型详解
本篇将介绍 Cangjie 中的字符串类型，包括字符串的定义、字面量形式、插值表达、常用操作及应用场景，帮助开发者熟练掌握字符串的使用。
阅读更多2024-11-23
数据科学与SQL：组距分组分析 | 区间分布问题
绝对值分布分析也可以理解为组距分组分析。对于某个指标而言，一个记录对应的指标值的绝对值，肯定落在所有指标值的绝对值的最小值和最大值构成的区间内，根据一定的算法，在把这个区间划分为等距离的几个小区间，，
阅读更多2024-11-23
c++编译报C1004错误的原因及解决办法
可能是你的代码文件最后没有正确的结束符，或者是缺少了一些必要的头文件或语句。默认磁盘驱动器没有足够的空间用于临时文件，需要大约两倍于源文件的空间。编译器到达了源文件尾但未解析构造。计算结果为假的 #i
阅读更多2024-11-23
mysql 去重补全取出重复变量函数和存储过程
mysql 去重补全取出重复变量函数和存储过程
阅读更多2024-11-23

flex布局 昵图网【案例】