Html5+Css3学习笔记
Html5 + CSS3
一、概念
1.什么是html5
html: Hyper Text Markup Language ( 超文本标记语言)
文本:记事本
超文本: 文字、图片、音频、视频、动画等等(网页)
html语言经过浏览器的编译显示成超文本
开发者使用5种浏览器(拥有不同的内核)
edge,谷歌,firefox,safari, 欧朋浏览器
国内目前的浏览器用的还是google的内核
谷歌性能最好,v8引擎,解析速度高
2.什么是css3
css: Cascading Style Sheet ( 级联样式表)
作用:美化网页
3.w3c标准
w3c: World Wide Web Consortium (万维网联盟)
成立于1994 年,web技术领域最权威最具有影响力的国际中立性技术标准机构
官网:https://www.w3.org/
W3C标准包括:
- 结构化标准化语言(HTML、XML)
- 表现标准语言(css)
- 行为标准(javaScript — DOM、ECMAScript)
4.前端学什么?
- 结构化标准化语言(HTML、XML)骨架
- 表现标准语言(css)皮囊
- 行为标准(javaScript — DOM、ECMAScript)动画 交互
二、开发工具
VSCode官网
三、html和css的语法
1.基本语法
1.1html的语法
在vscode 直接打html就会自动给出基本格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
1.2html的标签
1. 标签的基本结构
- HTML标签通常由尖括号
<
和>
包围的关键词构成,如<html>
。 - 大多数HTML标签是成对出现的,称为双标签。例如,
<html>
和</html>
分别作为HTML文档的开始和结束标签。第一个标签是开始标签,第二个标签是结束标签,它们之间的内容构成了标签的主体。 - 有些特殊的标签是单个标签,称为单标签或自闭合标签,例如
<br />
用于换行,它不需要结束标签。
2. 标签的分类
HTML标签可以根据其功能分为不同的类型,包括但不限于以下几种:
- 结构标签:用于定义HTML文档的整体结构,如
<html>
、<head>
、<body>
等。 - 文本格式化标签:用于改变文本的显示方式,如
<h1>
到<h6>
用于定义六级标题,<p>
用于定义段落,<br />
用于换行等。 - 链接标签:用于创建超链接,如
<a href="URL">链接文本</a>
。 - 图像标签:用于在HTML页面中嵌入图像,如
<img src="图像URL" alt="图像描述" />
。 - 列表标签:用于创建列表,包括无序列表
<ul>
和有序列表<ol>
,以及列表项<li>
。 - 表格标签:用于创建表格,包括
<table>
、<tr>
(表格行)、<th>
(表头单元格)、<td>
(表格单元格)等。 - 表单标签:用于创建表单,收集用户输入,包括
<form>
、<input>
、<textarea>
、<select>
等。 - 布局标签:如
<div>
和<span>
,用于布局和样式控制。<div>
是块级元素,通常用于布局;<span>
是行内元素,用于对文本的某部分进行样式控制。
1.3css的语法
选择器 {声明1;声明2;
}
如:
h1 {font-size: 50px;color: 'red'
}
1.4 入门代码
<!DOCTYPE html>
<html lang="en"> <!-- 设置语言为英语 -->
<head><meta charset="UTF-8"> <!-- 设置网页编码格式 UTF-8是国际编码,支持各种语言 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在手机上自适应 --> <title>02css基本语法</title><style>h1 {font-size: 50px; /*font:字体, font-size:字体大小, px为像素*/font-family: '宋体'; /*字体类型*/font-weight:bold; /*字体粗细 bold:就是600*/font-style:normal; /*italic:斜体*/color: #00f; /*颜色可以三种表示方式:英文 red、pink rgb(250,0,0) 十六进制: #000000两位表示,但是两位相同可以用一位简写 如#00f */}</style>
</head>
<body><h1>我爱中国</h1><h2>我爱中国</h2><h3>我爱中国</h3><h4>我爱中国</h4><h5>我爱中国</h5><h6>我爱中国</h6>我爱世界
</body>
</html>
经验:css的最后一条声明的“;”是可以不写的,但是W3C规范建议最后一条声明的结束也要把“;”写上
h1为标题标签
数字越大,字号越小,占据了一整行
html中的注释格式为
css中的注释格式为/* */
2.html种引入CSS样式
三种引入方式
- 行内样式
- 内部样式表
- 外部样式表
2.1 行内样式
样式写在标签里面
示例代码:
<h1 style="color: red;font-size: 50px;">行内样式</h1>
<h1 style="color: red;">行内样式</h1>
2.2 内部样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: red;}</style>
</head>
<body><h1>标题1</h1><h1>标题1</h1>
</html>
css语言写在style标签里,但还是在代码内部
- 优点
- 方便在同一个页面种修改样式
- 缺点
- 不利于多页面之间共享复用代码及维护,对内容于样式的分离不够彻底
2.3 外部样式表
css代码全部保存在扩展名为.css
的样式中
HTML文件引用扩展名为.css
样式表,有两种方式:
-
链接式
-
语法: <head><link href="css/style.css" rel="stylesheet" type="text/css" /> </head>href:文件路径 rel:使用外部样式表,固定写法stylesheet type:文件类型 (不是必须的)
-
案例: common.css存放以下css代码h1 {font-size: 200px;color: red; }---------------------------------------------------------------------------------------------<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05外部样式表-链接式</title><!-- 相对路径/绝对路径,推荐使用相对路径./ 表示当前文件夹 ../表示上一级文件夹 --><link rel="stylesheet" href="./css/common.css" /> </head> <body><h1>Hello 外部样式-链接式</h1> </body> </html>
-
-
导入式
-
# 语法: <head><style><!--@import url('css的地址')--></style> </head>
-
案例:<!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 type="text/css"><!-- @import url('./css/common.css'); --></style> </head> <body><h1>坤坤爱篮球</h1> </body> </html>
-
链接式和导入式的区别:
- 标签是属于XHTML,@import是属于css2.1(版本落后)
- 使用链接的css文件先加载到网页种,再进行编译显示。而@import导入的css文件,客户端先显示HTML结构,再把css文件加载到网页中。link不会因为网速慢,先加载出未经美化的超文本
- @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
现在基本不使用导入式
3.CSS样式优先级
遵从如下原则:
- 行内样式 > 内部样式表 > 外部样式表
- 就近原则
代码示例:
h1 {font-size: 50px;color: red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07css样式优先级</title><link rel="stylesheet" href="./css/style.css"> 外部演示表的样式<style> 内部样式表的样式h1 {color: blue;}h2 {color: red;}h2 {color: blue;}</style>
</head>
<body><h1 style="color: green;">北京欢迎你</h1> 行内样式表的样式<h2>武汉欢迎你</h2>
</body>
</html>
如果有多个相同的样式,最后一个会覆盖前面的,不相同的样式会叠加
4.CSS基本选择器
4.1 标签选择器
语法:
标签名 {属性:值;
}如:
h1 {font-size: 20px;
}
案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 16px;color: red;}</style>
</head>
<body><p>2024年6月份,全国居民消费价格同比上涨0.2%。其中,城市上涨0.2%,农村上涨0.4%;食品价格下降2.1%,非食品价格上涨0.8%;消费品价格下降0.1%,服务价格上涨0.7%。1—6月平均,全国居民消费价格比上年同期上涨0.1%。</p>
</body>
</html>
4.2 类选择器
语法:
<style>.类名 {属性:值;}
</style><标签名 class="类名"></标签名>
案例
<!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>.mycolor{color: blue;}.mysize {font-size: 50px;}</style>
</head>
<body><!-- 语法:如果有多个类选择器,可以在后面空格继续加 --><p class="mycolor mysize">我爱编程</p><font class="mycolor">Hello</font>
</body>
</html>
作用:可以多次使用
4.3 ID选择器
语法:
<style>#id选择器名称 {属性:值;}
</style><标签名 id="id选择器名称"></标签名>
案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不要以数字开头 */#first {font-size: 50px;}</style>
</head>
<body><p id="first">北京欢迎你</p>
</body>
</html>
- 标签选择器直接应用于html标签
- 类选择器,可以在页面中多次使用
- id选择器,在同一个页面中只能使用一次 。(实际上可以用多次,但是为了确保唯一性制定出来的规范)
4.4 优先级
ID选择器 > 类选择器 > 标签选择器
<!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>/* 类选择器 */.blueColor {color: blue;}/* 标签选择器 */p {color: green;}/* id选择器 */#colorPink{color: pink;}</style>
</head>
<body><p class="blueColor" id="colorPink">我爱编程</p>
</body>
</html>
5. CSS的高级选择器
- 层次选择器
- 结构伪类选择器
- 属性选择器
5.1 层次选择器
选择器 | 类型 | 功能描述 |
---|---|---|
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 |
E~F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
前两个可能有用
后代选择器案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p font {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><font>我爱编程</font>
</body>
</html>
子选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 子选择器 */p>span {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><p>我爱编程,<span>我爱html</span></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>Document</title><style>div+p{color: blue;}</style>
</head>
<body><div>我爱编程<p>我爱世界</p><span>我爱湖北</span></div><p>我爱世界</p><p>我爱世界22</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>Document</title><style>div~p {color: red;}</style>
</head>
<body><div>我爱中国 <p>我爱世界</p></div><p>我爱编程</p><p>我爱学习</p>
</body>
</html>
5.2 结构伪类选择器
E:first-child | 作为E的第一个子元素 |
---|---|
E:last-child | 作为最后一个子元素 |
E:nth-child(n) | 第n个子元素 |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
前三个够了
<!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>/*给第一个li设置颜色为红色*/ul li:first-child {color: red;}/*给li中的最后一个设置颜色为蓝色*/ul li:last-child {color: blue;}/*给中间第二个孩子设置颜色为绿色*/ul li:nth-child(2){color: green;}/*给第2个p设置字体大小为50px*/p:nth-child(2) {font-size: 50px;}</style>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
</html>
5.3 属性选择器
属性选择器 | 功能描述 |
---|---|
E[attr] | 选择匹配具有属性attr的E元素 |
E[attr=val] | 选择匹配具有属性attr的E元素,且属性为val |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任意字符串 |
E[attr*=val] | 只要包含了val的任意字符串 |
<!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>.demo a {width: 50px;height: 50px;}a[id] {background-color: yellow;}a[id=green] {background-color: green;}a[id=blue] {background-color: blue;}a[id=yellow] {background-color: yellow;}a[href^=http] {background-color: pink;}a[href$=cn] {background-color: black;}a[href*=ba] {font-size: 50px;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" target="_self" id="green">百度</a><a href="#">京东</a><a href="http://www.alibaba.cn">阿里</a><a href="https://www.thepaper.cn">澎湃</a></p></body>
</html>
四、总结
相关文章:

Html5+Css3学习笔记
Html5 CSS3 一、概念 1.什么是html5 html: Hyper Text Markup Language ( 超文本标记语言) 文本:记事本 超文本: 文字、图片、音频、视频、动画等等(网页) html语言经过浏览器的编译显示成超文本 开发者使用5种浏览器…...

WPF学习(2) -- 样式基础
一、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008&…...

独家揭秘!五大内网穿透神器,访问你的私有服务
本文精心筛选了五款炙手可热的内网穿透工具,它们各怀绝技,无论您是企业用户、独立开发者,还是技术探索者,这篇文章都物有所值,废话不多说,主角们即将上场。 目录 1. 巴比达 - 安全至上的企业护航者 2. 花…...

Ubuntu 编译和运行ZLMediaKit
摘要 本文描述了如何在Ubuntu上构建ZLMediaKIt项目源码,以及如何体验其WebRTC推流和播放功能。 实验环境 操作系统版本:Ubuntu 22.04.3 LTS gcc版本:11.4.0 g版本:11.4.0 依赖库安装 #让ZLMediaKit媒体服务器具备WebRTC流转发…...

基于JavaSpringBoot+Vue+uniapp微信小程序校园宿舍管理系统设计与实现
基于JavaSpringBootVueuniapp微信小程序实现校园宿舍管理系统设计与实现 目录 第一章 绪论 1.1 研究背景 1.2 研究现状 1.3 研究内容 第二章 相关技术介绍 2.1 Java语言 2.2 HTML网页技术 2.3 MySQL数据库 2.4 Springboot 框架介绍 2.5 VueJS介绍 2.6 ElementUI介绍…...

Hive的基本操作(创建与修改)
必备知识 数据类型 基本类型 类型写法字符char, varchar, string✔整数tinyint, smallint, int✔, bigint✔小数float, double, numeric(m,n), decimal(m,n)✔布尔值boolean✔时间date✔, timestamp✔ 复杂类型(集合类型) 1、数组:array<T> 面向用户提供…...

Linux开发讲课37--- ARM的22个常用概念
1. ARM中一些常见英文缩写解释 MSB:最高有效位; LSB:最低有效位; AHB:先进的高性能总线; VPB:连接片内外设功能的VLSI外设总线; EMC:外部存储器…...

7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)
7-1、2、3 IPFS介绍使用及浏览器交互(react区块链实战) 7-1 ipfs介绍7-2 IPFS-desktop使用7-3 reactipfs-api浏览器和ipfs交互 7-1 ipfs介绍 IPFS区块链上的文件系统 https://ipfs.io/ 这个网站本身是需要科学上网的 Ipfs是点对点的分布式系统 无限…...

CentOS 7 中出现 cannot open Packages database in /var/lib/rpm 错误
转载自:https://www.jianshu.com/p/423306f43e72 # 进入 rpmdb 所在目录 [roothostbase ~]# cd /var/lib/rpm [roothostbase rpm]# ls Basenames __db.001 __db.003 Group Name Packages Requirename Sigmd5 Conflictname __db.002 Dirnames Ins…...

【java深入学习第6章】深入解析Spring事件监听机制
在Spring框架中,事件监听机制是一个强大且灵活的功能,允许我们在应用程序中发布和监听事件。这种机制可以帮助我们实现松耦合的设计,使得不同模块之间的通信更加灵活和可维护。本文将详细介绍Spring的事件监听机制,并通过代码示例…...

Flask与Celery实现Python调度服务
文章目录 Flask与Celery实现Python调度服务一、前言1.组件2.场景说明3.环境 二、安装依赖1.安装Anaconda3.安装redis2.安装依赖包 三、具体实现1.目录结构2.业务流程3.配置文件4.Celery程序5.Flask程序6.测试脚本7.程序启动1)Windows开发调试2)Linux服务…...

