Nginx服务的主配置文件及配置举例

Nginx服务的主配置文件

    • 安装Nginx
    • 认识Nginx服务
      • 全局配置
      • I/O 事件配置
      • HTTP 配置
      • 日志格式设定
    • 访问状态统计配置
      • 查看Nginx已安装模块
      • 修改 nginx.conf 配置文件
      • 重启服务，访问测试
    • 基于授权的访问控制
      • 准备用户密码认证文件
      • 修改 nginx.conf 配置文件
      • 重启服务，访问测试
    • 基于客户端的访问控制
      • 访问控制规则
      • 示例
        • 修改 nginx.conf 配置文件
        • 重启服务，访问测试
      • 访问控制注意事项
    • Nginx虚拟主机
      • 准备工作
        • 为虚拟主机准备网页文档
      • 基于域名的 Nginx 虚拟主机
        • 为虚拟主机提供域名解析
        • 修改Nginx的配置文件
        • 重启服务，访问测试
      • 基于IP 的 Nginx 虚拟主机
        • 新增网卡配置
        • 修改Nginx的配置文件
        • 重启服务，访问测试
      • 基于端口的 Nginx 虚拟主机
        • 修改Nginx的配置文件
        • 重启服务，访问测试

安装Nginx

链接: 安装Nginx

安装Nginx服务请转移到上文博客

认识Nginx服务

  1. 全局块：全局配置，对全局生效。
  2. events块：配置影响 Nginx 服务器与用户的网络连接。
  3. http块：配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。
  4. server块：配置虚拟主机的相关参数，一个 http 块中可以有多个 server 块。
  5. location块：用于配置匹配的 uri 。
  6. upstream：配置后端服务器具体地址，负载均衡配置不可或缺的部分。

配置文件位置
/usr/local/nginx/conf/nginx.conf

全局配置

#user nobody; 					#运行用户，若编译时未指定则默认为 nobody
worker_processes 1; 			#工作进程数量，一般设置为和 CPU 核数一样。设置为auto，nginx将会自己获取这个数值
#error_log logs/error.log; 		#错误日志文件的位置
#pid logs/nginx.pid; 			#PID 文件的位置
worker_rlimit_nofile 65535;		#指定 worker 子进程可以打开的最大文件句柄数，默认为1024

在这里插入图片描述

默认全局配置

I/O 事件配置

2．I/O 事件配置
events {
    use epoll; 					#使用 epoll I/O模型，2.6及以上版本的系统内核，建议使用epoll模型以提高性能
    worker_connections 65535; 	#每个 worker 子进程能够处理的最大并发连接数
    multi_accept on;            #是否一次性将监听到的连接全接收进来，默认为off，关闭时一次接收一条连接
    accept_mutex on;            #默认为on，开启时表示以串行方式接入新连接，否则将通报给所有worker。这可能会浪费资源并产生不可预计的后果，例如惊群问题
}

#如提高每个进程的连接数还需执行“ulimit -HSn 65535”命令临时修改本地每个进程可以同时打开的最大文件数。
#在Linux平台上，在进行高并发TCP连接处理时，最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统为每个TCP连接都要创建一个socket句柄，每个socket句柄同时也是一个文件句柄)。
#可使用ulimit -a命令查看系统允许当前用户进程打开的文件数限制。
#epoll是Linux内核为处理大批句柄而作改进的poll，是Linux下多路复用IO接口select/poll的增强版本，它能显著的减少程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率。
#worker_processes的值和work_connections的值决定了最大并发数量，最大并发数计算方式为：worker_processesworker_connections。但在反向代理场景中计算方法不同，因为nginx既要维持和客户端的连接，又要维持和后端服务器的连接，因此处理一次连接要占用2个连接，所以最大并发数计算方式为：worker_processesworker_connections/2。

在这里插入图片描述

默认I/O 事件配置

HTTP 配置

http {
	##文件扩展名与文件类型映射表
    include       mime.types;
	##默认文件类型
    default_type  application/octet-stream;
	##日志格式设定
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
	##访问日志位置
    #access_log  logs/access.log  main;
	##开启高效的文件传输模式
    sendfile        on;
	##开启tcp_nopush和tcp_nodelay用于防止网络阻塞
    tcp_nopush     on;
    tcp_nodelay    on;
	##连接保持超时时间，单位是秒
    #keepalive_timeout  0;
    keepalive_timeout  65;
	##gzip模块设置，设置是否开启gzip压缩输出
    #gzip  on;
	
	##Web 服务的监听配置
	server {
		##监听地址及端口
		listen 80; 
		##站点域名，可以有多个，用空格隔开
		server_name www.kgc.com;
		##网页的默认字符集
		charset utf-8;
		##根目录配置
		location / {
			##网站根目录的位置/usr/local/nginx/html
			root html;
			##默认首页文件名
			index index.html index.php;
		}
		##内部错误的反馈页面
		error_page 500 502 503 504 /50x.html;
		##错误页面配置
		location = /50x.html {
			root html;
		}
	}
}

