首页网页用列表制作两行4列框架，每个框架内两行3列框架

网页用列表制作两行4列框架，每个框架内两行3列框架

时间: 2024-10-06 12:02:22 浏览: 20

为了创建一个网页上两行四列的大框架，并且每个大框架内部又有两行三列的小框架，你可以使用HTML和CSS结合浮动布局来实现。这是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; /* 使元素换行 */ } .large-box { width: calc(50% - 1rem); /* 每个大框占总宽度的一半减去一些边距 */ margin: 1rem; /* 间距 */ box-sizing: border-box; /* 包含边框和填充 */ } .small-box { width: calc(33.33% - 1rem); /* 小框占大框宽度的三分之二 */ float: left; /* 使用浮动让小框堆叠 */ } /* 如果需要添加背景颜色或其他样式，可以在这里定义 */ .large-box, .small-box { background-color: #f0f0f0; padding: 1rem; } </style> </head> <body> <div class="container"> <div class="large-box">  <div class="row"> <div class="small-box">第一层第一列</div> <div class="small-box">第一层第二列</div> <div class="small-box">第一层第三列</div> <div class="small-box">第一层第四列</div> </div> <div class="row">  <div class="small-box">第二层第一列</div> <div class="small-box">第二层第二列</div> <div class="small-box">第二层第三列</div> <div class="small-box">第二层第四列</div> </div> </div>   </div> </body> </html> ``` 在这个例子中，`.large-box`是大的框架，`.small-box`是小的框架。通过`calc`计算出大小，并设置适当的浮动规则，可以轻松创建所需的网格布局。

阅读全文