Eureka应用场景和优势
Eureka是一款由Netflix开源的服务注册与发现框架,在微服务架构中扮演着至关重要的角色。以下是Eureka的应用场景和优势: Eureka的应用场景 Eureka主要应用于微服务架构中,特别是在大型、复杂的分布式系统中,用于管理和发现服务。…...

prompt第三讲-PromptTemplate
文章目录 前提回顾PromptTemplateprompt 模板定义以f-string渲染格式以mustache渲染格式以jinja2渲染格式直接实例化PromptTemplatePromptTemplate核心变量 prompt value生成invokeformat_prompt(不建议使用)format(不建议使用) batchstreamainvoke PromptTemplate核心方法part…...

卷积神经网络图像识别车辆类型
卷积神经网络图像识别车辆类型 1、图像 自行车: 汽车: 摩托车: 2、数据集目录 3、流程 1、获取数据,把图像转成矩阵,并随机划分训练集、测试集 2、把标签转为数值,将标签向量转换为二值矩阵 3、图像数据归一化,0-1之间的值 4、构造卷积神经网络 5、设置图像输入…...

【接口设计】用 Swagger 实现接口文档
用 Swagger 实现接口文档 1.配置 Swagger1.1 添加 Swagger 依赖1.2 创建 Swagger 配置类 2.编写接口文档 在项目开发中,一般都是由前后端工程师共同定义接口,编写接口文档,之后大家根据这个接口文档进行开发、维护。为了便于编写和维护稳定&a…...