日志格式设定

r e m o t e a d d r 与 remote_addr与 remotea​ddr与http_x_forwarded_for用以记录客户端的ip地址；
$remote_user：用来记录客户端用户名称；
$time_local： 用来记录访问时间与时区；
$request： 用来记录请求的url与http协议；
$status： 用来记录请求状态；成功是200，
$body_bytes_sent ：记录发送给客户端文件主体内容大小；
$http_referer：用来记录从哪个页面链接访问过来的；
h t t p u s e r a g e n t ：记录客户浏览器的相关信息；通常 w e b 服务器放在反向代理的后面，这样就不能获取到客户的 I P 地址了，通过 http_user_agent：记录客户浏览器的相关信息； 通常web服务器放在反向代理的后面，这样就不能获取到客户的IP地址了，通过 httpu​sera​gent：记录客户浏览器的相关信息；通常web服务器放在反向代理的后面，这样就不能获取到客户的IP地址了，通过remote_add拿到的IP地址是反向代理服务器的iP地址。反向代理服务器在转发请求的http头信息中，可以增加x_forwarded_for信息，用以记录原有客户端的IP地址和原来客户端的请求的服务器地址。

location常见配置指令，root、alias、proxy_pass
root（根路径配置，可以写在 http、server、location 等配置中）：root /var/www/html
请求www.kgc.com/test/1.html，会返回文件/var/www/html/test/1.html

alias（别名配置，只能写在 location 中）：alias /var/www/html/ 注：使用 alias 末尾要添加 /
请求www.kgc.com/test/1.html，会返回文件/var/www/html/1.html

proxy_pass（反向代理配置）

在这里插入图片描述

默认HTTP事件配置

访问状态统计配置

查看Nginx已安装模块

查看已安装的 Nginx 是否包含HTTP_STUB_STATUS 模块

cat /opt/nginx-1.12.0/auto/options | grep YES     #可查看 nginx 已安装的所有模块

/usr/local/nginx/sbin/nginx -V 查看已安装的模块

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改 nginx.conf 配置文件

cd /usr/local/nginx/conf


cp nginx.conf nginx.conf.bak		#备份原来的配置文件


vim /usr/local/nginx/conf/nginx.conf


	http {
	......
		server {
			listen 80;
			server_name www.kgc.com;
			charset utf-8;
			location / {
				root html;
				index index.html index.php;
			}
			##添加 stub_status 配置##
			location /status { 					#访问位置为/status
				stub_status on; 				#打开状态统计功能
				access_log off; 				#关闭此位置的日志记录
			}
		}
	}

在这里插入图片描述
在这里插入图片描述

重启服务，访问测试

nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述
在这里插入图片描述

浏览器访问 http:///status

在这里插入图片描述

Active connections：表示当前的活动连接数，即当前与 Nginx 服务器建立的连接数。
server accepts handled requests ：表示已经处理的连接信息
三个数字依次表示服务器已接收的连接数；服务器成功处理的连接数；服务器累计处理的总请求数（在保持连接模式下，请求数量可能会大于连接数量）
Reading：表示当前正在从客户端读取数据的连接数。
Writing：表示当前正在向客户端写入数据的连接数。
Waiting：表示当前空闲并等待请求的连接数。

可 curl -Ls http://192.168.80.10/status 结合 awk与if 语句进行性能监控。

基于授权的访问控制

准备用户密码认证文件

yum install -y httpd-tools	#下载安装httpd-tools

htpasswd -c /usr/local/nginx/passwd.db wl	#创建文件并在文件内创建用户wl

chown nginx /usr/local/nginx/passwd.db	#更改文件拥有者

chmod 400 /usr/local/nginx/passwd.db	#更改用户访问权限

在这里插入图片描述
在这里插入图片描述

修改 nginx.conf 配置文件

vim /usr/local/nginx/conf/nginx.conf
####只对访问状态统计站点生效
	......
		server {
			location /status {
				......
				##添加认证配置##
				auth_basic "secret";				#设置密码提示框文字信息
				auth_basic_user_file /usr/local/nginx/passwd.db;
			}
		}

在这里插入图片描述
在这里插入图片描述

