HTML CSS零基础入学宝典：实例：居中五环,两栏布局,两个常见bug,BFC
发布时间: 2024-02-26 12:24:11 阅读量: 15 订阅数: 13 
# 1. HTML和CSS基础入门
## 1.1 HTML基础知识介绍
HTML（HyperText Markup Language）是用来描述网页结构的标记语言。通过使用标签和属性，可以创建出整个网页的结构。在学习HTML之前，需要了解以下几个基本概念：
- **HTML标签**：HTML标签是用尖括号包围起来的关键词，比如`<html>`、`<body>`等。它们通常成对出现，包括开始标签和结束标签，用来定义元素。
- **HTML元素**：指的是从开始标签到结束标签的所有代码，比如`<p>这是一个段落</p>`中的`<p>这是一个段落</p>`就是一个HTML元素。
- **HTML属性**：提供有关HTML元素的更多信息，比如`<a>`标签中的`href`属性用于指定链接地址。
接下来，我们通过一个简单的例子来演示HTML基础知识。假设我们要创建一个简单的网页，包括标题和段落，那么对应的HTML代码可以是：
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落</p>
</body>
</html>
```
上面的HTML代码中，我们使用了`<!DOCTYPE html>`声明来指明文档类型为HTML5。然后包裹在`<html>`标签内的是整个HTML文档的开始和结束。`<head>`标签包含了页面的元数据和引用的外部资源，比如标题元素`<title>`就位于`<head>`标签内。`<body>`标签则包含了显示在浏览器窗口中的所有内容，包括页面的标题和段落。
## 1.2 CSS基础知识介绍
CSS（Cascading Style Sheets）用来为网页添加样式。通过CSS，可以控制文本的颜色、字体、布局、背景等各种样式效果。在学习CSS之前，需要了解一些基础概念：
- **选择器**：CSS选择器用于选择要设置样式的HTML元素，如`h1`、`.class`、`#id`等。
- **属性和值**：CSS样式由属性和值组成，比如`color: red;`中的`color`是属性，`red`是值。
- **样式表**：CSS规则集合在一起形成了样式表，可以放在HTML文档的`<style>`标签内，也可以放在外部的CSS文件中。
接下来，我们通过一个简单的例子来演示CSS基础知识。假设我们要为前面创建的简单网页添加样式，让标题呈现红色，段落呈现蓝色，那么对应的CSS代码可以是：
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落</p>
</body>
</html>
```
上面的CSS代码中，我们使用`h1`和`p`选择器分别选择了页面中的标题和段落元素，并设置它们的颜色属性为红色和蓝色。
通过以上演示，我们对HTML和CSS的基础知识有了初步了解。接下来，我们将通过实例演练和项目实战进一步掌握HTML和CSS的应用和技巧。
# 2. 实例演练：居中五环
在本章中，我们将通过一个实例演练来学习如何使用HTML和CSS实现居中效果。这个实例将展示如何在页面中居中显示五个环形图案。
### 2.1 HTML结构搭建
首先，我们来创建HTML结构，其中包括一个包含五个环形图案的容器。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中五环实例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
```
### 2.2 CSS样式编写
接下来，我们编写CSS样式来美化这些环形图案，并实现居中效果。
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
margin: 10px;
}
```
### 2.3 实现居
最低0.47元/天 解锁专栏 送3个月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
0
0
相关推荐
专栏目录
最低0.47元/天 解锁专栏
送3个月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
最新推荐
numpy安装与性能优化：优化安装后的numpy性能
# 1. NumPy简介**
NumPy（Numerical Python）是一个用于科学计算的Python库。它提供了一个强大的N维数组对象，以及用于数组操作的高
【基础】初步了解JavaScript：动态网页的核心
# 1. **2.1 数据类型和变量**
**2.1.1 数据类型概述**
JavaScript 是一门弱类型语言，这意味着变量在声明时不需要指定类型。JavaScript 中的数据类型包括：
* **基本类型：**
* 数字（Number）：整数、浮点数
* 字符串（String）：文本序列
* 布尔值（Boolean）：true 或 false
* null：表示
Python break语句的开源项目：深入研究代码实现和最佳实践，解锁程序流程控制的奥秘
# 1. Python break 语句概述
break 语句是 Python 中一个强大的控制流语句，用于在循环或条件语句中提前终止执行。它允许程序员在特定条件满足时退出循环或条件块，从而实现更灵活的程序控制。break 语句的语法简单明了，仅需一个 break 关键字，即可在当前执行的循环或条件语句中终止执行，并继续执行后续代码。
# 2. br
揭秘append()函数的秘密：提升Python列表操作的利器
# 1. Python列表简介**
Python列表是一种可变的有序数据结构，用于存储一系列元素。它可以包含不同类型的数据，包括数字、字符串、列
Python求和与信息安全：求和在信息安全中的应用与实践
# 1. Python求和基础**
Python求和是一种强大的工具，用于将一系列数字相加。它可以通过使用内置的`sum()`函数或使用循环显式地求和来实现。
```python
# 使用 sum() 函数
numbers = [1, 2, 3, 4, 5]
total = sum(numbers) # total = 15
# 使用循环显式求和
total = 0
for n
Python append函数在金融科技中的应用：高效处理金融数据
-Method.webp)
# 1. Python append 函数概述**
Python append 函数是一个内置函数，用于在列表末尾追加一个或多个元素。它接受一个列表和要追加的元素作为参数。append 函数返回 None，但会修改原始列表。
append 函数的语法如下：
```python
list.append(element)
```
其中，list 是要追加元
KMeans聚类算法的并行化：利用多核计算加速数据聚类
# 1. KMeans聚类算法概述**
KMeans聚类算法是一种无监督机器学习算法，用于将数据点分组到称为簇的相似组中。它通过迭代地分配数据点到最近的簇中心并更新簇中心来工作。KMeans算法的目的是最小化簇内数据点的平方误差，从而形成紧凑且分离的簇。
KMeans算法的步骤如下：
1. **初始化：**选择K个数据点作为初始簇中心。
2. **分配：**将每个数据点分配到最近的簇中心。
3. **更新：**计算每个簇中数据点的平均值，并
Python字符串与数据分析：利用字符串处理数据，提升数据分析效率，从海量数据中挖掘价值，辅助决策制定
# 1. Python字符串基础
Python字符串是表示文本数据的不可变序列。它们提供了丰富的操作，使我们能够轻松处理和操作文本数据。本节将介绍Python字符串的基础知识，
【实战演练】用wxPython制作一个简单的网络摄像头监控应用
# 2.1 网络摄像头的工作原理
网络摄像头是一种将光学图像转换为数字信号的电子设备。其工作原理大致如下：
1. **图像采集：**网络摄像头内部有一个图像传感器（通常为CMOS或CCD），负责将光线转换为电信号。
2. **模拟-数字转换（ADC）：**图像传感器产生的模拟电信号通过ADC转换为数字信号，形成图像数据。
3. *
Python index与sum：数据求和的便捷方式，快速计算数据总和
# 1. Python中的数据求和基础
在Python中，数据求和是一个常见且重要的操作。为了对数据进行求和，Python提供了多种方法，每种方法都有其独特的语法和应用场景。本章将介绍Python中数据求和的基础知识，为后续章节中更高级的求和技术奠定基础。
首先，Python中求和最简单的方法是使用内置的`+`运算符。该运算符可以对数字、字符串或列表等可迭代对象进行求和。例如：
`
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
专栏目录
最低0.47元/天 解锁专栏
送3个月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )