前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天

P29 - P43

从此开始进入 CSS 的学习。前面都是 HTML 的学习。

CSS 的作用:美化。

HTML 只是规定了网页内容有哪些,在网页中显示的位置默认是从上到下显示,还带有默认效果,比如超链接有颜色有下划线,无序列表有小圆点。想要把这些内容变得更加漂亮,就需要 CSS。所以在制作网页时,既需要 HTML 又需要 CSS。

Day 3 主要学习基础选择器和文字控制属性。

基础选择器的作用就是找标签,想要美化内容就要先找到这个内容再去美化,就用选择器去找这个内容。

选择器是很多的,今天先从基础选择器开始学习。

文字控制属性是用来控制文字的外观,比如文字的颜色、大小等等。

在这里插入图片描述

CSS 初体验

用 CSS 美化内容其实就是给内容加样式而已。

CSS 有多种写法,比较容易上手的一种写法是直接将 CSS 放到 HTML 中,放到 head 标签里面,title 标签下面。

CSS 代码是给浏览器看的,浏览器解释翻译完了在网页上呈现给用户看。

既然是给浏览器看的,那么就要放到 head 标签里面,习惯上放到 title 标签下面。

现在要将 CSS 放到 HTML 内部,而 CSS 和 HTML 是两种语言,要想让 CSS 打入 HTML 内部,就需要在 HTML 的 head 标签内部,title 标签下部,添加 style 标签,在 style 标签内部去写 CSS 既可。

CSS 代码都是由选择器加大括号组成。选择器的作用是找目标标签,要美化谁就用选择器去找谁既可。

CSS 属性的写法是:

属性名:属性值;

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-初始css</title><style>/* 这里是CSS注释了,而不是HTML注释 *//* CSS 代码 *//* 选择器 {CSS 属性} *//* 属性名和属性值成对出现 → 键值对 */p {/* 文字颜色 */color: red;/* 文字大小,即字号 */font-size: 30px;}</style>
</head>
<body><p>初识 CSS</p>
</body>
</html>

效果:

在这里插入图片描述

CSS 引入方式

在这里插入图片描述

CSS 有三个常见的书写位置。

rel: relationship

href: hipertext reference

实际工作中,一般都是用外部样式表。

程序示例:

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-CSS引入方式</title><link rel="stylesheet" href="./my.css">
</head>
<body><p>这是 p 标签</p><!-- 行内写法 style = " CSS 属性" --><div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>

CSS 代码:

/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {color: red;
}

效果:

在这里插入图片描述

选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-标签选择器</title><style>/* 特点:选中同名标签设置相同的样式,说明无法差异化同名标签的样式 */p {color: blue;}</style>
</head>
<body><p>这是 p 标签。</p><p>111111</p><p>222222</p>
</body>
</html>

效果:

在这里插入图片描述

类选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04-类选择器</title><style>.red{color: red;}.size{font-size: 50px;}</style>
</head>
<body><p>11111</p><!-- 一个类选择器可以给多个标签使用 --><p class="red">22222</p><!-- 一个标签可以使用多个类名,class 属性值写多个类名,类名用空格隔开 --><div class="red size">3333333</div>
</body>
</html>

效果:

在这里插入图片描述

id 选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-id选择器</title><style>#red {color: red;}</style>
</head>
<body><div id="red">这是 div 标签。</div>
</body>
</html>

效果:

在这里插入图片描述

通配符选择器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06-通配符选择器</title><style>*{color: red;}</style>
</head>
<body><p>这是 p 标签。</p><div>这是 div 标签。</div><h1>这是 h1 标签。</h1>
</body>
</html>

效果:

在这里插入图片描述