重启服务，访问测试

nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述
浏览器访问 http:///status
输入刚刚创建的用户和密码，才可以继续访问
在这里插入图片描述

如需要再次测试，请提前清楚浏览器访问数据

基于客户端的访问控制

访问控制规则

deny IP/IP 段：拒绝某个 IP 或 IP 段的客户端访问。
allow IP/IP 段：允许某个 IP 或 IP 段的客户端访问。
规则从上往下执行，如匹配则停止，不再往下匹配。

示例

除本机外其他地址均拒绝访问 “status” 站点

修改 nginx.conf 配置文件
vim /usr/local/nginx/conf/nginx.conf
	......
		server {
			location /status {
				......
				##添加控制规则##
				allow 192.168.80.200; 					#允许访问的客户端 IP
				deny all;								#拒绝其它IP客户端访问
		}
	}

在这里插入图片描述

重启服务，访问测试
nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述

  • 本机访问测试
    在这里插入图片描述
    可以访问
  • 其他端访问测试
    在这里插入图片描述
    无法访问

访问控制注意事项

  • 在 http{…}配置块（对所有站点生效）
  • server{…}配置块（对当前站点所有的访问路径生效）
  • location{…}配置块（只对当前站点指定的URL访问路径生效） 中添加配置

Nginx虚拟主机

准备工作

为虚拟主机准备网页文档
mkdir -p /var/www/html/wl	

echo "<h1>www.wl.com</h1>" > /var/www/html/wl/index.html

cat /var/www/html/wl/index.html

mkdir -p /var/www/html/tj

echo "<h1>www.tj.com</h1>" > /var/www/html/tj/index.html

cat /var/www/html/tj/index.html

在这里插入图片描述

基于域名的 Nginx 虚拟主机

为虚拟主机提供域名解析
echo "<IP> <域名1> <域名2>" >> /etc/hosts

在这里插入图片描述

