文章目录
- [5.1 使用 Div 和 Span 进行布局](#5.1 使用 Div 和 Span 进行布局)
-
- [5.1.1 基础知识：](#5.1.1 基础知识：)
- [5.1.2 案例1：创建一个简单的布局](#5.1.2 案例1：创建一个简单的布局)
- [5.1.3 案例2：为文本创建特别的样式](#5.1.3 案例2：为文本创建特别的样式)
- [5.1.4 案例3：创建一个导航栏](#5.1.4 案例3：创建一个导航栏)
- [5.2 构建复杂的页面结构](#5.2 构建复杂的页面结构)
-
- [5.2.1 基础知识：](#5.2.1 基础知识：)
- [5.2.2 案例 1：创建一个带有侧边栏和内容区的布局](#5.2.2 案例 1：创建一个带有侧边栏和内容区的布局)
- [5.2.3 案例 2：创建一个具有多个部分的页面](#5.2.3 案例 2：创建一个具有多个部分的页面)
- [5.2.4 案例 3：创建一个带有嵌套容器的页面](#5.2.4 案例 3：创建一个带有嵌套容器的页面)
- [5.3 创建响应式布局的基础](#5.3 创建响应式布局的基础)
-
- [5.3.1 基础知识：](#5.3.1 基础知识：)
- [5.3.2 案例 1：使用百分比创建流式布局](#5.3.2 案例 1：使用百分比创建流式布局)
- [5.3.3 案例 2：创建一个自适应的三列布局](#5.3.3 案例 2：创建一个自适应的三列布局)
- [5.3.4 案例 3：创建一个响应式图像画廊](#5.3.4 案例 3：创建一个响应式图像画廊)
5.1 使用 Div 和 Span 进行布局
5.1.1 基础知识：
-
Div 和 Span 是什么 ：在HTML的世界里，
<div>和<span>就像是建筑师的砖块和水泥。<div>是一个块级元素，它就像一个大箱子，可以装下其他元素。而<span>是内联元素，更像是个小篮子，适合包裹文字或小东西。 -
为什么要用它们 ：使用
<div>和<span>可以帮助你组织页面内容，使结构更清晰，就像在书架上摆放书籍一样，每本书都有它的位置。
5.1.2 案例1：创建一个简单的布局
假设我们要创建一个包含标题、段落和一个按钮的简单页面布局。
-
使用 Div：
-
我们可以使用一个
<div>来包裹整个内容，就像给你的内容建一个家。 -
示例代码：
html<div> <h1>欢迎来到我的网页！</h1> <p>这里有很多有趣的内容等着你。</p> <button>探索更多</button> </div>
-
-
使用 Span：
-
在段落中，我们想强调一些文本。这时，
<span>就像是我们的高光笔，帮助我们突出显示。 -
示例代码：
html<p>这里有很多 <span style="font-weight:bold;">有趣的内容</span> 等着你。</p>
-
源码如下：
这个示例展示了一个基本的页面布局，包含标题、强调文本的段落和一个按钮。
html
<!DOCTYPE html>
<html>
<head>
<title>简单页面布局</title>
</head>
<body>
<div>
<h1>欢迎来到我的网页！</h1>
<p>这里有很多 <span style="font-weight:bold;">有趣的内容</span> 等着你。</p>
<button>探索更多</button>
</div>
</body>
</html>5.1.3 案例2：为文本创建特别的样式
假设我们有一段引用文字，我们想让它看起来与众不同。
创造一个引用效果：
- 我们可以用
<div>来包裹这段引用，并用<span>来给其中的某些词汇添加特别的样式。
源码如下：
此示例包含一个特别样式的引用文本，使用 <div> 和 <span> 来实现特别的布局和强调效果。
html
<!DOCTYPE html>
<html>
<head>
<title>特别样式文本</title>
</head>
<body>
<div style="border-left: 3px solid grey; padding-left: 10px;">
<p>"生活就像一盒巧克力，<span style="font-style:italic;">你永远不知道下一颗是什么味道。</span>"</p>
</div>
</body>
</html>5.1.4 案例3：创建一个导航栏
让我们来创建一个简单的导航栏，虽然没有CSS的华丽外衣，但我们可以用HTML的魔法使它变得有趣。
- 构建导航结构 ：
- 使用
<div>来创建一个包含多个链接的导航栏。 - 每个链接都被
<span>包裹，以便将来添加样式。
- 使用
源码如下：
这个示例演示了一个简单的导航栏，使用 <div> 和 <span> 来组织链接。
html
<!DOCTYPE html>
<html>
<head>
<title>简单导航栏</title>
</head>
<body>
<div>
<span><a href="#home">首页</a></span> |
<span><a href="#news">新闻</a></span> |
<span><a href="#contact">联系我们</a></span> |
<span><a href="#about">关于</a></span>
</div>
</body>
</html>通过这些案例，我们可以看到 <div> 和 <span> 在构建网页布局中的多功能性和灵活性。它们就像是HTML布局的瑞士军刀，虽然看起来普通，但功能强大，能够帮助你实现各种布局效果。不要小看这些基本元素，它们可以帮助你构建出既简单又有效的网页布局！
5.2 构建复杂的页面结构
5.2.1 基础知识：
- 理解HTML结构 ：构建复杂页面就像堆积木一样。你需要知道如何正确地堆叠和组织你的
<div>块，以创造出既有条理又吸引人的页面布局。 - 块级元素 vs 内联元素 ：块级元素（如
<div>,<p>,<h1>）占据整行，而内联元素（如<span>,<a>）则不会。了解这一点是布局设计的关键。 - 使用容器 ：在复杂的布局中，
<div>元素常被用作容器，以组织和分隔页面的不同部分。
5.2.2 案例 1：创建一个带有侧边栏和内容区的布局
我们将构建一个简单的两栏布局，包括一个侧边栏和一个主内容区。
html
<!DOCTYPE html>
<html>
<head>
<title>两栏布局</title>
</head>
<body>
<div>
<div style="float: left; width: 20%;">
<p>侧边栏内容...</p>
</div>
<div style="float: left; width: 80%;">
<p>主要内容区...</p>
</div>
</div>
</body>
</html>5.2.3 案例 2：创建一个具有多个部分的页面
接下来，我们将创建一个更复杂的页面，包括页眉、页脚和多个内容区域。
html
<!DOCTYPE html>
<html>
<head>
<title>复杂页面布局</title>
</head>
<body>
<header>
<h1>页面标题</h1>
</header>
<div>
<section>
<h2>内容区 1</h2>
<p>这里是内容区 1 的描述...</p>
</section>
<section>
<h2>内容区 2</h2>
<p>这里是内容区 2 的描述...</p>
</section>
</div>
<footer>
<p>页脚信息...</p>
</footer>
</body>
</html>5.2.4 案例 3：创建一个带有嵌套容器的页面
最后，我们将创建一个布局更加复杂的页面，它包含嵌套的 <div> 来组织内容。
html
<!DOCTYPE html>
<html>
<head>
<title>嵌套布局</title>
</head>
<body>
<div>
<header>
<h1>网站标题</h1>
</header>
<nav>
<ul>
<li>导航 1</li>
<li>导航 2</li>
<li>导航 3</li>
</ul>
</nav>
<article>
<section>
<h2>文章标题</h2>
<p>文章内容...</p>
</section>
<aside>
<h3>相关信息</h3>
<p>一些相关信息...</p>
</aside>
</article>
<footer>
<p>版权信息...</p>
</footer>
</div>
</body>
</html>通过这些案例，我们探索了如何使用 HTML 元素构建从简单到复杂的页面结构。这些布局展示了 <div>, <section>, <header>, <footer> 等元素在页面组织中的强大能力。通过这样的实践，你将更好地理解如何利用 HTML 构建丰富且有条理的网页结构。记住，构建网页就像是艺术创作，每个元素都是你画布上的一笔！
5.3 创建响应式布局的基础
5.3.1 基础知识：
- 响应式布局的意义：在不同设备上提供一致的用户体验是响应式布局的核心。这意味着你的网页应该能够自适应不同屏幕尺寸，无论是手机、平板还是桌面。
- 使用百分比和视口单位：而不是固定宽度，使用百分比（%）或视口宽度（vw）/视口高度（vh）单位可以帮助元素根据屏幕大小变化。
- 媒体查询的基本应用：媒体查询是CSS的一个功能，它允许你根据不同的屏幕尺寸应用不同的样式。虽然我们在这里不深入CSS，但理解其原理是有帮助的。
5.3.2 案例 1：使用百分比创建流式布局
我们将创建一个简单的两栏布局，使用百分比宽度以适应不同屏幕尺寸。
html
<!DOCTYPE html>
<html>
<head>
<title>流式布局示例</title>
<style>
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
</body>
</html>5.3.3 案例 2：创建一个自适应的三列布局
这个例子将显示一个三列布局，每列的宽度会根据视口大小进行调整。
html
<!DOCTYPE html>
<html>
<head>
<title>自适应三列布局</title>
<style>
.container {
width: 100%;
}
.column {
width: 33.33%;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="column">第一列内容</div>
<div class="column">第二列内容</div>
<div class="column">第三列内容</div>
</div>
</body>
</html>5.3.4 案例 3：创建一个响应式图像画廊
在这个例子中，我们将创建一个图像画廊，其中的图像会根据屏幕大小调整其大小。
html
<!DOCTYPE html>
<html>
<head>
<title>响应式图像画廊</title>
<style>
.gallery {
width: 100%;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>通过这些案例，你可以看到如何使用基本的HTML和简单的CSS来创建响应式布局。当然，在实际的项目中，响应式设计通常更复杂，需要更多的CSS技巧，如媒体查询。但这些例子提供了一个很好的起点，帮助你理解如何构建可以适应不同屏幕尺寸的基本布局。