掌握 HTML Div 与 CSS 样式

介绍

在本实验中，你将学习如何使用 HTML <div> 标签将网页划分为不同的部分。你还将学习如何对使用 <div> 标签分组的元素应用 CSS。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建网页结构

在你的文本编辑器中打开 index.html 文件。

首先，通过添加 doctype 声明、<html>、<head> 和 <body> 标签来创建 HTML 文件的基本结构。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body></body>
</html>

添加页头

在这一步中，我们将使用 <div> 标签为网页添加页头部分。

在 <body> 标签内，添加一个带有类名 "header" 的 <div> 标签。

<div class="header"></div>

在 <div> 标签内添加一些内容来表示页头部分。例如：

<div class="header">
  <h1>欢迎访问我的网站</h1>
</div>

添加侧边栏和主内容区域

接下来，我们将使用 <div> 标签为网页添加侧边栏和主要内容部分。

在 <body> 标签内，添加另一个带有类名 "container" 的 <div> 标签。

<div class="container"></div>

在 "container" <div> 标签内，再添加两个 <div> 标签——一个用于侧边栏，另一个用于主要内容。分别给它们赋予类名 "sidebar" 和 "main-content"。

<div class="container">
  <div class="sidebar">
    <!-- 添加侧边栏内容 -->
  </div>
  <div class="main-content">
    <!-- 在此添加主要内容 -->
  </div>
</div>

在 <div> 标签内添加内容以表示侧边栏和主要内容部分。例如：

<div class="container">
  <div class="sidebar">
    <h2>关于我</h2>
    <p>你好，我叫 John，是一名网页开发者。</p>
  </div>
  <div class="main-content">
    <h2>我的最新项目</h2>
    <p>来看看我的最新网页项目吧！</p>
  </div>
</div>

添加页脚

最后，我们将使用 <div> 标签为网页添加页脚部分。

在 <body> 标签内，添加另一个带有类名 "footer" 的 <div> 标签。

<div class="footer"></div>

在 <div> 标签内添加一些内容来表示页脚部分。例如：

<div class="footer">
  <p>&copy; 2021 我的网站。保留所有权利。</p>
</div>

网页样式设计

现在我们已经使用 <div> 标签创建了网页的基本结构，接下来可以通过应用 CSS 样式来让页面看起来更美观。

在你的文本编辑器中打开 style.css 文件，或者创建一个名为 style.css 的新文件，并通过 <head> 部分中的 <link> 标签将其链接到 index.html 文件。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

在 style.css 文件中，为我们之前使用的不同类名添加以下样式：

/* 页头样式 */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* 容器样式 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 侧边栏样式 */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* 主要内容样式 */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

预览网页

现在我们已经使用 <div> 标签创建了网页结构并应用了 CSS 样式，接下来可以在浏览器中预览网页。

保存 index.html 和 style.css 文件。
在浏览器中打开 index.html 文件以查看网页。

你应该会看到一个包含页头、侧边栏、主要内容和页脚部分的网页，所有部分都通过 CSS 样式进行了美化。

总结

在本实验中，你学习了如何使用 HTML <div> 标签将网页划分为不同的部分。你还学习了如何通过为这些部分分配类名来应用 CSS 样式。通过这些技术，你可以创建更复杂且视觉上更具吸引力的网页。

HTML Div 标签与 CSS 样式

介绍