网格布局、九宫格布局

最新推荐文章于 2025-06-09 09:42:40 发布

佳小凡

最新推荐文章于 2025-06-09 09:42:40 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layout

本文链接：https://blog.csdn.net/weixin_42750760/article/details/81171939

本文介绍了如何使用CSS实现网格布局和九宫格布局。通过表格和`<ul>`、`<li>`元素的结合，展示了如何在鼠标悬停时实现选中效果，探讨了边框处理的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写三栏布局竟然忘了网格，把它加上，以及实现九宫格布局

网格布局

<section class="grid">
       <article class="left-content-right">
           <div class="left">left</div>
           <div class="content">网格布局</div>
           <div class="right">right</div>
       </article>
</section>

.grid .left-content-right{min-width:500px;display: grid;width: 100%;
            		grid-template-rows: 100px;
            		grid-template-columns: 200px auto 200px;}
.left {background-color: red;}
.content {background-color: yellow;}
.right {background-color: blue;}

九宫格布局

使用table实现九宫格