修改Nginx的配置文件
vim /usr/local/nginx/conf/nginx.conf
......
http {
......
	server {
		listen 80;
		server_name www.tj.com;					#设置域名www.tj.com
		charset utf-8;
		access_log logs/www.tj.access.log; 		#设置日志名
		location / {
			root /var/www/html/tj;					#设置www.tj.com 的工作目录
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}
	
	server {
		listen 80;
		server_name www.wl.com;					#设置域名www.wl.com
		charset utf-8;
		access_log logs/www.wl.access.log; 
		location / {
			root /var/www/html/wl;
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}	
}

在这里插入图片描述

重启服务，访问测试
nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述
浏览器访问

  • http://www.tj.com
    在这里插入图片描述

  • http://www.wl.com
    在这里插入图片描述

基于IP 的 Nginx 虚拟主机

新增网卡配置

在这里插入图片描述

nmcli connection modify ens36 ipv4.addresses 10.190.33.50/24 ipv4.gateway 10.190.33.2

nmcli connection up ens36

在这里插入图片描述

修改Nginx的配置文件
......
http {
......
	server {
		listen <网卡1IP>:80;					#设置监听地址10.190.33.30
		server_name www.tj.com;
		charset utf-8;
		access_log logs/www.tj.access.log; 
		location / {
			root /var/www/html/tj;
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}
	
	server {
		listen <网卡2IP>:80;					#设置监听地址10.190.33.50
		server_name www.wl.com;
		charset utf-8;
		access_log logs/www.wl.access.log; 
		location / {
			root /var/www/html/wl;
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}	
}

在这里插入图片描述

重启服务，访问测试
nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述
浏览器访问

  • "IP1"访问
    在这里插入图片描述

  • “IP2”访问

基于端口的 Nginx 虚拟主机

修改Nginx的配置文件
......
http {
......
	server {
		listen 10.190.33.30:8014;					#设置监听 8014 端口
		server_name www.tj.com;
		charset utf-8;
		access_log logs/www.tj.access.log; 
		location / {
			root /var/www/html/tj;
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}
	
	server {
		listen 10.190.33.30:8888;					#设置监听 8888 端口
		server_name www.wl.com;
		charset utf-8;
		access_log logs/www.wl.access.log; 
		location / {
			root /var/www/html/wl;
			index index.html index.php;
		}
		error_page 500 502 503 504 /50x.html;
		location = 50x.html{
			root html;
		}
	}	
}

在这里插入图片描述

重启服务，访问测试
nginx -t		#检查配置文件是否配置正确
systemctl restart nginx

在这里插入图片描述
浏览器访问

  • 8014端口访问
    在这里插入图片描述

  • 8888端口访问
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Xcode下载安装

Xcode下载安装

1.Xcode可用版本判断&#xff1a; 2.Xcode下载安装&#xff1a; 方案1:AppStore 下载更新 若方案1失败则 方案2:指定版本Xcode包下载解压安装 苹果下载 3.Xcode命令行工具插件安装 xcode-select --install 备注&#xff1a; xcode_x.x.x.xip(压缩包存在时效性(使用前24h/…
阅读更多...
【目录扫描】feroxbuster v2.10.2 字典整合版

【目录扫描】feroxbuster v2.10.2 字典整合版

# 简介 Feroxbuster是一款强大的目录扫描工具&#xff0c;Feroxbuster的主要功能是基于字典的目录扫描&#xff0c;并且默认使用Seclists字典进行使用&#xff01;并且具有快速和高效的特点&#xff0c;采用了多线程的技术来加快扫描速度。还支持暂停交互式设置等&#xff01;…
阅读更多...
从一个猜数游戏开始

从一个猜数游戏开始

标题 一、从源码中学习1.1 源码1.2 运行结果 二、 导入一个trait三、重要源码分析 一、从源码中学习 1.1 源码 一个简单的猜数大小游戏&#xff0c;不集的输入&#xff0c;直到猜测正确时退出。 use rand::Rng; use std::cmp::Ordering; use std::io;fn main() {let secret_…
阅读更多...
解锁自动化文档转换：Python-Markdown的魔法

解锁自动化文档转换：Python-Markdown的魔法

文章目录 解锁自动化文档转换&#xff1a;Python-Markdown的魔法背景Python-Markdown是什么&#xff1f;如何安装Python-Markdown&#xff1f;Python-Markdown库函数使用方法场景应用示例常见问题与解决方案总结 解锁自动化文档转换&#xff1a;Python-Markdown的魔法 背景 在…
阅读更多...
【Leetcode每日一题】 动态规划 - 简单多状态 dp 问题 - 买卖股票的最佳时机含冷冻期（难度⭐⭐）（79）

【Leetcode每日一题】 动态规划 - 简单多状态 dp 问题 - 买卖股票的最佳时机含冷冻期（难度⭐⭐）（79）

1. 题目解析 题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 二、算法思路 1. 状态表示 dp[i][0]&#xff1a;表示第 i 天结束后&#xff0c;处于「买入」状态…
阅读更多...
总结2024.6.2

总结2024.6.2

最近&#xff0c;还没受到offer&#xff0c;找工作找到自闭。在找工作的过程中&#xff0c;也听到一些面试官问我的职业生涯规划。这也让我陷入了沉思。自从考研结束后&#xff0c;都是被这个社会推着走的。我当初也想过自己要从事什么工作&#xff0c;不过&#xff0c;后面还是…
阅读更多...
Mysql常见问题总结

Mysql常见问题总结

1、MySQL初始化报错 mysqld --initialize --usermysql --console 2024-06-02T15:52:22.645557Z 0 [System] [MY-013169] [Server] D:\installSoft\mysql-8.0.21-winx64\bin\mysqld.exe (mysqld 8.0.21) initializing of server in progress as process 8980 2024-06-02T15:52:2…
阅读更多...
向量叉乘的方向

向量叉乘的方向

向量叉乘的方向 最近在百度上看到这样一个帖子&#xff1a; 可以根据这个判断是顺时针还是逆时针的 ab的方向&#xff1a;四指由a开始&#xff0c;指向b&#xff0c;拇指的指向就是ab的方向&#xff0c;垂直于a和b所在的平面&#xff1b; ba的方向&#xff1a;四指由b开始&a…
阅读更多...
驾校-短视频营销招生精品课：抖音推广技巧，抖音短视频招生(41节课)

驾校-短视频营销招生精品课：抖音推广技巧，抖音短视频招生(41节课)

课程下载&#xff1a;驾校-短视频营销招生精品课&#xff1a;抖音推广技巧&#xff0c;抖音短视频招生(41节课)-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 课程目录 [1]-第1课驾校为什么要全力做好短视频营销.mp4 …
阅读更多...
Gorm入门

Gorm入门

Gorm入门 声明&#xff1a;本博客为看李文周大佬gorm入门视频笔记 【GORM简明教程】关于GORM你看这一个就够了_哔哩哔哩_bilibili 我的代码仓库&#xff1a;6月/Gorm 沉着冷静/2023 - 码云 - 开源中国 (gitee.com) gorm介绍 安装库 go get -u github.com/jinzhu/gormgo ge…
阅读更多...
拼图游戏完整思路（全代码演示）

拼图游戏完整思路（全代码演示）

主界面 小练习1&#xff1a; 一、三个界面的设置1&#xff1a;创建窗体 1、将三个主界面分开为三个类&#xff0c;每个类都去继承JFrame这个类&#xff0c;使得每个类都可以使用创建页面功能 2、对每个类进行空参构造&#xff0c;在空参构造里面进行窗体属性的赋值 3、创建一个…
阅读更多...
JavaScript基础(十一)

JavaScript基础(十一)

String对象的方法 上一次说了String&#xff0c;那也少不了方法。 length 字符串长度 charAt(a) 返回指定位置的字符&#xff0c;(这里a代表下标&#xff0c;它返回的就是下标a对应的字符) concat(b) 连接字符串&#xff0c;b是被合并的对象名&#xff0c;和加号拼接一样…
阅读更多...
创新指南｜领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具

创新指南｜领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具

CEO是任何组织中最具挑战性和要求最高的职位之一&#xff0c;尤其是在当前的经济环境下。这也是最重要的职位之一。研究表明&#xff0c;一家公司 45% 的业绩可归因于CEO的影响。但 CEO 们的实际表现如何&#xff1f;他们面临哪些问题&#xff1f;如何帮助他们发挥出最佳水平&a…
阅读更多...
HALCON飞拍贴片机框架程序——硬件介绍

HALCON飞拍贴片机框架程序——硬件介绍

本专栏主要讲解三头贴片机框架程序&#xff0c;包括硬件介绍和软件代码。硬件主要为视觉部分&#xff0c;软件为视觉检测代码部分。贴片机的机械硬件不做介绍。 具体设备运行视频可以搜索博主抖Y&#xff1a;“伶俐科技”观看。 贴片机硬件如下图分为三个部分&#xff0c;第一…
阅读更多...
了解Maven,并配置国内源

了解Maven,并配置国内源

目录 1.了解Maven 1.1什么是Maven 1.2快速创建一个Maven项⽬ 1.3Maven 核⼼功能 1.3.1项⽬构建 1.3.2依赖管理 1.4Maven Help插件 2.Maven 仓库 2.1中央仓库 2.2本地仓库 3.Maven 设置国内源 1.查看配置⽂件的地址 2.配置国内源 3.设置新项⽬的setting 1.了解Ma…
阅读更多...
Ubuntu22.04之安装星火应用商店《兼容windows应用》(二百三十七)

Ubuntu22.04之安装星火应用商店《兼容windows应用》(二百三十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试6月2日预测第9弹

AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试6月2日预测第9弹

今天继续基于8883的大底进行测试&#xff0c;今天继续测试&#xff0c;好了&#xff0c;直接上结果吧~ 首先&#xff0c;888定位如下&#xff1a; 百位&#xff1a;5,4,7,3,2,9,1,0 十位&#xff1a;4,6,5,7,2,9,1,0 个位&#xff1a;3,4,2,5,…
阅读更多...
BIT 2024 编译原理 Lab. 4 四代编译器实验说明和要求

BIT 2024 编译原理 Lab. 4 四代编译器实验说明和要求

实验四&#xff1a;四代编译器实验 一、实验要求 详细实验要求请参考文件《Lab4实验说明和要求.pdf》。 二、实验思路 1、与 lab3 的对比 如果你在 lab3 就已经像我一样单独写了个函数处理表达式&#xff0c;那么理论上&#xff0c;lab4 相比于 lab3&#xff0c;不过就是多…
阅读更多...
Ubuntu server 24 (Linux) IPtables 双网卡 共享上网NAT 安装配置DHCP

Ubuntu server 24 (Linux) IPtables 双网卡 共享上网NAT 安装配置DHCP

一 开启路由转发功能 sudo vim /etc/sysctl.conf net.ipv4.ip_forward1 sudo sysctl -p 二 安装DHCP #更新软件包列表&#xff1a; sudo apt update #安装DHCP服务器 sudo apt install isc-dhcp-server #修改监听网卡,根据实际修改 sudo vi /etc/default/isc-dhcp-server …
阅读更多...
HTML+CSS 文本动画卡片

HTML+CSS 文本动画卡片

效果演示 实现了一个图片叠加文本动画效果的卡片&#xff08;Card&#xff09;布局。当鼠标悬停在卡片上时&#xff0c;卡片上的图片会变为半透明&#xff0c;同时显示隐藏在图片上的文本内容&#xff0c;并且文本内容有一个从左到右的渐显动画效果&#xff0c;伴随着一个白色渐…
阅读更多...
最新文章

Copyright @ 2022~2023