跳到主要内容

HTML 布局

提示
  1. HTML布局的意义：HTML布局涉及网站内容的组织和结构方式，有助于使网站易于导航。
  2. HTML布局元素：包括<header>、<nav>、<section>、<article>、<aside>、<footer>和<details>等标签，用于定义页面的不同部分。
  3. 布局实现示例：利用CSS可以实现各种布局效果，如使用display: flex属性来排列元素，设置宽度和背景颜色等。

HTML 布局指的是网站内容的组织和结构方式。它使网站易于导航。例如，

一个使用多个布局元素的 HTML 布局。

如您所见，我们在页面上以结构化的方式安排了各种内容，如标题、页脚、首页等。

HTML 布局元素​

有各种 HTML 布局元素。它们如下：

<header> 标签​

<header> 标签定义了文档的页眉。例如，

<header>mashangxue123</header>

浏览器输出 一个 HTML header 标签。

<nav> 标签表示页面的一部分，它链接到其他页面或页面内的部分。

<section> 标签​

HTML 中的 <section> 标签表示文档中一个独立的内容部分。要了解更多，请访问 HTML <section>。

<article> 标签​

HTML 中的 <article> 标签表示一个可以重用的独立内容部分。

<aside> 标签​

<aside> 标签用于表示与文档主要内容间接相关的部分。它通常用作文档中的侧边栏。要了解更多，请访问 HTML <aside>.

HTML <footer> 标签定义了 HTML 文档或部分的页脚。要了解更多，请访问 HTML <footer>。

<details> 标签​

<details> 标签提供了用户可以按需查看或隐藏的额外细节。例如，

<details>
  <summary>点击我</summary>
  <p>隐藏的内容</p>
</details>

一个 HTML details 标签。

<summary> 标签定义了 <details> 元素的可见标题。在这里，如果我们点击 “点击我”，“隐藏的内容” 将被显示。

** **一个带有 details 标签的 HTML summary 标签。

HTML 布局​

让我们使用 CSS 创建一个简单的布局。

<body>
  <div class="box">
    <section class="yellow"></section>
    <aside class="blue"></aside>
  </div>
</body>
<style>
  .box {
    display: flex;
    height: 200px;
  }
  .blue {
    width: 65%;
    height: 200px;
    background-color: blue;
  }
  .yellow {
    width: 35%;
    height: 200px;
    background-color: yellow;
  }
</style>

一个简单的 html 布局。

在上面的例子中，我们创建了一个带有 box 类的 <div>。在其内部，我们有一个 <section> 和一个 <aside> 元素，分别带有 yellow 和 blue 类。我们使用了 CSS 来排列这些元素。

注意代码，

.box { display: flex; height: 200px; }

在这里，

  • display: flex - 将盒子以行的形式并排排列
  • height: 200px - 将高度设置为 200 像素

然后，我们也为带有 blue 和 yellow 类的 <div> 使用了 CSS。

.blue { width: 65%; height: 200px; background-color: blue; }
.yellow { width: 35%; height: 200px; }

在这里，

  • width - 设置 <div> 的宽度
  • height - 设置 <div> 的高度
  • background-color - 设置 <div> 的背景颜色

我们将在 CSS 教程中进一步学习关于 CSS 布局的知识。

示例：HTML 布局​

<body>
  <header>
    <h2>标题</h2>
  </header>
  <section>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">学习 HTML</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
    <article>
      <h1>首页</h1>
      <p>这是一个首页。</p>
    </article>
  </section>
  <footer>
    <p>页脚</p>
  </footer>
</body>
<style>
  * {
    box-sizing: border-box;
  }
  header {
    background-color: lightblue;
    text-align: center;
    padding: 2px;
    font-size: 25px;
    color: white;
  }
  nav {
    float: left;
    width: 30%;
    height: 300px;
    background: #fff;
    padding: 20px;
  }
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  article {
    float: left;
    padding: 20px;
    width: 70%;
    background-color: #f1f1f1;
    height: 300px;
  }
  footer {
    background-color: lightblue;
    padding: 10px;
    text-align: center;
    color: white;
  }
  section::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

浏览器输出 Html 布局。

最后于 更新