找到
19
篇与
网站
相关的结果
- 第 2 页
-
Typecho 文章生成 AI 摘要 （ AISummary ） AI摘要：本文介绍了Typecho博客插件AISummary的修改版，解决了原版插件与某些插件冲突的问题。修改后支持使用智谱清言的GLM-4-Flash模型，免费调用大模型。文章提供了修改方法、配置示例和下载链接。前言 前段时间在寻找博客ai插件的时候发现了两款适用于typecho插件（AISummary 和 AIContentSummary），发现大多数博主都是用的AISummary，所以话不多说接下来看效果图： 73280bd0ed07563ad1ed619d73c3d75a.png图片 AISummary AISummary的原版本个人感觉有一点点小问题，可能是跟我的其他插件有冲突，每次点击发布文章都需要加载半天，还加载不出来 所以，这篇文章是一个小改的AISummary插件 下载链接请看文章后面 打开插件下的 Plugin.php 文件 找到大约 223 行。 // $apiUrl = rtrim($options->apiUrl, '/') . '/v1/chat/completions'; 原代码，注释掉，然后添加下一行代码 $apiUrl = $options->apiUrl;这里改变的原因就是原版插件只可以调用MoonShot Kimi Chat，不过Kimi只有新人15元免费，后面都需要收费（）直到后面发现了智谱清言的 GLM-4-Flash 模型是完全免费的。） MoonShot Kimi Chat API KEY 注册地址： https://platform.moonshot.cn/智谱清言 BigModel智谱AI大模型开放平台链接： https://maas.aminer.cn/ GLM-4-Flash免费调用： 智谱AI首个免费API，零成本调用大模型，支持128K上下文。 修改后的插件配置 kimi Chat 模型名：moonshot-v1-8k 密钥：sk-9rvpKLaC5jPszkxdinwlSC6hHon*********** API地址：https://api.moonshot.cn/v1/chat/completions 智谱清言 模型名：glm-4-flash 密钥：95ee48bda0293d818967561af0d9e0.3whX********* API地址：https://open.bigmodel.cn/api/paas/v4/chat/completions 两个都是可以使用 下载 最后没有动手能力的，可以直接下载改版插件 AISummary[改版].zip 下载地址：https://book.02clouds.cn/usr/uploads/2025/01/28f61a4aa923fd13cd85d8c94ea0e5de.zip 提取码： Github 开源地址 AISummary ：https://github.com/idealclover/AISummary-Typecho AIContentSummary ：https://github.com/Rockytkg/AIContentSummary
-
Typecho Joe主题 RSS方式呈现“新闻早报” AI摘要：本文介绍了如何使用RSS方式在Typecho Joe主题中实现“新闻早报”功能。通过简单的RSS引用，无需受API资源限制，且可扩展性强。文章详细说明了RSS的优势，并提供了创建新闻页面的代码示例和RSS新闻源推荐。前言 前段时间 UP主 在网上冲浪，无意中找到了一篇关于《简单而完整的 PHP RSS 阅读器》的文章。经过小小的实验之后大为惊喜！这短短的20行代码也正好是我最近一直在找的。 因为看到别人的博客都有 每天60秒读懂世界新闻早报 功能，感觉还是挺新鲜的😏，于是我把找到的代码在Joe主题上进行了测试，效果非常不错！于是决定分享出来给大家测试，此方法使用了简单的RSS引用方式，不必再受api资源的限制，而且可扩展性也非常强。 RSS的优势 为何选用 RSS 方式更加比 api 具有优势呢？ rss订阅源丰富，更新节奏快，api更新不稳定，我之前的方法就经常中午才更新，这还能叫早报么 api大部分都有调用次数显示，比如前段时间看到的一篇文章，Joe主题首页显示新闻早报API，可每日更新（功能可扩展） 中使用的ALAPI，每日仅1000次调用次数 rss的源不仅仅是新闻，更加丰富的订阅来源，而api也就那几种了。 效果图预览 5863f76f4b306672583f500ff1690b4e.png图片 这里页面名可自定义，虽然叫新闻早报，当然也可以改成其他的🧑💻 新闻页面创建 我们先到主题目录里创建一个文件newspaper.php 打开我们输入一下代码 <?php /** * 新闻导读 * * @package custom * **/ ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) { http_response_code(404); exit; } $this->need('module/single/pjax.php'); ?> <!DOCTYPE html> <html lang="zh-CN"> <head> <?php $this->need('module/head.php'); $this->need('module/single/prism.php'); ?> <script src="<?= joe\cdn('clipboard.js/2.0.11/clipboard.min.js') ?>" data-turbolinks-permanent></script> <script src="<?= joe\theme_url('assets/js/joe.single.js'); ?>"></script> </head> <body> <?php $this->need('module/header.php'); ?> <div id="Joe"> <div class="joe_container"> <div class="joe_main"> <div class="joe_detail" data-cid="<?php echo $this->cid ?>"> <?php $this->need('module/single/batten.php'); ?> <?php $this->need('module/single/article.php'); ?> <?php $rss = simplexml_load_file('https://www.chinanews.com.cn/rss/scroll-news.xml'); $title = $rss->channel->title; ?> <title><?php echo $title; ?></title> <h1 style="text-align:center;"> 02博客 - 新闻导读 </h1> <?php echo "<article class='joe_detail__article'><ol>"; foreach ($rss->channel->item as $item) { echo "<li>"; echo "<h6><a style='color: var(--minor); display: block; margin: 10px;' target='_blank' href='" . $item->link . "'>" . $item->title . "</a></h6>"; echo "<div>" . $item->description . "</div><br>"; echo "</li>"; } echo "</ol></article>"; ?> <p style="text-align:right;"> 内容来源：<?php echo $title; ?><br> Made by <a href="/" target="_blank">02博客</a> </p> <?php $this->need('module/single/handle.php'); ?> <?php $this->need('module/single/copyright.php'); ?> </div> <?php $this->need('module/single/comment.php'); ?> </div> <?php joe\isPc() ? $this->need('module/aside.php') : null ?> </div> <?php $this->need('module/bottom.php'); ?> </div> <?php $this->need('module/footer.php') ?> </body> </html>代码中的https://www.chinanews.com.cn/rss/scroll-news.xml是我们选择的rss订阅地址 这里 UP主 用的是中国新闻网 – 即时新闻，当然你也可以换成别的，比如文章最后推荐的几个源都非常不错，你也可以自行百度。 在后台新建页面，模板选择 新闻导读 ，地址栏可以填写 news 当然自己diy其他链接也是可以的，然后发布查看效果。 RSS新闻源推荐 如果你还不清楚去哪找RSS源 https://www.zhihu.com/question/19580096 如果你想找更多的源 https://docs.rsshub.app/ 奇客Solidot https://www.solidot.org/index.rss 36氪 https://36kr.com/feed 月光博客 https://www.williamlong.info/rss.xml 中国新闻网 https://www.chinanews.com.cn/rss/index.shtml
-
LightPicture - 企业/团队免费图床系统 AI摘要：LightPicture是一款轻量级企业团队图片资源管理系统，支持第三方云存储、多用户管理、权限控制等功能，采用ThinkPHP+Vue开发，界面简洁优雅。简介 1899c1ba43e06c7d.jpg图片 一套轻量级企业团队图片资源管理系统、图床系统 使用thinkphp+vue开发，前后端分离； 程序功能 支持第三方云储存，本地、阿里云OSS、腾讯云COS、七牛云KODO、又拍云USS、华为云OBS等等 支持多桶储存，可同时添加多个对象存储桶管理，适合团队多桶协作 多图上传、拖拽上传、粘贴上传、上传预览、全屏预览、一键复制图片外链 多用户管理、分组管理；不同分组用户控制不同的存储桶 完整的权限控制功能，不同用户组可分配不同的操作权限，控制其上传删除及查看 完整的可视化日志功能，记录用户所有操作，方便事件溯源 全局配置用户初始剩余储存空间、设置指定用户剩余储存空间 支持接口上传、接口删除 原创Geek扁平化页面风格，高性能 / 精致 / 优雅 / 简洁而不简单 安装要求 PHP 版本 ≥ 7.2 Mysql版本 ≥ 5.5 PDO 拓展 fileinfo 拓展 curl 拓展 ZipArchive 支持 下载地址 LightPicture源码下载 下载地址：https://github.com/osuuu/LightPicture 提取码： 安装教程 下载LightPicture，上传至 web 运行环境，解压。 设置运行目录为 public。 配置网站默认文档： index.html index.php4.配置 Rewrite 规则为：thinkphp [ Apache ] <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] </IfModule> [ Nginx] location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; } } 访问 域名/install，根据页面提示安装。 安装完成后默认 账号为admin 密码123456 注：完成后若开启前台注册请登录管理员账号配置发信邮箱 40f5f6b725355ad3d8c6f26b4fec49f1.png图片 10d0f2f6e180df2ca82150e61cfcf9a8.png图片
-
DDOS攻击介绍以及如何防护 AI摘要：DDoS攻击通过控制大量设备向目标发送请求，耗尽服务器资源，导致服务不可用。防御策略包括启用DDoS防护服务、部署负载均衡器、使用CDN、配置防火墙等。DDoS攻击，全称是Distributed Denial of Service Attack，即分布式拒绝服务攻击。以下是对DDoS攻击的详细介绍： 一、定义 DDoS攻击是一种通过控制大量计算机、物联网终端或网络僵尸（Zombie）来向目标网站发送大量请求，从而耗尽其服务器资源，导致正常用户无法访问服务的攻击方式。这种攻击方式旨在使目标系统的服务不可用，从而影响正常用户的访问。 二、原理 分布式特性：DDoS攻击之所以称为“分布式”，是因为攻击者会利用大量的计算机或设备（包括被感染的计算机、物联网设备等）作为攻击源，形成一个庞大的“僵尸网络”。这些被控制的设备会同时或分批向目标服务器发送请求，使得攻击来源难以追踪。 请求洪泛：攻击者通过僵尸网络向目标服务器发送大量无用的请求，这些请求可以是TCP/UDP连接请求、HTTP GET请求等。由于请求数量巨大，远远超过了目标服务器的处理能力，导致服务器资源（如CPU、内存、带宽等）被迅速耗尽。 资源耗尽：目标服务器在处理这些大量无用的请求时，会消耗大量的系统资源。当资源被完全占用时，服务器将无法正常响应合法用户的请求，从而导致服务拒绝（Denial of Service）。 利用协议漏洞：DDoS攻击还常常利用网络协议中的漏洞来放大攻击效果。例如，通过发送大量的SYN请求而不进行后续的确认（ACK），可以耗尽服务器的SYN缓冲区，从而导致服务器无法处理正常的TCP连接请求。 三、类型 DDoS攻击可以根据攻击的目标层次进行分类，主要包括以下几种： 应用层攻击：这类攻击针对的是Web应用程序等高层协议，常见的有HTTP Flood（通过发送大量HTTP请求来消耗Web服务器资源）。 传输层攻击：如TCP SYN Flood，通过发送大量的半连接请求来耗尽服务器的连接资源。 网络层攻击：如ICMP Flood（通过发送大量ICMP回显请求包），以及UDP Flood（发送大量无连接的UDP数据包）。 物理层攻击：虽然较少见，但可以通过发送大量的无效信号或噪声来干扰网络设备的正常工作。 四、危害 DDoS攻击的危害极大，主要体现在以下几个方面： 服务中断：DDoS攻击最直接的影响是导致目标服务器无法正常工作，服务中断或加载缓慢。对于网站、在线游戏、电子商务等依赖网络服务的行业来说，这将严重影响业务的连续性和用户体验。 经济损失：服务中断不仅会导致直接的经济损失（如营业收入下降、订单取消等），还可能引发客户流失、品牌声誉受损等间接损失。此外，企业还需要投入大量资金来应对攻击，包括购买防御设备、聘请安全专家、支付技术支持费用等。 数据泄露和安全隐患：在DDoS攻击期间，攻击者可能会利用攻击造成的混乱来掩盖其他恶意活动，如窃取数据、植入恶意软件等。 影响业务稳定性：DDoS攻击可能导致企业的业务完全瘫痪，无法正常运营。特别是在关键时刻（如促销活动、新产品发布等），攻击可能会给企业带来灾难性的后果。 破坏网络生态：DDoS攻击不仅对个人和企业造成危害，还可能对整个网络生态系统造成破坏。例如，攻击大型云服务提供商可能导致多个客户的服务受到影响，进而引发连锁反应。 五、防御策略 为了有效应对DDoS攻击，企业和个人需要采取一系列的安全防护措施，包括但不限于： 启用DDoS防护服务：通过流量清洗和攻击缓解等措施有效减轻攻击对服务器的影响。 部署负载均衡器：将流量分散到多个服务器上，防止单一服务器因流量过大而崩溃。 使用CDN：通过分发内容到多个地理位置的节点来分散流量并加快响应速度。 配置防火墙和入侵检测系统：防火墙可以设定规则阻止可疑流量进入网络，而入侵检测系统能够实时监控网络活动并识别异常行为。 实施速率限制：对用户请求的频率进行限制，防止短时间内大量请求对服务器造成压力。 加入黑名单：将已知的恶意IP地址加入黑名单以阻止其访问。 部署Web应用防火墙：专门用于保护应用层免受攻击。 设计冗余的网络架构：在网络中设置多个备份节点以提高系统的可靠性。 实施地域封锁：根据流量来源的地理位置限制来自高风险地区的流量。 监控与报警：通过监控网络流量、服务器负载等指标快速识别DDoS攻击的迹象，并结合自动报警系统及时做出反应。 定期进行安全演练：提升团队应对DDoS攻击的能力并发现潜在的安全隐患。 结语 综上所述，DDoS攻击是一种极具破坏力的网络攻击方式。为了有效应对这种攻击，企业和个人需要充分了解其原理和危害，并采取多层次、综合性的安全防护措施来确保业务的持续稳定运行。
-
http2是什么？ 宝塔面板btpanel服务器端开启http2方法教程 AI摘要：HTTP/2是优化网页加载速度和传输效率的协议，具有二进制协议、多路复用、头部压缩等特性。宝塔面板可轻松开启HTTP/2，需配置Nginx或Apache服务器，并确保SSL证书安装。HTTP2是什么？ HTTP/2（超文本传输协议第2版，最初命名为HTTP 2.0）是HTTP协议的第二个主要版本，由互联网工程任务组（IETF）于2015年正式发布。以下是对HTTP/2的详细介绍及其带来的好处： 一、HTTP/2的概述 HTTP/2旨在解决HTTP/1.1的性能和效率问题，通过优化网络传输，改善网页加载速度和应用性能。它主要基于SPDY协议，并继承了HTTP/1.1的许多核心概念和语义，同时对其进行了改进和扩展。 二、HTTP/2的关键特性 二进制协议：HTTP/2使用二进制协议，而不是HTTP/1.1的纯文本协议。这使得解析过程更加高效，减少了冗余字符和格式化问题，同时降低了错误率。 多路复用：HTTP/2允许在同一个TCP连接中发送多个请求和响应，避免了HTTP/1.1中的“队头阻塞”问题。这些请求和响应以独立的帧形式交错传输，互不干扰，从而提高了传输效率。 头部压缩：HTTP/2引入了HPACK压缩算法，对HTTP头部进行压缩。通过记录和压缩重复的头部字段，减小了传输数据量，提高了传输效率。 服务器推送：HTTP/2允许服务器在响应客户端请求时，主动推送额外的资源给客户端。这减少了客户端的请求次数，提升了首屏加载速度。 流优先级：HTTP/2允许为流（Stream）分配优先级。客户端可以告诉服务器哪些资源更重要，服务器会优先处理高优先级的资源，从而优化了资源加载顺序。 三、HTTP/2的好处 更快的网页加载速度：多路复用和头部压缩大幅减少了延迟和数据量，使得网页加载速度更快。 更高的传输效率：二进制格式更容易解析，减少了协议开销。同时，多路复用和服务器推送等功能也提高了传输效率。 更少的网络资源占用：单一连接减少了TCP连接的数量，降低了服务器负载。这有助于在高流量网站和实时应用中提供更好的性能。 更好的用户体验：服务器推送和流优先级优化了资源加载顺序，使得用户能够更快地看到所需的内容。同时，更快的网页加载速度也提升了用户的整体体验。 更高的安全性：虽然HTTP/2本身不强制使用加密，但主流浏览器要求HTTP/2必须使用HTTPS。这有助于保护用户数据的安全性和隐私性。 四、HTTP/2的兼容性 HTTP/2在发布后得到了广泛的支持和采用。主流的Web服务器如Nginx、Apache、Tomcat、IIS等都支持HTTP/2。 同时，现代浏览器如Chrome、Firefox、Safari等也已支持HTTP/2。这使得HTTP/2能够在实际环境中得到广泛的应用和部署。 五、HTTP/2的应用场景 HTTP/2适用于各种需要频繁加载大量资源的网站和应用场景，如电商、社交媒体等。同时，它也适用于对延迟要求高的实时应用，如视频流、在线游戏、聊天等。此外，在移动网络环境中，HTTP/2也能够减少延迟，优化用户体验。 综上所述，HTTP/2通过优化性能、减少延迟和提高安全性等方面为用户提供了更快速、高效和可靠的Web体验。随着技术的不断发展，HTTP/2将继续在Web领域中发挥重要作用。 宝塔面板开启http2方法 Nginx开启方法 开启ssl之后修改配置文件，将listen 443 ssl; 改成 listen 443 ssl http2同时注意不要误删分号; nginx1.8版本不支持http2 c0f542e2775105fa21a3e74ad6ea5a64.png图片 Apache2.4下开启ssl即启用http2 ，6月份之前所安装的apache未编译http2模块，需卸载重新安装才支持http2 若不确定自己什么时候安装的，可查看配置文件看是否有http2模块。 144858f6hys3t6es3y6l37.png图片 宝塔面板还是很适合小白用的，你看就连开启http2也是一句话的事情，但是如果你想使用http2的话一定要给网站开启ssl证书哦！
-
有一台云服务器可以做什么？ AI摘要：云服务器是一种基于云计算技术的虚拟化服务器，可用于搭建个人网站、企业应用服务器、游戏服务器、云存储与备份、AI与数据分析平台以及远程桌面与虚拟工作环境。它具有高性能、大自由度和强扩展性，能够满足不同用户的需求，并随着云计算技术的发展在更多领域发挥重要作用。云服务器是什么？ 云服务器（Cloud Server），又称云主机或弹性计算服务（Elastic Compute Service，ECS），是基于云计算技术提供的一种虚拟化服务器。 随着云计算技术的普及，越来越多的企业和个人开始使用云服务器。 那么，拥有一台云服务器对我们来说，究竟能做些什么呢？今天我们就从多个角度，来了解一下有一台云服务器对我们的帮助，以及如何参与我们的生活与工作的。 640.webp图片 一、搭建个人网站或博客 如果你想拥有一个属于自己的网站或博客，云服务器是一个理想的选择。比起传统的虚拟主机，云服务器拥有更高的性能、更大的自由度和更强的扩展性。你可以根据需求，选择合适的操作系统（如Linux或Windows）来搭建站点。 如何操作： 购买云服务器：选择合适的云服务商（如阿里云、萤光云、LightNode等），并根据需求购买一台适合的云服务器。 选择操作系统：云服务器通常提供多种操作系统的选择，选择一个你熟悉或喜欢的操作系统，比如Ubuntu、CentOS或Windows Server。 安装网站软件：根据需要，可以安装WordPress、Joomla、Hexo等开源博客程序，或者手动搭建一个自定义的网站。 推荐用途：个人博客、企业官网、在线作品集。 二、搭建企业应用服务器 对于小型企业或者创业公司，云服务器能够承担更多应用的角色。例如，你可以通过云服务器搭建企业内部的ERP系统、CRM系统、OA办公系统等应用。相比传统的本地部署，云服务器更具灵活性，可以根据业务需求动态调整资源。 如何操作： 选择云服务平台：选择一个适合企业需求的云服务商，建议根据地理位置、网络稳定性和支持的服务进行挑选。 搭建应用环境：根据业务需求选择适当的软件环境，安装数据库、Web服务、邮件服务等。 配置安全设置：为保障企业信息安全，务必设置防火墙、VPN、数据加密等。 推荐用途：企业管理系统、内部邮件系统、客户数据管理等。 三、搭建游戏服务器 如果你是一名游戏爱好者，或者有兴趣开发多人在线游戏，云服务器也是一个非常合适的选择。通过云服务器，你可以搭建自己的游戏服务器，让朋友们一起参与，享受私人定制的游戏环境。 如何操作： 选择云服务器配置：根据游戏的需求选择合适配置的云服务器（内存、CPU、硬盘等）。 安装游戏服务端：根据游戏类型下载相应的服务端程序，例如Minecraft、CS:GO、ARK等。 配置网络与防火墙：为了确保多人在线时的顺畅体验，设置好端口映射，确保游戏服务器可以通过公网访问。 推荐用途：私服游戏、多人在线游戏托管。 四、云存储与备份 有时候，我们需要一个稳定、安全且可以随时访问的文件存储空间。云服务器提供了这样的平台，能够存储大量的个人文件、企业数据，甚至进行定期备份。 如何操作： 搭建NAS服务：使用OpenMediaVault、FreeNAS等开源软件搭建网络附加存储（NAS），在云服务器上创建文件共享。 配置自动备份：可以设置定时备份，将重要文件定期上传到云服务器，避免数据丢失。 推荐用途：个人数据备份、团队文件共享、云盘服务。 五、AI与数据分析平台 随着大数据和人工智能的快速发展，云服务器也成为了数据分析、机器学习和人工智能训练的理想平台。你可以在云服务器上创建一个数据分析平台，运行各种数据处理、模型训练任务。 如何操作： 选择合适的计算资源：对于需要较强计算力的任务，可以选择GPU云服务器进行加速。 搭建数据分析环境：安装Python、R等数据分析工具，搭建机器学习框架（如TensorFlow、PyTorch等）。 上传并分析数据：将数据上传到云服务器，使用相应的算法进行数据分析或模型训练。 推荐用途：数据挖掘、机器学习训练、AI模型部署等。 六、远程桌面与虚拟工作环境 在居家办公、远程工作的时代，云服务器也能提供一个灵活的虚拟工作环境。通过搭建远程桌面，你可以随时随地访问到自己工作所需的应用程序和文件。 如何操作： 安装远程桌面服务：在云服务器上安装Windows Server系统，启用远程桌面服务，或者使用VNC、XRDP等工具实现远程访问。 配置安全访问：设置VPN或SSH，确保只有授权用户可以访问远程桌面。 安装所需工作软件：在云服务器上安装办公软件、设计工具等，随时使用。 推荐用途：远程办公、虚拟桌面、多人协作办公。 总结 从搭建个人网站到企业级应用，从游戏服务器到数据分析，云服务器都能够发挥巨大的作用。拥有一台云服务器，不仅能满足当下的需求，还能随时根据变化的需求进行升级与扩展，建议大家都可以有一台属于自己的云服务器。 同时，随着云计算技术的不断发展，云服务器将在更多领域发挥重要作用，为各行各业带来更加深远的影响。
-
HTTP与HTTPS的区别：安全性、协议地址和默认端口等比较 AI摘要：HTTP与HTTPS在安全性、协议地址和默认端口等方面存在显著差异。HTTPS通过SSL/TLS加密传输，保障数据安全，而HTTP以明文传输，易受攻击。HTTPS使用“https://”开头，默认端口为443，而HTTP使用“http://”，默认端口为80。HTTPS性能略慢，但现代技术已大幅提升。安全性是选择协议的首要考虑，涉及敏感信息的网站应优先使用HTTPS。一、概述 HTTP（Hypertext Transfer Protocol，超文本传输协议）和HTTPS（Hypertext Transfer Protocol Secure，安全超文本传输协议）是互联网上应用最为广泛的两类协议。 两者之间存在明显的差异，主要体现在安全性、协议地址和默认端口等方面。了解这些差异对于理解互联网的工作原理以及如何保护网站和用户数据的安全至关重要。本文将详细介绍HTTP和HTTPS的区别，并通过比较两者的优劣，给出最佳实践建议。 二、HTTP与HTTPS的区别 安全性 HTTP协议以明文方式发送内容，没有任何加密机制，因此数据传输过程中可能会被第三方窃取或篡改。相比之下，HTTPS协议通过SSL（Secure Sockets Layer）或TLS（Transport Layer Security）对数据进行加密传输，保证了数据的安全性和完整性。 HTTPS协议使用SSL/TLS对传输的数据进行加密，防止敏感信息被窃取或篡改。此外，HTTPS协议还支持身份验证和数字签名等功能，确保网站的真实性和完整性。 协议地址 HTTP协议使用无特殊符号的URL（Uniform Resource Locator），而HTTPS协议则使用以“https://”开头的URL。在浏览器地址栏中，你会发现以“https://”开头的网址有一个绿色的小锁图标，这表示该网站使用了SSL加密技术。这是HTTP和HTTPS之间最明显的区别之一。使用HTTPS协议的网站会显示一个安全标识，即绿色的小锁图标，这可以让用户知道该网站是安全的。而使用HTTP协议的网站则没有任何安全标识。 默认端口 HTTP协议的默认端口是80，而HTTPS协议的默认端口是443。端口不同使得这两种协议可以在同一台服务器上共存，互不干扰。这是因为在TCP/IP网络传输中，对传输的内容进行加密是一项比较消耗资源的操作，因此通常会将加密的HTTPS服务和非加密的HTTP服务分别部署在不同的端口上，以便更好地利用服务器资源。同时，这种端口不同的设计也方便了管理员对网络服务进行安全配置和管理。 性能影响 由于HTTPS协议需要加密和解密数据，因此在处理速度上会比HTTP慢一些。但是，随着计算机技术的不断发展，这种性能差异已经变得越来越小。实际上，对于大多数网站和应用来说，使用HTTPS并不会对性能产生明显的影响。而且，随着硬件性能的提升和优化算法的出现，HTTPS的性能已经得到了极大的提升。现在，大多数现代网站都采用了HTTPS协议，这也证明了其性能已经得到了广泛的认可。 三、比较与评估 在选择使用HTTP或HTTPS时，安全性应作为首要考虑因素。如果网站涉及敏感信息（如银行账户、密码等），那么使用HTTPS是必要的。使用HTTPS可以有效地保护敏感信息不被第三方窃取或篡改，保障用户数据的安全性。此外，对于需要保护数据完整性和安全的网站，如在线购物、网上银行等，也应该优先考虑使用HTTPS。这些网站通常涉及到资金交易和敏感信息的传递，因此保障数据的安全性和完整性是非常重要的。如果不涉及敏感信息或者数据安全性要求不高，那么使用HTTP也是可以的。例如一些博客站点或者小型网站通常会选择使用HTTP协议来降低建设和维护成本。但是随着互联网技术的发展和网络安全问题的日益突出,越来越多的网站开始采用HTTPS协议来提升网站的安全性. 除了安全性之外，HTTP和HTTPS还有其他一些区别和考虑因素。 浏览器支持 所有现代浏览器都支持HTTPS协议，并且会默认使用HTTPS来访问网站。这使得使用HTTPS的网站能够在各种设备上被广泛访问，并且不会被用户浏览器拒绝连接或显示混合内容警告。相比之下，早期的一些浏览器可能不支持HTTPS，或者需要在浏览器设置中手动启用HTTPS连接。但是，这种情况现在已经很少见了。 部署和维护成本 部署HTTPS需要购买和配置SSL/TLS证书，这可能会增加网站的成本。然而，现在有很多免费的证书颁发机构（CA）提供免费的SSL/TLS证书，这使得部署HTTPS变得更加容易和实惠。另外，随着网站安全性的提高，也会降低因安全漏洞导致的法律风险和赔偿责任，从而长期来看会节省更多的成本。 相比之下，部署HTTP不需要任何证书，因此成本较低。但是，如果没有SSL/TLS证书的保护，网站容易受到中间人攻击等安全威胁，并且可能会被浏览器标记为不安全或显示混合内容警告。 隐私保护 使用HTTPS协议可以保护用户的隐私信息，如搜索记录、浏览记录等。这些信息可能会被第三方窃取并用于不良目的，如广告追踪或个性化推荐等。而使用HTTPS协议可以加密传输数据，保护用户的隐私不被泄露。 四、最佳实践建议 综上所述，如果网站涉及敏感信息或需要保护数据完整性和安全性，应优先使用HTTPS协议。使用HTTPS协议可以有效地保护用户数据的安全性和隐私性，同时提高网站的可信度和用户体验。 对于其他不涉及敏感信息的网站，虽然使用HTTP协议可以降低建设和维护成本，但是在安全性和隐私保护方面可能会存在一定的风险。因此，建议这些网站也逐步采用HTTPS协议来提高网站的安全性和用户体验。 在部署HTTPS时，应注意选择可靠的SSL/TLS证书颁发机构，并确保证书配置正确。同时，应定期更新证书密钥和密码等敏感信息，以避免被破解或泄露。此外，应注意对服务器进行安全配置和漏洞修复，以确保服务器安全和稳定运行。 总之，HTTP和HTTPS都是互联网上应用广泛的协议，两者之间存在明显的差异和考虑因素。在选择使用哪种协议时，应根据网站的具体需求和情况来做出决策。同时，应注意提高网站的安全性和用户体验，以保护用户数据的安全性和隐私性。
-
新手站长做网站外链推广应该注意的问题 AI摘要：新手站长进行网站外链推广时，应避免作弊外链，如购买链接、单一锚文本、指向首页的外链等，并杜绝垃圾外链，如内容不相关、垃圾内容、不稳定的外链。正确的外链推广应追求多样性、稳定性，并注重用户需求，可加入SEO圈子交换友链，引导用户自发发外链，并利用百度站长平台拒绝垃圾外链。相信大家和我一样遇到过外链违规情况，下面几种形式的链接都属于作弊外链 如果一个网站做得多了，就会导致k站。 不做作弊外链 购买链接：到一些外链购买平台进行购买的外链都属于作弊外链。 黑色行业外链：如果一个网站被大量的赌博、色情等锚文本指向，那么这个网站也有可能被k。 锚文本单一：如果一个网站所有的锚文本使用的都是同一个关键词，那么这就是很明显地在可以发外链，也会被判断为作弊。 全部指向首页：如果一个站的所有外链都指向首页，那也是作弊的表现。 外链群发：不要使用任何外链群发工具进行外链群发。 不发垃圾外链 垃圾外链惩罚虽然没有作弊外链那么严重，但是如果数量太多，一样会导致网站降权。垃圾外链主要分为以下几种链接。 内容不相关的外链：你的网站是做教育的却去机械行业的网站做外链建设。 内容是垃圾内容：发布外链时发布的文章是通过伪原创工具创作出来的垃圾内容。 外链不稳定：在第三方平台做得外链不稳定，经常被删。 我们在做外链推广时，一定要杜绝垃圾外链。 正确的外链推广思维 外链的来源不要太过单一，要多找一些外链平台。 外链要追求稳定，经常删除外链帖子的平台最好不要发。 垃圾平台上不要发外链。 外链越多，风险越大。所以我们要建设稳定安全的外链，把更多的时间和精力放在解决用户需求上面来。 做稳定的外链建设，可以加入一些seo圈子，交换友链。 最好想办法引导用户为我们发外链，比如引导用户发布推广链接，发布之后可以获得一些小礼品等等。 如果垃圾外链太多，可以通过百度站长平台去拒绝这些垃圾外链。
-
四种网站新年灯笼效果代码-过年了让你的博客喜庆的灯笼源码-html网站灯笼纯代码 AI摘要：提供四种新年灯笼效果代码，轻松为网站增添春节喜庆氛围。代码简单易用，适用于电脑端和移动端，支持单个、右侧、两边和四个灯笼的布局。只需将代码复制到网站模板的公共页眉或页脚中，即可实现灯笼效果。快来给你的网站增添一抹春节的喜庆色彩吧！想象一下，当访客打开你的网站，一对红彤彤的灯笼在右上角摇曳生姿，瞬间就能感受到浓浓的节日氛围。 准备了四段红灯笼的代码，让你能够轻松实现这一效果。这几段代码不仅简单易用，而且经过精心调试，确保在各种设备上都能完美呈现。 无论是电脑端还是移动端，都能让红灯笼高高挂起，为你的网站增添一份独特的魅力。 教程一 单个 示图： 52491ff6792c57dccfd0ccb5dc64127a.jpg图片 修改位置：将代码复制到网站模板的公共页眉或页脚中，并自定义标签上方的页眉HTML代码。 代码：<!--春节单灯笼代码--> <div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">春</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"></div> </div> </div> </div> <style> .deng-box { position: fixed; top: -40px; right: -20px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none; } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -2px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style>教程二-右侧 示图： 8f11d568cd8527446ab111be2486ad65.jpg图片 修改位置：将代码复制到网站模板的公共页眉或页脚中，并自定义标签上方的页眉HTML代码。代码： <div class="deng-box" id="denglong1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">节</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <!-- 灯笼2by安鹿www.anlu1314.com --> <div class="deng-box1" id="denglong2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">春</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <style> .deng-box { position: fixed; top: -40px; right: -20px; z-index: 1999; } .deng-box1 { position: fixed; top: -30px; right: 60px; z-index: 1999; } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 1999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif; font-size: 2.5rem; color: #dc8f03; font-weight: bold; line-height: 90px; text-align: center; pointer-events: none; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @keyframes swing { 0% { transform: rotate(-10deg) } 50% { transform: rotate(10deg) } 100% { transform: rotate(-10deg) } } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style>教程三-两边 示图： 3ca1a54b29de6bdd71d574a834615a18.jpg图片 修改位置：将代码复制到网站模板的公共页眉或页脚中，并自定义标签上方的页眉HTML代码。 代码：<div class="deng-box" id="denglong1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">节</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <div class="deng-box1" id="denglong2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">春</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <style> .deng-box { position: fixed; top: -30px; right: -20px; z-index: 1999; } .deng-box1 { position: relative; top: -30px; right: 30px; z-index: 1999; } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 1999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif; font-size: 2.5rem; color: #dc8f03; font-weight: bold; line-height: 90px; text-align: center; pointer-events: none; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @keyframes swing { 0% { transform: rotate(-10deg) } 50% { transform: rotate(10deg) } 100% { transform: rotate(-10deg) } } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style>教程四-四个 示图： 82d337cef7984016b5f35d4c2f1ddb49.jpg图片 代码： <!--春节四灯笼代码--> <meta charset="utf-8"> <div class="deng-box2"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">年</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box3"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">新</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"> </div> </div> </div> </div> <div class="deng-box1"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">乐</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"></div> <div class="shui-b"></div> </div> </div> </div> <div class="deng-box"> <div class="deng"> <div class="xian"> </div> <div class="deng-a"> <div class="deng-b"> <div class="deng-t">快</div> </div> </div> <div class="shui shui-a"> <div class="shui-c"> </div> <div class="shui-b"></div> </div> </div> </div> <style type="text/css"> .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } </style>提示 数据无价，请提前备份，建议建立一个文件修改记录，以便后期查阅自己修改了哪些内容 修改完毕后，刷新一下浏览器缓存，再次访问网站，即可看到修改后的效果
