首页写一个以栅格系统布局，设计电台学习首页案例

写一个以栅格系统布局，设计电台学习首页案例

时间: 2024-11-06 14:36:16 浏览: 43

电台学习首页的设计通常会采用响应式栅格系统（如Bootstrap Grid），以适应不同屏幕尺寸的设备。下面是一个简单的例子： 1. **基础设置**：使用HTML5的`<div>`标签构建页面结构，引入Bootstrap CSS和JavaScript库。 ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg bg-light">  </nav> <main class="container-fluid">  </main> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> </body> </html> ``` 2. **栅格布局**： - 定义一个大容器`<main>`, 设置宽度为100%的流动栅格系统。 - 用于展示主要内容的部分（如课程列表、热门内容）可以使用`<div class="row">`分隔成列。例如，每个课程卡片可以是一个`<div class="col-md-4">`，表示每行显示四个小格子在中等屏幕（大于768px）上。 ```html <main class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="card">  </div> </div>  </div> </main> ``` 3. **响应式调整**： Bootstrap提供了媒体查询（Media Queries）来根据不同屏幕尺寸调整布局。比如，你可以将小屏幕设备（小于768px）下的布局改为两列或者一列。 ```css @media (max-width: 767px) { .col-md-4 { width: 100%; } } ```

阅读全文