小练习

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07-画盒子</title><style>.div1 {width: 100px;height: 100px;background-color: brown;}.div2 {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div>
</body>
</html>

效果:

在这里插入图片描述

文字控制属性

文字控制属性的作用是美化文字。

在这里插入图片描述

字体大小

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08-字体大小</title><style>/* 谷歌浏览器文字默认大小是16px */p {/* font-size 属性必须要有单位,否则属性不生效 */font-size: 30px;}</style>
</head>
<body><p>测试字体大小。</p><div>测试默认字体大小。</div>
</body>
</html>

效果:

在这里插入图片描述

调出浏览器的调试工具的方法:在网页任意位置,右键:

在这里插入图片描述

出现的这个面板叫做浏览器的调试工具:

在这里插入图片描述

点击左上角的这个小箭头,使其处于高亮状态:

在这里插入图片描述

将鼠标放置在想要查看格式的位置,不要点击,只需要将鼠标放在这个位置既可。

在这里插入图片描述

可以看出,文字大小确实是 16px。

字体粗细

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09-字体粗细</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>h3 标题</h3><div>div 标签</div>
</body>
</html>

效果:

在这里插入图片描述

字体倾斜

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10-字体倾斜</title><style>em{font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>em 标签。</em><div>div 标签。</div>
</body>
</html>

效果:

在这里插入图片描述

行高

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11-行高</title><style>p {/* line-height: 30px; */line-height: 2;}</style>
</head>
<body><p>一百五十名警察和侦探包围了他那位于顶层的藏身之处,这些警察在房顶上凿孔,他们试图用催泪瓦斯把克劳利——这位杀害警察的人——熏出来。接着警察把机关枪架设在周围的建筑物上,在超过一小时的时间内,这一处纽约市的高档住宅区之一,回响起啪啪的手枪声和嗒嗒嗒的机枪声。克劳利蜷缩在一个沙发后面不停地向警察射击,当时有上万激动的群众围观这一战斗场面。以前在纽约市的街道上从来没有上演过这样的一幕。</p>
</body>
</html>

效果:

在这里插入图片描述

在这里插入图片描述

行高按照定义,是一行文字的高度加上该行文字的上间距和该行文字的下间距,每一行文字的上间距都是相同的,每一行文字的下间距都是相同的,所以行高也等于一行文字的高度加上该行文字的下间距再加上该行文字的下一行文字的上间距,也就是一行文字的顶部到下一行文字的顶部,当然也等于一行文字的底部到下一行文字的底部

行高 - 垂直居中

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12-行高-垂直居中</title><style>div {height: 100px;background-color: skyblue;/* 注意:只能是单行文字垂直居中 *//* 如果是多行文字,只需要加行高,拉开两行文字之间的距离既可 */line-height: 100px;}</style>
</head>
<body><div>文字</div>
</body>
</html>

效果:

在这里插入图片描述

字体

在这里插入图片描述

无衬线字体:sans-serif

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13-字体族</title><style>div {font-family: 楷体;}</style>
</head>
<body><div>字体族</div>
</body>
</html>

效果:

在这里插入图片描述

font 复合属性

在这里插入图片描述

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>14-font属性</title><style>/* 文字倾斜、文字加粗、字体大小是 30px,行高 2 倍,楷体 */div {font: italic 700 30px/2 楷体;}</style>
</head>
<body><div>测试 font 属性</div>
</body>
</html>

效果:

在这里插入图片描述

文本缩进

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15-文本缩进</title><style>p {text-indent: 2em;font-size: 20px;}</style>
</head>
<body><p>推开丁仪那套崭新的三居室的房门,汪淼闻到了一股酒味,看到丁仪躺在沙发上,电视开着,他的双眼却望着天花板。汪淼四下打量了一下,看到房间还没怎么装修,也没什么家具和陈设,宽大的客厅显得很空,最显眼的是客厅一角摆放的一张台球桌。汪淼在浏览器的地址栏中输入那个很容易记住的游戏网址:www.threebody.com,网页上显示该游戏只支持V装具方式。汪淼想起了纳米中心的职工娱乐室里好像有一套V装具,就走出已经空荡荡的中心实验大厅,去值班室要了钥匙,在娱乐室中穿过一排台球桌和健身器材,在一台电脑旁找到了V装具,费了很大劲才把感应服穿上,然后戴上显示头盔,启动电脑。荒原依旧,但V装具感应服中的压缩机咝咝地启动了,汪淼感到一股逼人的寒气。前方出现了两个行走的人影,在曙光的背景前呈黑色的剪影。汪淼追了上去,他看到两人都是男性,披着破烂的长袍,外面还裹着一张肮脏的兽皮,都带着一把青铜时代那种又宽又短的剑,其中一人背着一只有他一半高的细长的木箱子。那人扭头看看汪淼,他的脸像那兽皮一样脏和皱,双眼却很有神,眸子映着曙光。“冷啊。”他说。</p>
</body>
</html>

效果:

在这里插入图片描述

文本对齐方式

在这里插入图片描述

text-align 这个属性调整的是内容的对齐方式,不影响标签的位置。即改变的文字内容的位置而不是改变了标签的位置。

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16-文本对齐方式</title><style>h1 {text-align: center;}</style>
</head>
<body><h1>标题文字</h1>
</body>
</html>

效果:

在这里插入图片描述

图片对齐方式

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>17-图片对齐方式</title><style>div {text-align: center;}</style>
</head>
<body><div><img src="./images/1.jpg" alt=""></div>
</body>
</html>

效果:

在这里插入图片描述

文本修饰线

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18-文本修饰线</title><style>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a 标签,去掉下划线</a><div>div 标签,添加下划线</div><p>p 标签,添加删除线</p><span>span 标签,添加顶划线</span>
</body>
</html>

效果:

在这里插入图片描述

color 文字颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>19-文字颜色</title><style>h1{color: red;}h2{color: rgb(0, 255, 0);}h3{/* 0 表示完全透明,1 表示完全不透明 */color: rgba(0, 255, 0, 0.5);}h4 {/* 6 位可以简写为 3 位,相同的两位可以只写一个 */color: #0000ff;/* 相当于 00f */}</style>
</head>
<body><h1>h1 标签</h1><h2>h2 标签</h2><h3>h3 标签</h3><h4>h4 标签</h4>
</body>
</html>

效果:

在这里插入图片描述

调试工具 - 谷歌浏览器

在这里插入图片描述

程序示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>20-调试工具</title><style>div {color: red;font-size: 40; /* 没有单位 px,是不起作用的 */}</style>
</head>
<body><div>调试文字</div>
</body>
</html>

效果:

在这里插入图片描述

在这里插入图片描述

上面部分是 HTML 代码,下面部分是作用在这部分 HTML 代码上的 CSS 代码。

将代码修改正确后,刷新网页。

在这里插入图片描述

在这里插入图片描述

综合案例一:新闻详情

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>21-综合案例 —— 新闻详情</title><style>h1{text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {text-align: center;}.color{color: #999;}.color2 {color: #333;}.indent {text-indent: 2em;}.size1{font-size: 14px}.size2{font-size: 18px}div {color: #999;font-size: 14px}.pic {text-align: center;}</style>
</head>
<body><h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1><p class="color size1">来源:央视网 | 2222年12月12日 12:12:12</p><!-- <div>来源:央视网 | 2222年12月12日 12:12:12</div> --><p class="indent size2 color2"><strong>央视网消息:</strong>眼下,湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成,玉米收割七成。湖北省通过大力推广新品种水稻,建设高标准农田等一系列措施,为秋粮稳产提供有力支撑。</p><p class="indent size2 color2">中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市,370万亩中稻已经收割四成以上。</p><div class="pic"><img src="./1.jpg" alt=""></div><p class="indent size2 color2">王化林说的新品种,是湖北省研发的杂交水稻“华夏香丝”,不仅产量高,还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内,像“华夏香丝”这样抗旱节水的品种还有20多个,这些水稻新品将在荆门全面推广,确保来年增产增收。</p><p class="indent size2 color2">此外,湖北还大力推进高标准农田建设。截至今年6月,已建成3980万亩高标准农田。目前,湖北全省仍有1800多万亩中稻正在有序收割中,预计10月中旬收割完毕。</p>
</body>
</html>

综合案例二:CSS 简介

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>22-综合案例二:CSS 简介</title><style>h1 {color: #333;}p {color: #444;text-indent: 2em;font-size: 14px;line-height: 30px;}a {color: #0069c2;}li {color: #444;font-size: 14px;line-height: 30px;}</style>
</head>
<body><h1>CSS(层叠样式表)</h1><p>层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 <a href="#">样式表</a> 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p><p><strong>CSS 是开放网络的核心语言之一,</strong>由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。</p><ul><li>CSS 介绍 如果你是 Web 开发的新手,请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li><li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程,它们覆盖了全部基础知识,能使你在 CSS 之路上从初出茅庐到游刃有余。</li><li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ,描述了 CSS 的各个属性与概念。</li></ul>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/367294.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MeEdu网校系统搜索功能问题处理

MeEdu通过 MeiliSearch 实现全文搜索服务。 一、下载 MeiliSearch 程序 https://github.com/meilisearch/MeiliSearch/releases/tag/v0.24.0 只能下载 v0.24.0 版本&#xff0c;其版本不支持 下载 meilisearch-linux-amd64就可以了 二、上传 MeiliSearch 三、启动命令如下…

华为云安全防护,九河云综合分解优劣势分析

随着全球化的发展&#xff0c;越来越多的企业开始寻求在国际市场上扩展业务&#xff0c;这一趋势被称为企业出海。然而&#xff0c;企业在海外扩张面临诸多隐患与安全挑战&#xff0c;其中因为地域的不同&#xff0c;在安全性方面与国内相比会变得薄弱&#xff0c;从而导致被黑…

antd+vue——实现table组件跨页多选,已选择数据禁止第二次重复选择

需求场景&#xff1a;点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中&#xff0c;再次点击【新增】&#xff0c;已经选择过的数据则置灰不让重复选择。 选择后&#xff0c;置灰 点击【确定】数据添加到页面中&#xff0c;可再次点击【新增】进行添加数据 …

FastGPT 手动部署错误:MongooseServerSelectionError: getaddrinfo EAI_AGAIN mongo

在运行 FastGPT 时&#xff0c;mongodb 报如下错误&#xff1a; MongooseServerSelectionError: getaddrinfo EAI_AGAIN mongo 这是因为 mongo 没有解析出来&#xff0c;在 hosts 文件中添加如下信息&#xff1a; 127.0.0.1 mongo 重新运行 FastGPT 即可。 参考链接&#xff…

基于web的产品管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于web的产品管理系统,java项目。 ecli…

被⽹络罪犯利⽤的5⼤ChatGPT越狱提⽰

⾃ChatGPT发布的近18个月以来&#xff0c;⽹络罪犯们已经能够利⽤⽣成式AI进⾏攻击。OpenAI在其内容政策中制定了限制措施&#xff0c;以阻⽌⽣成恶意内容。作为回应&#xff0c;攻击者们创建了⾃⼰的⽣成式AI平台&#xff0c;如 WormGPT和FraudGPT&#xff0c;并且他们还分享了…

Jmeter下载、安装及配置

1 Jmeter介绍 Jmeter是进行负载测试的工具&#xff0c;可以在任何支持Java虚拟机环境的平台上运行&#xff0c;比如Windows、Linux、Mac。 Jmeter模拟一组用户向目标服务器发送请求&#xff0c;并统计目标服务器的性能信息&#xff0c;比如CPU、memory usage。 2 Jmeter下载 …

应用密码学—(扩展)欧几里得、DES、RSA、SHA-1算法

1. 欧几里得算法 1.1 分析算法的实现原理 欧几里德&#xff08;Euclid&#xff09;算法&#xff0c;也既常说的“辗转相除法”&#xff0c;公式为gcd(m, n) { return gcd(n, m%n); }&#xff0c;对于任意两个正整数m、n&#xff0c;每次求的一个数字r m % n&#xff0c;然后把…

C语言快速学习笔记

学习网站&#xff1a;C 语言教程 | 菜鸟教程 (runoob.com)C 语言教程 | 菜鸟教程 (runoob.com)C 语言教程 | 菜鸟教程 (runoob.com) 这个网站知识完整&#xff0c;讲解清晰。 在线C语言编程工具&#xff1a;菜鸟教程在线编辑器 (runoob.com) 国外学习网站&#xff1a;C语言介…

难道 Java 已经过时了?

当一门技术已经存在许多年了&#xff0c;它可能会失去竞争力&#xff0c;而后黯然退场&#xff0c;默默地离开&#xff0c;这对大部分的人来说就已经算是过时了。 Java 于 1995 年正式上线&#xff0c;至今已经走过了 27 个年头&#xff0c;在众多编程技术里算是年龄比较大的语…

【C++】开源:量化金融计算库QuantLib配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍量化交易库QuantLib配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#…

【高中数学/基本不等式】已知:a,b皆为正实数,且3a+2b=10 求:3a开方+2b开方的最大值?

【题目】 已知&#xff1a;a,b皆为正实数&#xff0c;且3a2b10 求&#xff1a;3a开方2b开方的最大值&#xff1f; 【解答】 解法一&#xff1a;&#xff08;基本不等式&#xff09; 原式^23a2*根号下(3a*2b)2b102*根号下(3a*2b)<103a2b101020 答&#xff1a;3a开方2b…

[漏洞复现] MetInfo5.0.4文件包含漏洞

[漏洞复现] MetInfo5.0.4文件包含漏洞 MetInfo5.0.4 漏洞代码审计 漏洞出现在about/index.php中&#xff0c;因为利用了动态地址&#xff0c;所以存在漏洞。 漏洞检查语句&#xff08;&#xff01;192.168.109.100是我的服务器ip&#xff0c;需要换成自己的&#xff09;&…

双曲方程初值问题的差分逼近(迎风格式)

稳定性: 数值例子 例一 例二 代码 % function chap4_hyperbolic_1st0rder_1D % test the upwind scheme for 1D hyperbolic equation % u_t + a*u_x = 0,0<x<L,O<t<T, % u(x,0) = |x-1|,0<X<L, % u(0,t) = 1% foundate = 2015-4-22’; % chgedate = 202…

SpringBoot 如何处理跨域请求?你说的出几种方法?

引言&#xff1a;在现代的Web开发中&#xff0c;跨域请求&#xff08;Cross-Origin Resource Sharing&#xff0c;CORS&#xff09;是一个常见的挑战。随着前后端分离架构的流行&#xff0c;前端应用通常运行在一个与后端 API 不同的域名或端口上&#xff0c;这就导致了浏览器的…

方法的用法

一.简介 目前为止我给出的所有的案例都是将代码放在main方法中&#xff0c;就会产生一些问题&#xff1a; 代码冗长&#xff0c;不利于维护变量过多&#xff0c;想不出那么多的变量名没有重用性 那么该如何解决呢&#xff1f; 我们可以编写功能性的代码块&#xff0c;来被ma…

华为DCN之:SDN和NFV

1. SDN概述 1.1 SDN的起源 SDN&#xff08;Software Defined Network&#xff09;即软件定义网络。是由斯坦福大学Clean Slate研究组提出的一种新型网络创新架构。其核心理念通过将网络设备控制平面与数据平面分离&#xff0c;从而实现了网络控制平面的集中控制&#xff0c;为…

【STM32 RTC实时时钟如何配置!超详细的解析和超简单的配置,附上寄存器操作】

STM32 里面RTC模块和时钟配置系统(RCC_BDCR寄存器)处于后备区域&#xff0c;即在系统复位或从待机模式唤醒后&#xff0c;RTC的设置和时间维持不变。因为系统对后备寄存器和RTC相关寄存器有写保护&#xff0c;所以如果想要对后备寄存器和RTC进行访问&#xff0c;则需要通过操作…

PHP校园论坛-计算机毕业设计源码08586

摘 要 本项目旨在基于PHP技术设计与实现一个校园论坛系统&#xff0c;以提供一个功能丰富、用户友好的交流平台。该论坛系统将包括用户注册与登录、帖子发布与回复、个人信息管理等基本功能&#xff0c;并结合社交化特点&#xff0c;增强用户之间的互动性。通过利用PHP语言及其…

14-15 为什么我们现在对阅读如此难以接受

写出来感觉很奇怪&#xff0c;但最近我感觉自己失去了阅读能力。长篇文本对我来说尤其具有挑战性。句子很难读完。更别提章节了。章节有很多段落&#xff0c;而段落又由许多句子组成。 啊。 即使在极少数情况下&#xff0c;我读完了一章&#xff0c;下一页上已经有另一章等着…