flex布局昵图网【案例】

效果展示

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

昵图网

代码展示

<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 */