身体部分中各内容的常见布局

最新推荐文章于 2024-09-10 09:55:59 发布

Captain-B

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量164

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2401_85293115/article/details/141211216

版权

在HTML的身体部分（<body>），常见的布局包括页眉（<header>）、导航（<nav>）、主要内容（<main>）、侧边栏（<aside>）、页脚（<footer>）等。以下是一些典型的布局示例：

1. 页眉（Header）

页眉通常位于页面顶部，包含网站的logo、标题和导航菜单。

示例代码：

复制

<header class="site-header">
  <div class="logo">
    <!-- 网站logo -->
  </div>
  <nav class="main-nav">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</header>

2. 导航（Nav）

导航通常是页眉的一部分，但也可以独立存在，提供到网站不同部分的链接。

示例代码：

复制

<nav class="main-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

3. 主要内容（Main）

主要内容是页面的核心部分，通常包括文章、博客帖子、产品描述等。

示例代码：

复制

<main class="site-main">
  <article class="post">
    <header class="post-header">
      <h2>文章标题</h2>
    </header>
    <section class="post-content">
      <!-- 文章内容 -->
    </section>
    <footer class="post-footer">
      <!-- 文章脚注 -->
    </footer>
  </article>
</main>

4. 侧边栏（Aside）

侧边栏通常位于主要内容旁边，提供额外的信息或导航。

示例代码：

复制

<aside class="sidebar">
  <section class="widget">
    <h3>最新文章</h3>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
    </ul>
  </section>
  <section class="widget">
    <h3>分类</h3>
    <ul>
      <li><a href="#">分类1</a></li>
      <li><a href="#">分类2</a></li>
    </ul>
  </section>
</aside>

5. 页脚（Footer）

页脚位于页面底部，通常包含版权信息、联系方式和链接到网站其他部分的导航。

示例代码：

复制

<footer class="site-footer">
  <div class="footer-widgets">
    <section class="widget">
      <h3>关于我们</h3>
      <p>这里是关于我们的一些信息。</p>
    </section>
    <section class="widget">
      <h3>联系我们</h3>
      <p>邮箱：example@example.com</p>
    </section>
  </div>
  <div class="copyright">
    <p>版权所有 &copy; 2023</p>
  </div>
</footer>