首页网格布局-百度热词html

网格布局-百度热词html

时间: 2023-10-21 19:35:36 浏览: 86

以下是使用网格布局实现的百度热词HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度热词</title> <style> body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 10px; padding: 20px; } .item { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; border: 1px solid #ccc; border-radius: 5px; } .item:nth-child(1) { grid-row: 1/3; grid-column: 1/3; } .item:nth-child(2) { grid-row: 1/3; grid-column: 3/5; } .item:nth-child(3) { grid-row: 3/5; grid-column: 1/3; } .item:nth-child(4) { grid-row: 3/5; grid-column: 3/5; } .item:nth-child(5) { grid-row: 5/7; grid-column: 1/2; } .item:nth-child(6) { grid-row: 5/7; grid-column: 2/3; } .item:nth-child(7) { grid-row: 5/7; grid-column: 3/4; } .item:nth-child(8) { grid-row: 5/7; grid-column: 4/5; } </style> </head> <body> <div class="container"> <div class="item">热搜榜</div> <div class="item">新冠疫苗</div> <div class="item">英伟达</div> <div class="item">腾讯游戏</div> <div class="item">迪丽热巴</div> <div class="item">周杰伦</div> <div class="item">阿里巴巴</div> <div class="item">谷歌</div>  </div> </body> </html> ``` 以上代码使用了网格布局（Grid Layout），通过设置 `grid-template-columns` 和 `grid-template-rows` 属性定义了网格的行列数。每个热词块（`.item`）使用了 `flex` 布局，居中显示文字内容，并通过 `border` 和 `border-radius` 属性设置了边框和圆角。通过设置每个热词块的 `grid-row` 和 `grid-column` 属性，实现了热词块的布局。

阅读全文