Css查漏补缺16-弹性盒子小实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子(flex)实例</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> .icon_nav{ max-width: 960px; margin: 30px auto; } .flex_box{ display: flex; justify-content: space-around; } .flex_box .item .item_a{ display: inline-block; width: 61px; height: 68px; text-align: center; text-decoration: none; } .flex_box .item .item_a img{ width: 61px; } </style> </head> <body> <div class="icon_nav"> <div class="flex_box"> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗聚</span> </a> </div> </div> <div class="flex_box"> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i1.jpg" alt=""> <span>天狗</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i2.jpg" alt=""> <span>天狗聚</span> </a> </div> <div class="item"> <a class="item_a" href=""> <img src="../Css3学习\i2.jpg" alt=""> <span>天狗聚</span> </a> </div> </div> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步