首页用栅格系统布局一个网页：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。的代码

用栅格系统布局一个网页：顶部有一个logo区域，同时跨越两栏。左栏内容，右栏导航，两栏下方还有一个footer区域。的代码

时间: 2024-09-28 08:03:39 浏览: 31

在响应式设计中，使用栅格系统布局一个包含Logo、左右两个部分以及Footer的网页，你可以使用Bootstrap或者自定义CSS Grid来实现。下面是一个基于Bootstrap 4的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>栅格系统布局</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <header class="row justify-content-between align-items-center"> <div class="col-auto col-md-6 text-center mb-3">  <img src="logo.png" alt="Logo" class="img-fluid"> </div> <nav class="col-md-3 navbar-light bg-light">  <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link active" href="#">首页</a></li> <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li> <li class="nav-item"><a class="nav-link" href="#">服务</a></li> </ul> </nav> </header> <main class="row"> <aside class="col-md-3 sidebar">  <h3>左侧内容</h3> <p>这里是左侧详细的内容...</p> </aside> <section class="col-md-9">  <h1>欢迎来到我们的网站</h1> <p>这里是主内容...</p> </section> </main> <footer class="row mt-5"> <div class="col-12 text-center small">版权信息 © 2023 网站名称</div> </footer> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </body> </html> ```

阅读全文