-
【Web前端】HTML/CSS一文详解
现在对HTML和CSS的基础知识做一个详细的总结，文章内容很硬核。共有3w+字总结，建议收藏反复学习！适用于初学者学习或者熟练相关操作的人复习使用。
文章目录
- HTML篇
- 一.HTML简介
- 二.HTML编辑器
- 三.HTML基础
- 四.HTML元素
- 五.HTML属性
- 六.HTML标题
- 七.HTML段落
- 八.HTML文本格式化
- 九.HTML链接
- 十.HTML头部
- 十一.HTML图像
- 十二.HTML表格
- 十三.HTML列表
- 十四.HTML区块
- 十五.HTML布局
- 十六.HTML表单和输入
- 十七.HTML框架
- 十八.HTML颜色
- 十九.脚本
- 二十.字符实体
- 二十一.URL
- 二十二.HTML总结
- CSS篇
- 一.CSS简介
- 二.CSS语法
- 三.CSS选择器
- 四.CSS创建
- 五.CSS 背景
- 六.CSS文本
- 七.CSS文字
- 八.CSS链接
- 九.CSS列表
- 十.CSS表格
- 十一.CSS盒子模型(Box Model)
- 十二.CSS边框(Border)
- 十三.CSS轮廓(outline)
- 十四.CSS外边距(margin)
- 十五.CSS填充(padding)
- 十六.CSS分组和嵌套选择器
- 十七.CSS尺寸(Dimension)
- 十八.CSS显示与可见性(Display Visibility)
- 十九.CSS定位(Position)
- 二十.CSS布局(Overflow)
- 二十一.CSS浮动(Float)
- 二十二.CSS布局-对齐
- 二十三.CSS导航栏
- 二十四.CSS下拉菜单
- 二十五.CSS提示工具
- 二十六.总结
HTML篇
一.HTML简介
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程，难度指数低，重在反复练习！
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程title> head> <body> <h1>标题h1> <p>段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
1.什么是HTML？
🍁HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2.HTML 标签
🍁HTML标记标签又称为 标签。
- HTML 标签是由尖括号包围的关键词
- HTML 标签通常是成对出现
- 标签对中的第一个标签是开始标签(开放标签)，第二个标签是结束标签(闭合标签)
<标签>内容标签>- 1
所有 HTML 文档必须以 声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。
3.HTML 元素
🍁一个 HTML 元素包含了开始标签与结束标签。
<h1>一级标题h1>- 1
4.HTML版本
版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
5.Web 浏览器
🍁Web浏览器（如谷歌浏览器，Edge，Safari）用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。
6.HTML 网页结构
7.中文编码
🍁当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。
<meta charset="UTF-8">- 1
8.编写第一个网页
示例：使用记事本编写你的第一个网页！
<html> <head> <title>这是我的第一个网页title> head> <body> <h1>望庐山瀑布h1> <h2> <font color=red>唐font> 李白 h2> <p>日照香炉生紫烟，遥看瀑布挂前川。p> <p>飞流直下三千尺，疑是银河落九天。p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
新建一个文本文档，命名为index.html。编写代码，在默认浏览器中运行，查看显示效果！
二.HTML编辑器
🌈这里推荐使用vs code来编辑HTML代码！
vscode 是由微软开发的免费开源软件，它具有以下优势：
- 轻量级编辑器
- 丰富的插件系统
- 代码跟踪功能
三.HTML基础
1.HTML 标题
🌈HTML 标题是通过
-
<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>- 1
- 2
- 3
2.HTML 段落
🌈HTML 段落是通过标签
来定义的。<p>段落1p> <p>段落2p> <p>段落3p>- 1
- 2
- 3
3.HTML 链接
<a href="https://www.baidu.com">百度一下a>- 1
4.HTML 图像
🌈HTML 图像是通过标签
<img src="/images/baidu.png" width="258" height="39" />- 1
四.HTML元素
1.HTML 元素语法
- HTML 元素以开始标签起始，以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2.嵌套的 HTML 元素
🍀大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。HTML 文档由相互嵌套的 HTML 元素构成。
DOCTYPE html> <html> <body> <p>段落1...p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 这个
元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签以及一个结束标签。元素内容是: 段落1…。 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签。元素内容是另一个 HTML 元素（p 元素）。元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（body 元素）。
3.HTML 空元素
🍀没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<p>段落1p> <br> <p>段落2p>- 1
- 2
- 3
在开始标签中添加斜杠，比如
五.HTML属性
🍃属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。
- HTML 元素可以设置属性，属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
<a href="http://www.baidu.com">百度一下a>- 1
六.HTML标题
1.HTML标题
🍒标题是通过
-标签进行定义的。定义最大的标题。定义最小的标题。浏览器会自动地在标题的前后添加空行。<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>- 1
- 2
- 3
标题用来正确的显示文章结构，通过不同的标题可以为文章建立索引，所以，标题是很重要的存在，所以，不要仅仅是为了生成粗体或大号的文本而使用标题。
2.HTML水平线
🍒
<p>段落1p> <hr> <p>段落2p> <hr> <p>段落3p>- 1
- 2
- 3
- 4
- 5
3.HTML 注释
🍒可以将注释插入 HTML 代码中，提高代码可读性，浏览器会忽略注释，也不会显示它们。
- 1
七.HTML段落
1.HTML段落
🍊HTML可以将文档分为不同的段落。段落是通过
标签定义的。<p>段落1...p> <p>段落2...p>- 1
- 2
2.HTML换行
🍊使用
<p>这是<br>换行的<br>演示p>- 1
八.HTML文本格式化
🍊HTML 使用标签
(“bold”) 与(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签替换加粗标签来使用,替换标签使用。但是两者的含义不同，或者标签有你要呈现的文本是重要的，所以要突出显示的意思。标签 作用 定义粗体文本 定义着重文字 定义斜体文字 定义小号文字 … … 详细的HTML标签参考标签参考手册哦
九.HTML链接
🍉HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。
- HTML使用标签
来设置超文本链接。 - 在标签
中使用了href属性来描述链接的地址。 - 一个未访问过的链接显示为蓝色字体并带有下划线，访问过的链接显示为紫色并带有下划线，点击链接时，链接显示为红色并带有下划线。
<a href="url">链接文本a>- 1
- 使用 target 属性，你可以定义被链接的文档在何处显示。
- id 属性可用于创建一个 HTML 文档书签。
十.HTML头部
🧨1.HTML
元素：元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</code></strong></p> <hr> <p><strong>🧨2.HTML <code><title></code>元素：</strong></p> <p><strong><code><title></code> 标签定义了不同文档的标题。</strong></p> <ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong>定义了浏览器工具栏的标题</strong></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong>当网页添加到收藏夹时，显示在收藏夹中的标题</strong></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong>显示在搜索引擎结果页面的标题</strong></li></ul> <pre data-index="18" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>文档标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>文档内容......<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <hr> <p><strong>🧨3.HTML <code><base></code>元素：</strong></p> <p><strong><code><base></code> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。</strong></p> <pre data-index="19" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.baidu.com/images/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <hr> <p><strong>🧨4.HTML <code><link></code>元素</strong><br> <strong><code><link></code> 标签定义了文档与外部资源之间的关系。</strong></p> <pre data-index="20" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mystyle.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <hr> <p><strong>🧨5.HTML <code><stytle></code>元素</strong><br> <strong><code><style></code> 标签定义了HTML文档的样式文件引用地址。</strong></p> <pre data-index="21" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <hr> <p><strong>🧨6.HTML <code><meta></code>元素</strong><br> <strong><code><meta></code>标签描述了一些基本的元数据。</strong></p> <ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。</strong></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</strong></li><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled"> <strong> 一般放置于 区域。</strong></li></ul> <hr> <p><strong>🧨7.HTML <code><script></code>元素</strong><br> <strong><code><script></code>标签用于加载脚本文件，如： JavaScript。</strong></p> <hr> <h1><a name="t32"></a><a id="HTML_375"></a>十一.HTML图像</h1> <p><strong>🟢在 HTML 中，图像由<code><img></code> 标签定义，<code><img></code> 是空标签。</strong></p> <p><strong>要在页面上显示图像，需要使用源属性（src），源属性的值是图像的 URL 地址。</strong></p> <pre data-index="22" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>some_text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像</strong></p> <pre data-index="23" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boat.gif<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>显示图像<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素。</strong></p> <pre data-index="24" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>baidu.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>百度<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> <p><strong>加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</strong></p> </blockquote> <hr> <h1><a name="t33"></a><a id="HTML_399"></a>十二.HTML表格</h1> <p><strong>🟢表格由 <code><table></code> 标签来定义。每个表格均有若干行（由 <code><tr></code> 标签定义），每行被分割为若干单元格（由 <code><td></code> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</strong></p> <pre data-index="25" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <p><strong>大多数情况我们需要给表格加上边框，也可以不使用边框。</strong></p> <p><strong>表格的表头使用 <code><th></code> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。</strong></p> <hr> <h1><a name="t34"></a><a id="HTML_420"></a>十三.HTML列表</h1> <p><strong>🟢HTML 支持有序、无序和定义列表:</strong></p> <ul><li><strong>无序列表使用 <code><ul></code> 标签定义，使用粗体圆点（典型的小黑圆圈）进行标记，每个列表项始于 <code><li></code> 标签</strong></li></ul> <pre data-index="26" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/06/27/144414486.png" alt="在这里插入图片描述"></p> <ul><li><strong>有序列表使用<code><ol></code> 标签定义，使用数字进行标记，每个列表项始于 <code><li></code> 标签。</strong></li></ul> <pre data-index="27" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/06/27/144414621.png" alt="在这里插入图片描述"></p> <ul><li><strong>自定义列表以 <code><dl></code> 标签开始，每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始，自定义列表是项目和注释的组合。</strong></li></ul> <pre data-index="28" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>java<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>-诞生于1995年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>python<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>-诞生于1991年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/06/27/144414730.png" alt="在这里插入图片描述"></p> <hr> <h1><a name="t35"></a><a id="HTML_461"></a>十四.HTML区块</h1> <p><strong>HTML 可以通过 <code><div></code> 和 <code><span></code>将元素组合起来。</strong></p> <blockquote> <p><strong>大多数 HTML 元素被定义为块级元素或内联元素。</strong></p> </blockquote> <h2><a name="t36"></a><a id="1HTML_467"></a>1.HTML区块元素</h2> <p><strong><font color="DeepSkyBlue">块级元素在浏览器显示时，通常会以新行来开始和结束。</font></strong></p> <h2><a name="t37"></a><a id="2HTML_469"></a>2.HTML内联元素</h2> <p><strong><font color="DeepSkyBlue">内联元素在浏览器显示时通常不会以新行开始。</font></strong></p> <h2><a name="t38"></a><a id="3HTML_div__471"></a>3.HTML的 div 元素</h2> <p><strong>HTML <code><div></code> 元素是块级元素，它是用于组合其他 HTML 元素的容器。</strong></p> <p><strong>例：让文档中的一块区域显示为红色，另一块区域加粗且显示为蓝色！</strong></p> <pre data-index="29" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>望庐山瀑布<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>唐 李白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>日照香炉生紫烟，<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>遥看瀑布挂前川。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span>blue</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>飞流直下三千尺，<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>疑是银河落九天。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li></ul></pre> <p><strong>显示效果：</strong><img src="https://1000bd.com/contentImg/2022/07/05/110430223.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong><code><div></code>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。</strong></p> </blockquote> <h2><a name="t39"></a><a id="4HTML_span__508"></a>4.HTML的 span 元素</h2> <p><strong>HTML <code><span></code> 元素是内联元素，可用作文本的容器。</strong></p> <p><strong>例：对文档中的一部分文本进行着色！</strong></p> <pre data-index="30" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>chartreuse</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>唐<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> -李白<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>显示效果：</strong><br> <img src="https://1000bd.com/contentImg/2022/07/05/110430465.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong><code><span></code> 用于对文档中的行内元素进行组合。</strong></p> </blockquote> <hr> <h1><a name="t40"></a><a id="HTML_523"></a>十五.HTML布局</h1> <p><strong>布局用于改善网站的外观，我们可以使用<code><div></code>或者<code><table></code>添加网页布局，大多数网站可以使用 <code><div></code> 或者 <code><table></code> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</strong></p> <h2><a name="t41"></a><a id="1div_526"></a>1.使用div元素添加网页布局</h2> <p><strong>div 元素是用于分组 HTML 元素的块级元素。</strong></p> <pre data-index="31" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>小橙子前端教程!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>600px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>cornflowerblue<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>--唐诗三百首--<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!--下外边距--></span> <span class="token comment"><!--float:该属性控制目标HTML元素是否浮动以及如何浮动.--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>dimgrey<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>菜单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 望庐山瀑布<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 静夜思<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 绝句<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 琵琶行 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>aliceblue<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 望庐山瀑布<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 翻译译文： 香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。 高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!--clear 属性规定元素的哪一侧不允许其他浮动元素。--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>cadetblue<span class="token punctuation">;</span><span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 橙子！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110430859.png" alt="在这里插入图片描述"></p> <h2><a name="t42"></a><a id="2table_577"></a>2.使用table元素添加网页布局</h2> <p>我们还可以使用table标签添加网页布局！</p> <pre data-index="32" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>小橙子前端教程!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>600<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>cornflowerblue</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>--唐诗三百首--<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>dimgrey<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">vertical-align</span><span class="token punctuation">:</span>top<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>菜单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 望庐山瀑布<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 静夜思<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 绝句<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 琵琶行 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token comment"><!--vertical-align 属性设置元素的垂直对齐方式。--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>aliceblue<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span><span class="token property">vertical-align</span><span class="token punctuation">:</span>top<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 望庐山瀑布<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 翻译译文： 香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。 高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>cadetblue<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 橙子！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110431092.png" alt="在这里插入图片描述"></p> <blockquote> <p><code><table></code>元素主要用于创建表格，虽然可以用于添加网页布局，但是不建议使用！</p> </blockquote> <hr> <h1><a name="t43"></a><a id="HTML_630"></a>十六.HTML表单和输入</h1> <p><strong>HTML 表单用于收集用户的输入信息，HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。</strong></p> <blockquote> <p><strong>表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）<br> 等等。</strong></p> </blockquote> <p><strong>我们使用标签来创建表单，多数情况下被用到的表单标签是输入标签 <code><input></code>。</strong></p> <h2><a name="t44"></a><a id="1_637"></a>1.文本域</h2> <p><strong>文本域(Text Fields)通过 <code><input type="text"></code> 来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</strong></p> <pre data-index="33" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> First <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>firstname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Last <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lastname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110431308.png" alt="在这里插入图片描述"></p> <h2><a name="t45"></a><a id="2_650"></a>2.密码字段</h2> <p><strong>密码字段通过标签 <code><input type="password"></code> 来定义。</strong></p> <pre data-index="34" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> Password: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110431518.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。</strong></p> </blockquote> <h2><a name="t46"></a><a id="3_662"></a>3.单选按钮</h2> <p><strong>单选按钮(Radio Buttons)通过<code><input type="radio"></code>标签来定义。</strong></p> <pre data-index="35" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110431865.png" alt="在这里插入图片描述"></p> <h2><a name="t47"></a><a id="4_673"></a>4.复选框</h2> <p><strong>复选框(Checkboxes)通过标签<code><input type="checkbox"></code>来定义。</strong></p> <pre data-index="36" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>语文<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Car<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>数学<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>英语<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Car<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>历史 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110432111.png" alt="在这里插入图片描述"></p> <h2><a name="t48"></a><a id="5_686"></a>5.提交按钮</h2> <p><strong>提交按钮用<code><input type="submit"></code>标签来定义！</strong></p> <pre data-index="37" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>html_form_action.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Username: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110432407.png" alt="在这里插入图片描述"><br> <strong>在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。</strong></p> <blockquote> <p><strong><code>method</code> 属性用于定义表单数据的提交方式，可以是以下值：</strong></p> <ul><li><strong><code>post</code>：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。</strong></li><li><strong><code>get</code>：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。</strong></li></ul> </blockquote> <hr> <h1><a name="t49"></a><a id="HTML_703"></a>十七.HTML框架</h1> <p><strong>有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架！</strong></p> <h2><a name="t50"></a><a id="1iframe_706"></a>1.iframe语法</h2> <pre data-index="38" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>URL<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t51"></a><a id="2iframe_710"></a>2.iframe设置高度和宽度</h2> <p><strong><code>height</code> 和 <code>width</code> 属性用来定义iframe标签的高度与宽度。</strong></p> <pre data-index="39" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_iframe.htm<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t52"></a><a id="3iframe_717"></a>3.iframe去除边框</h2> <p><strong><code>frameborder</code> 属性用于定义iframe表示是否显示边框。</strong></p> <pre data-index="40" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_iframe.htm<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t53"></a><a id="4_iframe__723"></a>4.使用 iframe 来显示目标链接页面</h2> <p><strong><code>iframe</code> 可以显示一个目标链接的页面</strong></p> <pre data-index="41" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>小橙子前端教程！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_iframe.htm<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe_a<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://blog.csdn.net/zhangxia_?spm=1000.2115.3001.5343<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>橙子！的博客<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>注意：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/05/110432850.png" alt="在这里插入图片描述"></p> <h1><a name="t54"></a><a id="HTML_748"></a>十八.HTML颜色</h1> <ul><li> <p><strong>HTML 颜色由红色、绿色、蓝色混合而成。</strong></p> </li><li> <p><strong>HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。</strong></p> </li><li> <p><strong>每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。</strong></p> </li></ul> <p><img src="https://1000bd.com/contentImg/2022/07/05/110433116.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>具体颜色效果可以查表</strong></p> </blockquote> <hr> <h1><a name="t55"></a><a id="_762"></a>十九.脚本</h1> <h2><a name="t56"></a><a id="1HTML_script__763"></a>1.HTML的 script 标签</h2> <p><strong><code><script></code> 标签用于定义客户端脚本，比如 JavaScript。<code><script></code> 元素既可包含脚本语句，也可通过 <code>src</code> 属性指向外部脚本文件。</strong></p> <pre data-index="42" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"Hello World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h2><a name="t57"></a><a id="2HTML_noscript__772"></a>2.HTML的 noscript 标签</h2> <p><strong> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，<code><noscript></code>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素，在浏览器禁止使用脚本时，会显示该标签内的内容。</strong></p> <pre data-index="43" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"Hello World!"</span><span class="token punctuation">)</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noscript</span><span class="token punctuation">></span></span>抱歉，你的浏览器不支持 JavaScript!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h1><a name="t58"></a><a id="_782"></a>二十.字符实体</h1> <p><strong>HTML中预留的字符和一些键盘上找不到的字符必须使用字符实体来替换！</strong></p> <p><strong>如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。</strong></p> <div class="table-box"><table><thead><tr><th>显示结果</th><th>描述</th><th>实体名称</th><th>实体编号</th></tr></thead><tbody><tr><td></td><td>空格</td><td><code> </code></td><td><code> </code></td></tr><tr><td><</td><td>小于号</td><td><code><</code></td><td><code><</code></td></tr><tr><td>></td><td>大于号</td><td><code>></code></td><td><code>></code></td></tr><tr><td>&</td><td>和号</td><td><code>&</code></td><td><code>&</code></td></tr></tbody></table></div> <blockquote> <p><strong>实体名称对大小写敏感，实际实体名称使用时参考HTML实体参考手册！</strong></p> </blockquote> <h1><a name="t59"></a><a id="URL_796"></a>二十一.URL</h1> <p><strong>URL(统一资源定位器)是一个网页地址，可以使用网址(例如：www.baidu.com)或者使用IP地址来访问。</strong></p> <p><strong>Web浏览器通过URL从Web服务器请求页面。</strong></p> <h2><a name="t60"></a><a id="1_URL_Scheme_800"></a>1.常见的 URL Scheme</h2> <div class="table-box"><table><thead><tr><th>Scheme</th><th>访问</th><th>作用</th></tr></thead><tbody><tr><td>http</td><td>超文本传输协议</td><td>以 http:// 开头的普通网页。不加密。</td></tr><tr><td>https</td><td>安全超文本传输协议</td><td>安全网页，加密所有信息交换。</td></tr><tr><td>ftp</td><td>文件传输协议</td><td>用于将文件下载或上传至网站。</td></tr><tr><td>file</td><td></td><td>您计算机上的文件。</td></tr></tbody></table></div> <blockquote> <p><strong>URL 只能使用 ASCII 字符集。</strong></p> </blockquote> <hr> <h1><a name="t61"></a><a id="HTML_813"></a>二十二.HTML总结</h1> <p><font color="red" size="4"><strong>恭喜你！现在已经完成HTML基础知识的学习，接下来就要学习CSS啦。</strong></font></p> <hr> <hr> <h1><a name="t62"></a><a id="font_size5_colorredCSS_818"></a><font size="5" color="red">CSS篇</font></h1> <h1><a name="t63"></a><a id="CSS_819"></a>一.CSS简介</h1> <h2><a name="t64"></a><a id="1CSS_820"></a>1.什么是CSS？</h2> <p><strong>CSS 指层叠样式表 (Cascading Style Sheets)。</strong></p> <ul><li><strong>样式定义如何显示 HTML 元素</strong></li><li><strong>样式通常存储在样式表中</strong></li><li><strong>外部样式表可以极大提高工作效率，通常存储在CSS文件中</strong></li><li><strong>多个样式定义可层叠为一个</strong></li></ul> <pre data-index="44" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p { color:red; text-align:center; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <hr> <h1><a name="t65"></a><a id="CSS_836"></a>二.CSS语法</h1> <h2><a name="t66"></a><a id="1_837"></a>1.语法规则</h2> <p><strong>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</strong><br> <img src="https://1000bd.com/contentImg/2022/07/21/092832107.png" alt="在这里插入图片描述"></p> <ul><li><strong>选择器通常是您需要改变样式的 HTML 元素。</strong></li><li><strong>每条声明由一个属性和一个值组成。</strong></li></ul> <h2><a name="t67"></a><a id="2_843"></a>2.注释</h2> <p><strong>CSS注释以 <code>/*</code> 开始, 以 <code>*/</code> 结束,注释是为了提高代码的可读性！</strong></p> <pre data-index="45" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">/*注释*/ p { text-align:center; /*注释*/ color:red; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <hr> <h1><a name="t68"></a><a id="CSS_857"></a>三.CSS选择器</h1> <p><strong>如果要在HTML元素中使用CSS样式，则需要在元素中使用选择器！</strong></p> <h2><a name="t69"></a><a id="1CSSid_859"></a>1.CSS的id选择器</h2> <p><strong>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。</strong></p> <pre data-index="46" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>小橙子前端教程!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">#p1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>通过id选择器把这一段文字设置为红色！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这一段文字不受上面的影响！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832198.png" alt="在这里插入图片描述"></p> <h2><a name="t70"></a><a id="2CSSclass_885"></a>2.CSS的class选择器</h2> <p><strong>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。</strong></p> <pre data-index="47" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>小橙子前端教程！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.center</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题居中<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>段落居中<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832283.png" alt="在这里插入图片描述"><br> <strong>同时也可以指定特定的HTML元素使用class。</strong></p> <pre data-index="48" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p.center {text-align:center;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <hr> <h1><a name="t71"></a><a id="CSS_917"></a>四.CSS创建</h1> <p><strong>浏览器会根据样式表格式化HTML文档！有三种方法可以插入样式表：</strong></p> <h2><a name="t72"></a><a id="1_919"></a>1.外部样式表</h2> <p><strong>当样式需要应用于很多界面的时候，通常使用外部样式表，使用外部样式表的优点是可以通过改变一个文件来改变整个HTML文档的样式布局，每个页面使用 <code><link></code> 标签链接到样式表。 <code><link></code> 标签在文档的头部。</strong></p> <pre data-index="49" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mystyle.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--rel 属性是必须的，规定当前文档与被链接文档/资源之间的关系。--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h2><a name="t73"></a><a id="2_929"></a>2.内部样式表</h2> <p><strong>当单个文档需要特殊的样式时，就应该使用内部样式表。使用 <code><style></code> 标签在文档头部定义内部样式表。</strong></p> <pre data-index="50" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">hr</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> sienna<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <h2><a name="t74"></a><a id="3_948"></a>3.内联样式</h2> <p>当样式只需要在元素上应用一次时可以使用内联样式，但是由于内联样式把表现和内容混在一起，所以不建议使用！</p> <pre data-index="51" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>内联样式不建议使用!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t75"></a><a id="4_954"></a>4.多重样式</h2> <p>如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。</p> <blockquote> <p><strong>内部样式表和外部样式表中存在重复的部分，内部样式表将取代外部样式表中的部分！</strong></p> </blockquote> <p><strong>外部样式表：</strong></p> <pre data-index="52" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h3 { color:red; font-size:12px; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><strong>内部样式表：</strong></p> <pre data-index="53" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h3 { font-size:20pt; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><strong>最终效果：</strong></p> <pre data-index="54" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h3 { color:red; font-size:20px; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <blockquote> <p><strong>颜色属性继承自外部样式表，字体大小属性将取代外部样式表中的部分。</strong></p> </blockquote> <h2><a name="t76"></a><a id="5_987"></a>5.多重样式的优先级</h2> <p><strong><font color="red">样式表</font>允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。</strong></p> <p><strong><mark>优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式</mark></strong></p> <hr> <h1><a name="t77"></a><a id="CSS__993"></a>五.CSS 背景</h1> <p><strong>CSS 背景属性用于定义HTML元素的背景。CSS背景有以下的效果：</strong></p> <h2><a name="t78"></a><a id="1_995"></a>1.背景颜色</h2> <p><strong><code>background-color</code> 属性定义了元素的背景颜色，在<code>body</code>选择器中使用！</strong></p> <pre data-index="55" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">body {background-color:grey;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> <p><strong>CSS中的颜色通常有以下三种定义方式：</strong></p> <ul><li><strong>十六进制 - 如：“#ff0000”</strong></li><li><strong>RGB - 如：“rgb(255,0,0)”</strong></li><li><strong>颜色名称 - 如：“red”</strong></li></ul> </blockquote> <hr> <h2><a name="t79"></a><a id="2_1010"></a>2.背景图像</h2> <p><strong>background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。</strong></p> <pre data-index="56" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">background-image: url('images/1.jpg');<span class="token comment"><!--HTML文档和图片文件不在同一个文件夹下面，使用相对路径--></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t80"></a><a id="3___1017"></a>3.背景图像 - 水平或垂直平铺</h2> <p><strong><code>background-image</code>属性默认会在页面的水平或者垂直方向平铺。但是有时候图片在水平和垂直方向平铺不能达到想要的效果，可以选择只在某一方向平铺。</strong></p> <h2><a name="t81"></a><a id="4__1019"></a>4.背景图像- 设置定位与不平铺</h2> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832464.png" alt="在这里插入图片描述"></p> <p><strong>为了让背景图片不影响文本的排版可以使用 <code>background-repeat</code>属性让图片不平铺，以达到预期的效果！</strong></p> <p><strong>同时可以通过<code>background-position</code>属性设置图片显示的位置，让文本达到最佳的显示效果！</strong></p> <pre data-index="57" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">body { background-image:url('images/pai.jpg'); background-repeat:no-repeat; background-position:right top;/*设置背景图像的起始位置。*/ } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832582.png" alt="在这里插入图片描述"></p> <h2><a name="t82"></a><a id="5__1038"></a>5.背景- 简写属性</h2> <p><strong>为了简化页面背景属性的代码，可以将这些属性合并在同一个属性中。背景颜色的简写属性为 <code>"background"</code>。</strong></p> <pre data-index="58" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">body {background:grey url('images/pai.jpg') no-repeat right top;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <hr> <h1><a name="t83"></a><a id="CSS_1046"></a>六.CSS文本</h1> <h2><a name="t84"></a><a id="1_1047"></a>1.文本颜色</h2> <p><strong>颜色属性用来设置文字的颜色。</strong></p> <pre data-index="59" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">body {color:red;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h2><a name="t85"></a><a id="2_1055"></a>2.文本的对齐方式</h2> <p><strong>文本排列属性是用来设置文本的水平对齐方式。</strong></p> <p><strong>文本的水平排列方式有居中，对齐到左，对齐到右，两端对其。</strong></p> <pre data-index="60" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">h1 {text-align:center;} p {text-align:justify;/*两端对齐*/} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <h2><a name="t86"></a><a id="3_1065"></a>3.文本修饰</h2> <p><strong><code>text-decoration</code> 属性用来设置或删除文本的装饰。</strong></p> <pre data-index="61" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">a {text-decoration:none;/*用来删除链接的下划线*/} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>同时，还可以使用<code>text-decoration</code> 属性来增强文章的阅读效果。</strong></p> <pre data-index="62" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span> overline<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">h3</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832649.png" alt="在这里插入图片描述"></p> <h2><a name="t87"></a><a id="4_1083"></a>4.文本转换</h2> <p><strong>文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。</strong></p> <pre data-index="63" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> p.uppercase</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-transform</span><span class="token punctuation">:</span>uppercase<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*大写*/</span> <span class="token selector">p.lowercase</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-transform</span><span class="token punctuation">:</span>lowercase<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*小写*/</span> <span class="token selector">p.capitalize</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-transform</span><span class="token punctuation">:</span>capitalize<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*首字母大写*/</span> </style> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092832734.png" alt="在这里插入图片描述"></p> <h2><a name="t88"></a><a id="5_1097"></a>5.文本缩进</h2> <p><strong>文本缩进属性是用来指定文本的第一行的缩进。</strong></p> <pre data-index="64" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-indent</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <hr> <h1><a name="t89"></a><a id="CSS_1105"></a>七.CSS文字</h1> <p><strong>CSS字体属性定义字体，加粗，大小，文字样式。</strong></p> <h2><a name="t90"></a><a id="1CSS_1107"></a>1.CSS字体类型</h2> <blockquote> <p><strong>在CSS中，有两种类型的字体系列名称：</strong></p> <ul><li><strong>通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）</strong></li><li><strong>特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）</strong></li></ul> </blockquote> <div class="table-box"><table><thead><tr><th>通用字体系列</th><th>说明</th><th>展示</th></tr></thead><tbody><tr><td>Serif</td><td>Serif字体中字符在行的末端拥有额外的装饰</td><td><img src="https://1000bd.com/contentImg/2022/07/21/092832839.png" alt="在这里插入图片描述"></td></tr><tr><td></td><td></td><td></td></tr><tr><td>Sans-serif</td><td>字体中字符在行的末端没有额外的装饰</td><td><img src="https://1000bd.com/contentImg/2022/07/21/092832917.png" alt="在这里插入图片描述"></td></tr><tr><td></td><td></td><td></td></tr><tr><td>Monospace</td><td>所有的等宽字符具有相同的宽度</td><td><img src="https://1000bd.com/contentImg/2022/07/21/092832991.png" alt="在这里插入图片描述"></td></tr><tr><td></td><td></td><td></td></tr></tbody></table></div> <h2><a name="t91"></a><a id="2_1123"></a>2.字体系列</h2> <p><strong>font-family 属性设置文本的字体系列。</strong></p> <blockquote> <p><strong><code>font-family</code> 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。</strong></p> </blockquote> <h2><a name="t92"></a><a id="3_1128"></a>3.字体样式</h2> <p><strong>我们可以通过字体样式设置正常或者斜体！</strong></p> <pre data-index="65" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p.normal {font-style:normal;} p.italic {font-style:italic;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833063.png" alt="在这里插入图片描述"></p> <h2><a name="t93"></a><a id="4_1138"></a>4.字体大小</h2> <p><strong><code>font-size</code> 属性设置文本的大小。</strong></p> <blockquote> <p><strong>字体大小的值可以是绝对或相对的大小。</strong></p> <p><strong>绝对大小：</strong></p> <ul><li>设置一个指定大小的文本</li><li>不允许用户在所有浏览器中改变文本大小</li><li>确定了输出的物理尺寸时绝对大小很有用</li></ul> <p><strong>相对大小：</strong></p> <ul><li>相对于周围的元素来设置大小</li><li>允许用户在浏览器中改变文字大小</li></ul> </blockquote> <h3><a name="t94"></a><a id="41_1153"></a>4.1设置字体的大小像素</h3> <p><strong>为了控制字体的大小，可以设置字体的大小像素。</strong></p> <pre data-index="66" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">p {font-size:14px;} <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <blockquote> <p><strong>可以通过缩放浏览器来调整字体的大小，但是实际调整的是页面的大小。</strong></p> </blockquote> <h3><a name="t95"></a><a id="42em_1162"></a>4.2用em来设置字体大小</h3> <p><strong>1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为<code>em=px/16=em。</code></strong></p> <pre data-index="67" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span>0.875em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 14px/16=0.875em */</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t96"></a><a id="43EM_1169"></a>4.3使用百分比和EM组合</h3> <p><strong>在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比。</strong></p> <pre data-index="68" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">body</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span><span class="token property">font-size</span><span class="token punctuation">:</span>0.875em<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <blockquote> <p><strong>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</strong></p> </blockquote> <hr> <h1><a name="t97"></a><a id="CSS_1179"></a>八.CSS链接</h1> <h2><a name="t98"></a><a id="1_1180"></a>1.链接样式</h2> <p><strong>不同的链接可以有不同的样式，链接的不同状态也可以有不同的样式。</strong></p> <blockquote> <p><strong>链接的四种状态：</strong></p> <ul><li><strong>a:link - 正常，未访问过的链接</strong></li><li><strong>a:visited - 用户已访问过的链接</strong></li><li><strong>a:hover - 当用户鼠标放在链接上时</strong></li><li><strong>a:active - 链接被点击的那一刻</strong></li></ul> </blockquote> <pre data-index="69" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">a:link</span> <span class="token punctuation">{<!-- --></span><span class="token property">color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 未访问链接*/</span> <span class="token selector">a:visited</span> <span class="token punctuation">{<!-- --></span><span class="token property">color</span><span class="token punctuation">:</span>greenyellow<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 已访问链接 */</span> <span class="token selector">a:hover</span> <span class="token punctuation">{<!-- --></span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 鼠标移动到链接上 */</span> <span class="token selector">a:active</span> <span class="token punctuation">{<!-- --></span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 鼠标点击时 */</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <blockquote> <p><strong>a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面。</strong></p> </blockquote> <h2><a name="t99"></a><a id="2_1200"></a>2.文本修饰</h2> <p><strong><code>text-decoration</code> 属性主要用于删除链接中的下划线：</strong></p> <pre data-index="70" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">a:link</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">a:visited</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">a:hover</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">a:active</span> <span class="token punctuation">{<!-- --></span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h2><a name="t100"></a><a id="3_1210"></a>3.背景颜色</h2> <p><strong>背景颜色属性指定链接背景色：</strong></p> <pre data-index="71" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">a:link</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span>#B2FF99<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 未访问链接 */</span> <span class="token selector">a:visited</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span>#FFFF85<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 已访问链接 */</span> <span class="token selector">a:hover</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span>#FF704D<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 鼠标移动到链接上 */</span> <span class="token selector">a:active</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span>#FF704D<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* 鼠标点击时 */</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <hr> <h1><a name="t101"></a><a id="CSS_1220"></a>九.CSS列表</h1> <p><strong>CSS中可以使用不同的列表项标记来实现列表。</strong></p> <h2><a name="t102"></a><a id="1_1222"></a>1.无序列表和有序列表</h2> <p><strong><code>list-style-type</code>属性指定列表项标记的类型。</strong></p> <pre data-index="72" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul.a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> circle<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul.b</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> square<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ol.c</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> decimal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ol.d</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> lower-alpha<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833255.png" alt="在这里插入图片描述"></p> <h2><a name="t103"></a><a id="2_1247"></a>2.标记为图像的列表</h2> <pre data-index="73" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/1.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833333.png" alt="在这里插入图片描述"></p> <h2><a name="t104"></a><a id="3_1258"></a>3.列表属性值简写</h2> <p><strong>在单个属性中可以指定所有的列表属性，但是指定时必须按照一定的顺序！</strong></p> <blockquote> <p><strong>例如按照以下顺序指定列表属性：</strong></p> <ul><li><strong>list-style-type</strong></li><li><strong>list-style-position</strong></li><li><strong>list-style-image</strong></li></ul> </blockquote> <pre data-index="74" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">ul { list-style:square url("images/3.png"); } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <blockquote> <p><strong><code>list-style-type: none;</code>设置列表类型为没有列表项标记！</strong></p> </blockquote> <h1><a name="t105"></a><a id="CSS_1276"></a>十.CSS表格</h1> <h2><a name="t106"></a><a id="1_1277"></a>1.表格边框</h2> <p><strong>使用<code>border</code>属性指定CSS表格的边框。</strong></p> <h2><a name="t107"></a><a id="2_1279"></a>2.折叠边框</h2> <p><strong><code>border-collapse</code> 属性设置表格的边框是否被折叠成一个单一的边框或隔开。</strong></p> <h2><a name="t108"></a><a id="3_1282"></a>3.表格宽度和高度</h2> <p><strong><code>Width</code>和<code>height</code>属性定义表格的宽度和高度。</strong></p> <h2><a name="t109"></a><a id="4_1284"></a>4.表格文字对齐</h2> <p><strong>水平对齐：</strong></p> <pre data-index="75" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">table, td, th</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid blue<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>25%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span>grey<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>white<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833413.png" alt="在这里插入图片描述"><br> <strong>垂直对齐：</strong></p> <pre data-index="76" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">td { height:50px; vertical-align:bottom; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833682.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>表格中的文字对齐方式分为水平对齐和垂直对齐：</strong></p> <ul><li><strong><code>text-align</code>属性设置水平对齐方式，向左，右，或中心。</strong></li><li><strong><code>vertical-align</code>属性设置垂直对齐方式，顶部，底部或中间。</strong></li></ul> </blockquote> <h2><a name="t110"></a><a id="5_1323"></a>5.表格填充</h2> <p><strong><code>td</code>和<code>th</code>元素的填充属性可以控制边框和表格内容之间的间距。</strong></p> <pre data-index="77" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">td { padding:15px; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833758.png" alt="在这里插入图片描述"></p> <h2><a name="t111"></a><a id="6_1338"></a>6.表格颜色</h2> <p><strong>我们可以指定表格边框的颜色，文本的颜色和背景颜色。</strong></p> <pre data-index="78" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">table, td, th</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">th</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span>grey<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833832.png" alt="在这里插入图片描述"></p> <hr> <h1><a name="t112"></a><a id="CSSfont_colorgreeBox_Modelfont_1359"></a>十一.CSS盒子模型(<font color="gree">Box Model</font>)</h1> <p><strong>所有HTML元素可以看作盒子！</strong></p> <h2><a name="t113"></a><a id="1CSS__1361"></a>1.CSS 盒子模型</h2> <p><strong>在CSS中，盒子模型用于设计和布局。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</strong><br> <img src="https://1000bd.com/contentImg/2022/07/21/092833916.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong><font color="red">说明：</font></strong></p> <ul><li><strong>Margin(外边距) - 清除边框外的区域，外边距是透明的。</strong></li><li><strong>Border(边框) - 围绕在内边距和内容外的边框。</strong></li><li><strong>Padding(内边距) - 清除内容周围的区域，内边距是透明的。</strong></li><li><strong>Content(内容) - 盒子的内容，显示文本和图像。</strong></li></ul> </blockquote> <h2><a name="t114"></a><a id="2_1372"></a>2.元素的宽度和高度</h2> <p><strong>完整大小的元素，必须包括宽度和高度，还必须包含内边距，边框和外边距。</strong></p> <pre data-index="79" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 25px solid blue<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092833993.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</strong><br> <strong>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</strong></p> </blockquote> <h1><a name="t115"></a><a id="CSSfont_colorgreeBorderfont_1388"></a>十二.CSS边框(<font color="gree">Border</font>)</h1> <p><strong>可以利用边框属性指定元素边框的样式和颜色。</strong></p> <h2><a name="t116"></a><a id="1_1391"></a>1.边框样式</h2> <p><strong><code>border-style</code>属性用来定义边框的样式。</strong></p> <pre data-index="80" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p.none</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.dotted</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.dashed</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>dashed<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.solid</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.double</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>double<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.groove</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>groove<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.ridge</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>ridge<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.inset</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>inset<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.outset</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>outset<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.hidden</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">p.mix</span> <span class="token punctuation">{<!-- --></span><span class="token property">border-style</span><span class="token punctuation">:</span> dotted dashed solid double<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834087.png" alt="在这里插入图片描述"></p> <h2><a name="t117"></a><a id="2_1413"></a>2.边框宽度</h2> <p><strong><code>border-width</code> 属性用来指定边框宽度。</strong></p> <pre data-index="81" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p.one</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p.two</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>medium<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p.three</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834173.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>为边框指定宽度有两种方法：</strong></p> <ul><li><strong>指定长度值</strong></li><li><strong>使用 关键字，分别是 <code>thick</code> 、<code>medium</code>（默认值） 和 <code>thin</code>，CSS 没有定义 3 个关键字的具体宽度</strong></li></ul> <hr> <p><strong>“<code>border-width</code>” 属性必须和border-style一起使用，否则不起作用！</strong></p> </blockquote> <h2><a name="t118"></a><a id="3_1444"></a>3.边框颜色</h2> <p><strong><code>border-color</code>属性用于设置边框的颜色。设置颜色的方法和HTML类似。</strong></p> <pre data-index="82" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p.one</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p.two</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834252.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong><code>border-color</code>属性必须和border-style一起使用，否则不起作用。</strong></p> </blockquote> <h2><a name="t119"></a><a id="4_1464"></a>4.单独设置各边</h2> <p><strong>在CSS中，可以把边框各边设置成不同的样式和颜色。</strong></p> <pre data-index="83" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-top-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token property">border-top-color</span><span class="token punctuation">:</span>red <span class="token punctuation">;</span> <span class="token property">border-right-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span> <span class="token property">border-bottom-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span> <span class="token property">border-left-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834325.png" alt="在这里插入图片描述"></p> <h2><a name="t120"></a><a id="5_1481"></a>5.属性简写</h2> <p><strong>为了使用方便可以在<code>border</code>一个属性中设置边框。</strong></p> <pre data-index="84" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">border</span><span class="token punctuation">:</span>5px solid red<span class="token punctuation">;</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <hr> <h1><a name="t121"></a><a id="CSSfont_colorgreeoutlinefont_1488"></a>十三.CSS轮廓(<font color="gree">outline</font>)</h1> <p><strong>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。</strong></p> <blockquote> <p><strong>常用的outline属性：</strong></p> <ul><li><strong>outline-color:设置轮廓的颜色</strong></li><li><strong>outline-style:设置轮廓的样式</strong></li><li><strong>outline-width:设置轮廓的宽度</strong></li></ul> </blockquote> <pre data-index="85" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">p</span><span class="token punctuation">{<!-- --></span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span>red solid 3px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834410.png" alt="在这里插入图片描述"></p> <hr> <h1><a name="t122"></a><a id="CSSfont_colorgreemarginfont_1509"></a>十四.CSS外边距(<font color="gree">margin</font>)</h1> <h2><a name="t123"></a><a id="1CSS_1510"></a>1.CSS外边距的使用</h2> <p><strong><code>margin</code>外边距属性定义了元素周围的空间。</strong><br> <img src="https://1000bd.com/contentImg/2022/07/21/092834486.png" alt="在这里插入图片描述"></p> <pre data-index="86" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p.margin</span> <span class="token punctuation">{<!-- --></span> <span class="token property">margin-top</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <blockquote> <p><strong>外边框属性可能的值：</strong></p> <ul><li><strong><code>auto</code>:设置浏览器边距，依赖于浏览器</strong></li><li><strong><code>length</code>:定义一个固定的长度</strong></li><li><strong><code>%</code>:定义一个百分比的外边距</strong></li></ul> </blockquote> <h2><a name="t124"></a><a id="2CSS_1529"></a>2.CSS外边距属性简写</h2> <p><strong>为了使用方便，可以使用一个margin属性指定所有的外边距。</strong></p> <p><strong>margin属性可以有一到四个值，定义的内容稍有不同：</strong></p> <pre data-index="87" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin</span><span class="token punctuation">:</span>25px 50px 30px 60px<span class="token punctuation">;</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上边距为25</li><li>右边距为50</li><li>下边距为30</li><li>左边距为60</li></ul> <pre data-index="88" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin</span><span class="token punctuation">:</span>25px 50px 30px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上边距为25</li><li>左右边距为50</li><li>下边距为30</li></ul> <pre data-index="89" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin</span><span class="token punctuation">:</span>25px 50px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上下边距为25</li><li>左右边距为50</li></ul> <pre data-index="90" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">margin</span><span class="token punctuation">:</span>25px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>四个边距都是25</li></ul> <hr> <h1><a name="t125"></a><a id="CSSfont_colorgreepaddingfont_1566"></a>十五.CSS填充(<font color="gree">padding</font>)</h1> <h2><a name="t126"></a><a id="1CSS_1567"></a>1.CSS填充的使用</h2> <p><strong>CSS <code>padding</code>（填充）属性定义元素边框与元素内容之间的空间，即上下左右的内边距。</strong></p> <pre data-index="91" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p.padding</span> <span class="token punctuation">{<!-- --></span> <span class="token property">padding-top</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <blockquote> <p><strong>填充属性可能的值：</strong></p> <ul><li><strong>length:定义一个固定的填充</strong></li><li><strong>%:使用百分比值定义一个填充</strong></li></ul> </blockquote> <h2><a name="t127"></a><a id="2CSS_1584"></a>2.CSS填充属性简写</h2> <p><strong>为了使用方便，可以在一个padding属性中指定所有的填充值。</strong></p> <p><strong>padding属性可以有一到四个值，定义内容稍有不同：</strong></p> <pre data-index="92" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">padding</span><span class="token punctuation">:</span>25px 50px 75px 100px<span class="token punctuation">;</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上填充为25</li><li>右填充为50</li><li>下填充为75</li><li>左填充为100</li></ul> <pre data-index="93" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">padding</span><span class="token punctuation">:</span>25px 50px 75px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上填充为25</li><li>左右填充为50</li><li>下填充为75</li></ul> <pre data-index="94" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token property">padding</span><span class="token punctuation">:</span>25px 50px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>上下填充为25</li><li>左右填充50</li></ul> <pre data-index="95" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">padding:25px <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <ul><li>四边的填充都为25</li></ul> <hr> <h1><a name="t128"></a><a id="CSS_1620"></a>十六.CSS分组和嵌套选择器</h1> <h2><a name="t129"></a><a id="1_1621"></a>1.分组选择器</h2> <p><strong>在样式表中有多相同样式的元素，为了减少代码，可以使用分组选择器！例如：</strong></p> <pre data-index="96" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1,h2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><strong>使用效果和以下代码相同：</strong></p> <pre data-index="97" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <h2><a name="t130"></a><a id="2_1647"></a>2.嵌套选择器</h2> <p>使用于选择器内部的选择器样式！例如：</p> <blockquote> <ul><li><strong><code>p{ }</code>: 为所有 p 元素指定一个样式。</strong></li><li><strong><code>.marked{ }</code>: 为所有 class=“marked” 的元素指定一个样式。</strong></li><li><strong><code>.marked p{ }</code>: 为所有 class=“marked” 元素内的 p 元素指定一个样式。</strong></li><li><strong><code>p.marked{ }</code>: 为所有 class=“marked” 的 p 元素指定一个样式。</strong></li></ul> </blockquote> <hr> <h1><a name="t131"></a><a id="CSSfont_colorgreeDimensionfont_1656"></a>十七.CSS尺寸(<font color="gree">Dimension</font>)</h1> <p><strong>CSS 尺寸 (<code>Dimension</code>) 属性用来控制元素的高度和宽度。</strong></p> <p><strong>CSS 尺寸 (Dimension)属性：</strong></p> <div class="table-box"><table><thead><tr><th>属性</th><th>功能</th></tr></thead><tbody><tr><td>height</td><td>设置元素的高度。</td></tr><tr><td>line-height</td><td>设置行高。</td></tr><tr><td>max-height</td><td>设置元素的最大高度。</td></tr><tr><td>max-width</td><td>设置元素的最大宽度。</td></tr><tr><td>min-height</td><td>设置元素的最小高度。</td></tr><tr><td>min-width</td><td>设置元素的最小宽度。</td></tr><tr><td>width</td><td>设置元素的宽度。</td></tr></tbody></table></div> <hr> <h1><a name="t132"></a><a id="CSSfont_colorgreeDisplay_Visibilityfont_1673"></a>十八.CSS显示与可见性(<font color="gree">Display Visibility</font>)</h1> <p><strong><code>display</code>(显示)属性设置一个元素应如何显示，<code>visibility</code>(可见性)属性指定一个元素应可见还是隐藏。</strong></p> <h2><a name="t133"></a><a id="1_1675"></a>1.隐藏元素</h2> <p><strong>使用<code>display:none</code>或<code>visibility:hidden</code>可以隐藏元素，但是两者效果不同，前者隐藏的元素不会占用任何空间，后者隐藏的元素仍占用和隐藏前相同的空间，仍然会影响布局！</strong></p> <h2><a name="t134"></a><a id="2_1677"></a>2.改变元素的显示</h2> <blockquote> <p><strong>块元素是一个元素，占用了全部宽度，在前后都是换行符。例如<code><h1></code>，<code><p></code>。内联元素只需要必要的宽度，不强制换行。例如<code><span></code>，<code><a></code>。</strong></p> </blockquote> <p><strong>可以通过改变块级元素和内联元素，使元素有一定的特定布局。</strong></p> <pre data-index="98" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">span</span> <span class="token punctuation">{<!-- --></span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span><span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>通过改变内联元素的属性使得显示为块级元素，前后带有换行符！</p> <hr> <h1><a name="t135"></a><a id="CSSfont_colorgreePositionfont_1690"></a>十九.CSS定位(<font color="gree">Position</font>)</h1> <p><strong><code>position</code> 属性指定了元素的定位类型，<code>position</code> 属性的五个值：</strong></p> <ul><li><strong>static</strong></li><li><strong>relative</strong></li><li><strong>fixed</strong></li><li><strong>absolute</strong></li><li><strong>sticky</strong></li></ul> <h2><a name="t136"></a><a id="1static_1698"></a>1.static定位</h2> <p><strong>HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。</strong></p> <pre data-index="99" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;">div.static { position: static; border: 3px solid red; } <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h2><a name="t137"></a><a id="2fixed_1707"></a>2.fixed定位</h2> <p><strong>元素的位置相对于浏览器窗口是固定位置。不会随着窗口滚动而移动。</strong></p> <pre data-index="100" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">p.pos_fixed</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <h2><a name="t138"></a><a id="3relative_1718"></a>3.relative定位</h2> <p><strong>元素的位置是相对于正常元素的位置，移动这个元素的位置，但是原本所占的空间不会改变！</strong></p> <pre data-index="101" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">h2.pos_left</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>-20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h2.pos_right</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <h2><a name="t139"></a><a id="4absolute_1733"></a>4.absolute定位</h2> <p><strong>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<code><html></code>。</strong></p> <pre data-index="102" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">h2</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <blockquote> <p><strong>该定位的元素不占据空间，因为它与文档流无关，可以与其它元素重合。</strong></p> </blockquote> <h2><a name="t140"></a><a id="5sticky__1747"></a>5.sticky 定位</h2> <p><strong>粘性定位的元素是依赖于用户的滚动，在 <code>position:relative</code> 与 <code>position:fixed</code> 定位之间切换。</strong></p> <pre data-index="103" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div.sticky</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #cae8ca<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #4CAF50<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834595.gif" alt="在这里插入图片描述"></p> <blockquote> <p><strong>指定 top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</strong></p> </blockquote> <h2><a name="t141"></a><a id="6_1764"></a>6.重叠的元素</h2> <p><strong>元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。<code>z-index</code>属性指定了一个元素的堆叠顺序(哪个元素应该放在前面，或后面。)</strong></p> <blockquote> <p><strong>如果两个定位元素重叠，没有指定<code>z - index</code>，最后定位在HTML代码中的元素将被显示在最前面。</strong></p> </blockquote> <hr> <h1><a name="t142"></a><a id="CSSfont_colorgreeOverflowfont_1771"></a>二十.CSS布局(<font color="gree">Overflow</font>)</h1> <p><strong>CSS的<code>overflow</code> 属性用于控制内容溢出元素框时显示的方式，在对应的元素区间内添加滚动条。<code>overflow</code> 属性只工作于指定高度的块元素上。</strong></p> <pre data-index="104" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834686.png" alt="在这里插入图片描述"></p> <pre data-index="105" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">#overflowTest</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834880.gif" alt="请添加图片描述"></p> <blockquote> <p><strong>overflow属性的所有值：</strong></p> <ul><li><strong>visible:默认值。内容不会被修剪，会呈现在元素框之外。</strong></li><li><strong>hidden:内容会被修剪，并且其余内容是不可见的。</strong></li><li><strong>scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</strong></li><li><strong>auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</strong></li><li><strong>inherit:规定应该从父元素继承 overflow 属性的值。</strong></li></ul> </blockquote> <hr> <h1><a name="t143"></a><a id="CSSfont_colorgreeFloatfont_1806"></a>二十一.CSS浮动(<font color="gree">Float</font>)</h1> <p><strong>CSS 的 <code>Float</code>（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往用于图像的布局。</strong></p> <h2><a name="t144"></a><a id="1_1808"></a>1.元素是怎么浮动？</h2> <ol><li><strong>元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。</strong></li><li><strong>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</strong></li><li><strong>浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它。</strong></li></ol> <pre data-index="106" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092834996.png" alt="在这里插入图片描述"></p> <h2><a name="t145"></a><a id="2_1827"></a>2.彼此相邻的浮动元素</h2> <p><strong>当几个浮动的元素放在一起，如果有空间的话，它们将彼此相邻。</strong></p> <p><strong>左浮动：</strong></p> <pre data-index="107" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.images</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*css的样式会优先于标签的属性。*/</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092835200.png" alt="在这里插入图片描述"><br> <strong>右浮动：</strong></p> <pre data-index="108" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.images</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092835386.png" alt="在这里插入图片描述"></p> <h2><a name="t146"></a><a id="3_1857"></a>3.清除浮动</h2> <p><strong>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 <code>clear</code> 属性。</strong><br> <strong><code>clear</code> 属性指定元素两侧不能出现浮动元素。</strong></p> <p><strong>没有使用<code>clear</code>属性的效果：</strong><br> <img src="https://1000bd.com/contentImg/2022/07/21/092835636.png" alt="在这里插入图片描述"><br> <strong>使用了<code>clear</code>属性的效果：</strong></p> <pre data-index="109" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.images</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.text_line</span> <span class="token punctuation">{<!-- --></span> <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092835918.png" alt="在这里插入图片描述"></p> <hr> <h1><a name="t147"></a><a id="CSS_1886"></a>二十二.CSS布局-对齐</h1> <h2><a name="t148"></a><a id="1_1887"></a>1.水平对齐</h2> <h3><a name="t149"></a><a id="11_1888"></a>1.1元素居中对齐</h3> <p><strong>使用<code>margin: auto;</code>水平对齐一个元素，同时设置元素的宽度防止它溢出到容器的边缘！</strong></p> <pre data-index="110" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.center</span> <span class="token punctuation">{<!-- --></span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 3px solid red<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092836168.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>元素通过指定宽度，将两边的空外边距平均分配，达到元素居中的效果！</strong></p> </blockquote> <h3><a name="t150"></a><a id="12_1905"></a>1.2文本居中对齐</h3> <p><strong>如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;</strong></p> <pre data-index="111" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.center</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 3px solid red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092836293.png" alt="在这里插入图片描述"></p> <h3><a name="t151"></a><a id="13_1917"></a>1.3图片居中对齐</h3> <p><strong>要让图片居中对齐，首先要把它放在块级元素中，然后使用<code>margin: auto;</code>。</strong></p> <pre data-index="112" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092836424.png" alt="在这里插入图片描述"></p> <h3><a name="t152"></a><a id="14_1929"></a>1.4使用定位方式实现左右对齐</h3> <p><strong><code>position: absolute;</code> 属性可以用来对齐元素。</strong></p> <pre data-index="113" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092836693.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>当使用 position 来对齐元素时, 通常 <code><body></code> 元素会设置 <code>margin</code> 和 <code>padding</code> 。 这样可以避免在不同的浏览器中出现可见的差异。同时，为了解决浏览器带来的差异，当使用 position 属性时，需要始终设置 !DOCTYPE 声明。</strong></p> </blockquote> <h3><a name="t153"></a><a id="15_1944"></a>1.5使用浮动方式实现左右对齐</h3> <p><strong>同样也可以使用flaot属性来对齐元素。</strong></p> <pre data-index="114" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">img</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092836943.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出！这个时候可以使用清除浮动来解决问题。</strong></p> </blockquote> <h2><a name="t154"></a><a id="2_1959"></a>2.垂直对齐</h2> <p><strong>可以通过设置内边距来实现垂直对齐！</strong></p> <pre data-index="115" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.center</span> <span class="token punctuation">{<!-- --></span> <span class="token property">padding</span><span class="token punctuation">:</span> 25px 0<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 3px solid red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092837084.png" alt="在这里插入图片描述"></p> <hr> <h1><a name="t155"></a><a id="CSS_1973"></a>二十三.CSS导航栏</h1> <h2><a name="t156"></a><a id="1HTML_1974"></a>1.HTML设置菜单项</h2> <p><strong>使用CSS可以美化HTML的菜单！导航栏类似于链接列表，所以使用<code><ul></code>属性来创建，效果如下：</strong></p> <pre data-index="116" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新晋作者<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>作者周榜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>作者总榜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>原力榜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092837413.png" alt="在这里插入图片描述"><br> <strong>对菜单进行美化，删除外边距和填充，同时去掉无序列表标记：</strong></p> <pre data-index="117" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092837587.png" alt="在这里插入图片描述"></p> <h2><a name="t157"></a><a id="2_1996"></a>2.垂直导航栏</h2> <p><strong>创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：</strong></p> <pre data-index="118" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>240<span class="token punctuation">,</span>240<span class="token punctuation">,</span>240<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 8px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 鼠标移动到选项上修改背景颜色 */</span> <span class="token selector">li a:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>144<span class="token punctuation">,</span>144<span class="token punctuation">,</span>144<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092837743.gif" alt="请添加图片描述"></p> <blockquote> <p><strong>使用说明：</strong></p> <ul><li><strong><code>display:block</code> - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。</strong></li></ul> </blockquote> <p><strong>在点击了选项后，我们可以添加 “active” 类来表示哪个选项被选中：</strong></p> <pre data-index="119" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">li a.active</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092837980.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>继续美化：</strong></p> <ul><li><strong>添加<code>text-align:center</code> 样式来让链接居中！</strong></li><li><strong>在<code><ul></code>或者<code><li></code>上添加 <code>border</code> 属性来让导航栏有边框！</strong></li></ul> </blockquote> <pre data-index="120" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 8px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{<!-- --></span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li:last-child</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a.active</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a:hover:not(.active)</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>144<span class="token punctuation">,</span>144<span class="token punctuation">,</span>144<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838190.gif" alt="请添加图片描述"></p> <h2><a name="t158"></a><a id="3_2087"></a>3.水平导航栏</h2> <p>有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。如果要链接到具有相同的大小，则必须使用浮动的方法。</p> <h2><a name="t159"></a><a id="_2089"></a>内联列表项</h2> <pre data-index="121" class="prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span>inline<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838297.png" alt="在这里插入图片描述"></p> <h2><a name="t160"></a><a id="2_2107"></a>2.浮动列表项</h2> <p>使用内联列表项时，链接有不同的宽度，如果要使用相同的宽度，则需要使用浮动列表项。</p> <pre data-index="122" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#dddddd<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838402.png" alt="在这里插入图片描述"></p> <blockquote> <p><code>overflow:hidden</code> 添加到 <code>ul</code> 元素,以防止 <code>li</code> 元素列表的外出。</p> </blockquote> <h2><a name="t161"></a><a id="3_2133"></a>3.实例</h2> <p>创建一个水平导航条，在鼠标移动到选项后修改背景颜色。</p> <pre data-index="123" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>179<span class="token punctuation">,</span> 176<span class="token punctuation">,</span> 176<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a:hover</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>64<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 56<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838636.gif" alt="请添加图片描述"></p> <blockquote> <p>继续美化：在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中，并且添加分割线。</p> </blockquote> <pre data-index="124" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>179<span class="token punctuation">,</span> 176<span class="token punctuation">,</span> 176<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{<!-- --></span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">border-right</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li:last-child</span> <span class="token punctuation">{<!-- --></span> <span class="token property">border-right</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a:hover:not(.active)</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>64<span class="token punctuation">,</span> 56<span class="token punctuation">,</span> 56<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.active</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838824.png" alt="在这里插入图片描述"></p> <h2><a name="t162"></a><a id="4_2201"></a>4.固定导航栏</h2> <p><strong>可以设置页面的导航栏固定在头部或者底部：</strong></p> <pre data-index="125" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">ul</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092838980.gif" alt="请添加图片描述"></p> <hr> <h1><a name="t163"></a><a id="CSS_2215"></a>二十四.CSS下拉菜单</h1> <h2><a name="t164"></a><a id="1_2216"></a>1.基本下拉菜单</h2> <pre data-index="126" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.dropdown</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839246.gif" alt="请添加图片描述"></p> <h2><a name="t165"></a><a id="2_2237"></a>2.常用下拉菜单</h2> <pre data-index="127" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.dropbtn</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a:hover</span> <span class="token punctuation">{<!-- --></span><span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropbtn</span> <span class="token punctuation">{<!-- --></span> <span class="token property">background-color</span><span class="token punctuation">:</span> #3e8e41<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839386.gif" alt="请添加图片描述"></p> <hr> <h1><a name="t166"></a><a id="CSS_2283"></a>二十五.CSS提示工具</h1> <p><strong>提示工具在鼠标移动到指定元素后触发。</strong></p> <h2><a name="t167"></a><a id="1_2285"></a>1.基础提示框</h2> <pre data-index="128" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><style> <span class="token comment">/* Tooltip 容器 */</span> <span class="token selector">.tooltip</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px dotted black<span class="token punctuation">;</span> <span class="token comment">/* 悬停元素上显示点线 */</span> <span class="token punctuation">}</span> <span class="token comment">/* Tooltip 文本 */</span> <span class="token selector">.tooltip .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token comment">/* 定位 */</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 鼠标移动上去后显示提示框 */</span> <span class="token selector">.tooltip:hover .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839496.gif" alt="请添加图片描述"></p> <h2><a name="t168"></a><a id="2_2320"></a>2.定位提示工具</h2> <pre data-index="129" class="set-code-hide prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector"><style> .tooltip</span> <span class="token punctuation">{<!-- --></span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px dotted black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.tooltip .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span> <span class="token comment">/* 定位 */</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> -5px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 105%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.tooltip:hover .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/192342369.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839621.gif" alt="请添加图片描述"></p> <h2><a name="t169"></a><a id="3_2353"></a>3.添加箭头</h2> <pre data-index="130" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.tooltip .tooltiptext::after</span> <span class="token punctuation">{<!-- --></span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token comment">/* 提示工具底部 */</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -5px<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> black transparent transparent transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839746.gif" alt="请添加图片描述"></p> <h2><a name="t170"></a><a id="4_2370"></a>4.淡入效果</h2> <p><strong>我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:</strong></p> <pre data-index="131" class="prettyprint"><code class="prism language-css has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token selector">.tooltip .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> opacity 1s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.tooltip:hover .tooltiptext</span> <span class="token punctuation">{<!-- --></span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2022/07/21/092839996.gif" alt="请添加图片描述"></p> <hr> <h1><a name="t171"></a><a id="_2387"></a>二十六.总结</h1> <p><strong>我们在这里已经讲解了许多<font color="blue">HTML重要的标签功能以及使用</font>，同时我们已经<font color="blue">学会如何使用 CSS </font>来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距等技能，<font size="5" color="red">下一阶段我们将开始JavaScript的学习了！</font></strong></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/937793">为什么说 Apache APISIX 是最好的 API 网关？</a> <br /> <a href="/Article/Index/1487551">学习Android的第十三天</a> <br /> <a href="/Article/Index/1293693">Unity 鼠标拖拽旋转平面内2D物体 解决方案</a> <br /> <a href="/Article/Index/653444">青年领袖分论坛精彩回顾 | 第二届始祖数字化可持续发展峰会</a> <br /> <a href="/Article/Index/1767293">Mysql关闭严格模式</a> <br /> <a href="/Article/Index/742022">博世集团启动量子数字孪生计划</a> <br /> <a href="/Article/Index/1238123">MQ消息队列篇：三大MQ产品的必备面试种子题</a> <br /> <a href="/Article/Index/1556677">简单有效的评估大小鼠的认知能力、空间记忆和学习能力——大小鼠T迷宫和Y迷宫</a> <br /> <a href="/Article/Index/905254">数据结构与算法（五）排序算法篇</a> <br /> <a href="/Article/Index/629015">【.NET 6】多线程的几种打开方式和代码演示</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/zhangxia_/article/details/125573604 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