TensorFlow系列:第四讲:MobileNetV2实战
一. 加载数据集 编写工具类,实现数据集的加载 import keras""" 加载数据集工具类 """class DatasetLoader:def __init__(self, path_url, image_size(224, 224), batch_size32, class_modecategorical):self.path_url path_urlself…...

Redis+Caffeine 实现两级缓存实战
RedisCaffeine 实现两级缓存 背景 事情的开始是这样的,前段时间接了个需求,给公司的商城官网提供一个查询预计送达时间的接口。接口很简单,根据请求传的城市仓库发货时间查询快递的预计送达时间。因为商城下单就会调用这个接口ÿ…...

SpringBoot:SpringBoot中如何实现对Http接口进行监控
一、前言 Spring Boot Actuator是Spring Boot提供的一个模块,用于监控和管理Spring Boot应用程序的运行时信息。它提供了一组监控端点(endpoints),用于获取应用程序的健康状态、性能指标、配置信息等,并支持通过 HTTP …...

STM32-I2C硬件外设
本博文建议与我上一篇I2C 通信协议共同理解 合成一套关于I2C软硬件体系 STM32内部集成了硬件I2C收发电路,可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能,减轻CPU的负担 特点: 多主机功能&#x…...

暑假第一次作业
第一步:给R1,R2,R3,R4配IP [R1-GigabitEthernet0/0/0]ip address 192.168.1.1 24 [R1-Serial4/0/0]ip address 15.0.0.1 24 [R2-GigabitEthernet0/0/0]ip address 192.168.2.1 24 [R2-Serial4/0/0]ip address 25.0.0.1 24 [R3-GigabitEthernet0/0/0]ip address 192.…...

【算法专题】快速排序
1. 颜色分类 75. 颜色分类 - 力扣(LeetCode) 依据题意,我们需要把只包含0、1、2的数组划分为三个部分,事实上,在我们前面学习过的【算法专题】双指针算法-CSDN博客中,有一道题叫做移动零,题目要…...

debian 12 PXE Server 批量部署系统
pxe server 前言 PXE(Preboot eXecution Environment,预启动执行环境)是一种网络启动协议,允许计算机通过网络启动而不是使用本地硬盘。PXE服务器是实现这一功能的服务器,它提供了启动镜像和引导加载程序,…...

【Pytorch】RNN for Image Classification
文章目录 1 RNN 的定义2 RNN 输入 input, h_03 RNN 输出 output, h_n4 多层5 小试牛刀 学习参考来自 pytorch中nn.RNN()总结RNN for Image Classification(RNN图片分类–MNIST数据集)pytorch使用-nn.RNNBuilding RNNs is Fun with PyTorch and Google Colab 1 RNN 的定义 nn.…...

基于Java的飞机大战游戏的设计与实现论文
点击下载源码 基于Java的飞机大战游戏的设计与实现 摘 要 现如今,随着智能手机的兴起与普及,加上4G(the 4th Generation mobile communication ,第四代移动通信技术)网络的深入,越来越多的IT行业开始向手机…...

初识影刀:EXCEL根据部门筛选低值易耗品
第一次知道这个办公自动化的软件还是在招聘网站上,了解之后发现对于办公中重复性的工作还是挺有帮助的,特别是那些操作非EXCEL的重复性工作,当然用在EXCEL上更加方便,有些操作比写VBA便捷。 下面就是一个了解基本操作后ÿ…...

nginx的四层负载均衡实战
目录 1 环境准备 1.1 mysql 部署 1.2 nginx 部署 1.3 关闭防火墙和selinux 2 nginx配置 2.1 修改nginx主配置文件 2.2 创建stream配置文件 2.3 重启nginx 3 测试四层代理是否轮循成功 3.1 远程链接通过代理服务器访问 3.2 动图演示 4 四层反向代理算法介绍 4.1 轮询࿰…...

中职网络安全B模块Cenots6.8数据库
任务环境说明: ✓ 服务器场景:CentOS6.8(开放链接) ✓ 用户名:root;密码:123456 进入虚拟机操作系统:CentOS 6.8,登陆数据库(用户名:root&#x…...

BGP笔记的基本概要
技术背景: 在只有IGP(诸如OSPF、IS-IS、RIP等协议,因为最初是被设计在一个单域中进行一个路由操纵,因此被统一称为Interior Gateway Protocol,内部网关协议)的时代,域间路由无法实现一个全局路由…...

【Redis】复制(Replica)
文章目录 一、复制是什么?二、 基本命令三、 配置(分为配置文件和命令配置)3.1 配置文件3.2 命令配置3.3 嵌套连接3.4 关闭从属关系 四、 复制原理五、 缺点 以下是本篇文章正文内容 一、复制是什么? 主从复制 masterÿ…...

封装了一个仿照抖音效果的iOS评论弹窗
需求背景 开发一个类似抖音评论弹窗交互效果的弹窗,支持滑动消失, 滑动查看评论 效果如下图 思路 创建一个视图,该视图上面放置一个tableView, 该视图上添加一个滑动手势,同时设置代理,实现代理方法 (BOOL)gestur…...