网页核心页面设计（第9章）

一、多个边框阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: greenyellow;margin: 200px auto;border-radius: 50%;box-shadow: 0 0 0px 5px red,0 0 0px 10px orange,0 0 0px 15px yellow;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

二、文字阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 300px;margin: 200px auto;}h1{font-size: 100px;margin-left: 200px;text-shadow: 100px 100px 10px rgba(160, 15, 15, 0.7),200px 200px 10px  blue,300px 300px 10px  pink;transition: all 1s;}h1:hover{text-shadow: none;}</style>
</head>
<body><div><h1>text-shadow</h1></div>
</body>
</html>

在这里插入图片描述

三、线性渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;/*渐变方向*//* background-image: linear-gradient(to bottom right ,red,rgb(81, 81, 180)); *//* background-image: linear-gradient(-30deg,red,rgb(81, 81, 180)); *//* 渐变范围 *//* background-image:linear-gradient(to right,yellow 0%,green 50%, pink 100%) *//* 重复渐变 */background-image:repeating-linear-gradient(to top right,red 0%,blue 30%,red 50%);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

四、星空渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{height: 100%;}body{transition: all 1s;margin: 0;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;/*星空*//* background-image:linear-gradient(rgb(82, 4, 82),rgb(116, 78, 116));*//* 黎明 *//* background-image: linear-gradient(orange 0% ,white 20%, blue 40%, black 85%); */background-image: linear-gradient(rgb(219, 210, 193) 0% ,white 30%, rgb(169, 204, 221) 90%, rgb(115, 177, 228) 100%);}body:hover{background-size:100% 300%;}img{position: absolute;top: 0;left: 0;bottom: -400px;right: 0;margin: auto;}</style>
</head>
<body><img src="image/xkbg.png" alt="">
</body>
</html>

在这里插入图片描述

五、倒影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{height: 100%;}body{transition: all 1s;margin: 0;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;background-image: linear-gradient(lightblue 0%,rgb(253, 253, 251) 20% ,white 30%, rgb(169, 204, 221) 90%, rgb(115, 177, 228) 100%);}img{position: absolute;top: 0;left: 0;bottom: -200px;right: 0;margin: auto;-webkit-box-reflect: below 0px linear-gradient(transparent 40%, white 100% );}div{width: 100px;height: 100px;border-radius: 50%;position: absolute;top: 100px;left: 100px;background-color:rgb(228, 124, 40);transition: all 2s;}body:hover div{box-shadow: 0 0 100px 200px rgb(211, 172, 46);}</style>
</head>
<body><div></div><img src="image/xkbg.png" alt="">
</body>
</html>

在这里插入图片描述

六、径向渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;/* background-image:radial-gradient(red,blue); *//* 圆 *//* background-image:radial-gradient(circle,red,blue); *//* 中心位置 *//* background-image:radial-gradient(circle at bottom right,red,blue); *//* 像素*//* background-image:radial-gradient(at 150px 150px,red,blue); *//*  百分比*//* background-image:radial-gradient(at 20% 20%,red,blue); *//* background-image:radial-gradient(at 60px 100px,red,blue); *//* 大小 *//* background-image:radial-gradient(150px 300px,red,blue); *//* 大小+中心点 *//* background-image:radial-gradient(400px 300px  at top left,red,blue); *//* 色标 *//* background-image:radial-gradient( at top left,red 20%,blue 50%); *//* background-image:radial-gradient( at center center,red 20%,blue 50%,yellow 70%,pink 100%); *//* 黑洞 *//* background-image:radial-gradient( at center center,black 50%,rgb(235, 157, 14)); *//* background-image:radial-gradient(200px 200px at center bottom,white 30%,red 35%,orange 40%,yellow 45%,green 50%,cyan 55%,blue 60%,purple 65% ,white 70%); *//* 调整大小 */background-image:radial-gradient(closest-side at 20% 30%,red,blue);background-image:radial-gradient(farthest-side at 20% 30%,red,blue);background-image:radial-gradient(closest-corner at 20% 30%,red,blue);background-image:radial-gradient(farthest-corner at 20% 30%,red,blue);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

七、背景剪切

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;background-image: linear-gradient(red,blue);background-repeat: no-repeat;border:20px solid red;padding:30px;/* background-clip: padding-box; */-webkit-background-clip: text;font-size: 100px;font-weight: bold;text-align: center;color: rgba(0,0,0,0);background-size: 100% 100%;transition: all 1s;}div:hover{background-size: 100% 150%;}</style>
</head>
<body><div>蜗牛学院</div>
</body>
</html>

在这里插入图片描述

八、滑动解锁

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;background-color: darkslategray;}h1{height: 100px;font-size: 70px;text-align: center;line-height: 100px;/* background-size: 0% 0%; */background-color: rgba(0, 0, 0,0.5);transition: all 1s;-webkit-background-clip: text;color: rgba(0,0,0,0.3);background-image: repeating-linear-gradient(100deg,rgba(0, 0, 0,0.5) 0%,white 3%,rgba(0, 0, 0,0.5) 3%,rgba(0, 0, 0,0.5) 30%);}h1:hover{background-position: 500px 0;}</style>
</head>
<body><h1>滑动解锁</h1>
</body>
</html>

在这里插入图片描述

九、内部阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;box-shadow: 0 0 10px 10px #000 inset;margin:200px auto;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

十、transition

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;transition: margin-left 5s linear 3s;/* transition-delay: 1s;transition-timing-function: linear; */}div:hover{/* background-color: blue; */margin-left: 300px;}#ease-box{transition-timing-function: ease;}button,input{width: 200px;height: 50px;line-height: 50px;border:1px solid #ccc;outline: none;}button{background-image: linear-gradient(100deg, rgb(205, 230, 238)  ,rgb(4, 188, 250) );background-repeat: no-repeat;text-align: center;color: white;background-size: 100% 100%;transition:all .5s;font-size: 24px;cursor: pointer;}input{height: 30px;width: 300px;transition:all .5s;}input:focus{box-shadow: 0 0 10px 0 lightblue;border:1px solid lightblue;width: 350px;height: 35px;}button:hover{/* width: 100px;height: 100px;border-radius: 50%; *//* background-size: 180% 100%; */background-position-x:200px;}</style>
</head>
<body><!-- <div></div><div id="ease-box"></div> --><input type="text"> <br><button>登录</button></body>
</html>

在这里插入图片描述

十一、animation

1、渐变图形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;border-radius: 0px;}/* 定义动画，向右移动200px *//* 1. 定义动画 */@keyframes moveRight {0% {margin-left: 0px; }100% {margin-left: 200px;background-color: blue;border-radius: 50%;}}/* 2 执行 */div{animation: moveRight 2s ;/* 保留结束状态 */animation-fill-mode: forwards;}</style></head><body><div></div></body>
</html>

在这里插入图片描述
2、渐变按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>button{width: 200px;height: 50px;line-height: 50px;border:1px solid #ccc;outline: none;}button{background-image: linear-gradient(100deg, rgb(205, 230, 238)  ,rgb(4, 188, 250) );text-align: center;color: white;background-size: 100% 100%;transition:all .5s;font-size: 24px;cursor: pointer;animation: buttonAnimation 3s linear infinite;}/*  */@keyframes buttonAnimation {0%{background-position:0px 0px;}100%{background-position:200px 0px;}}</style>
</head>
<body><button>登录</button></body>
</html>

在这里插入图片描述
3、多段animation

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;border-radius: 0px;border-radius: 50%;}/* 定义动画.绕页面一周 *//* 1. 定义动画 */@keyframes moveRight {0%,100% {margin-left: 0px; margin-top: 0px; }25%{margin-left: 1000px;margin-top: 0px;}50%{margin-top: 400px;margin-left: 1000px;background-color: blue;}75%{margin-left: 0px;margin-top: 400px;}}/* 2 执行 */div{animation: moveRight 5s ;}</style></head><body><div></div></body>
</html>

在这里插入图片描述
4、云雾缭绕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url("image/photo.jpg");background-repeat: no-repeat;background-size: cover;overflow: hidden;margin: 0;}body,html{height: 100%;}div{position: absolute;top: 0;left: 0;width: 3300px;height: 100%;background-size: contain;background-repeat:repeat-x;animation:move 20s infinite linear;}.fog1{background-image: url("image/fog-1.png");}.fog2{background-image: url("image/fog-2.png");}@keyframes move {0%{left: 0px;}100%{left: -1580px;}}</style>
</head>
<body><div class="fog1"></div><div class="fog2"></div>
</body>
</html>

在这里插入图片描述
5、translate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 向右移动100px *//* transform: translate(100px,100px); *//* transform: translate(100px); *//* transform: translateY(100px); */transform: translateX(100px);/* margin-left: 100px;margin-top: 100px; */}</style>
</head>
<body><div></div><p>这是一个p标签</p>
</body>
</html>

在这里插入图片描述
6、rotate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;transform: translate(100px) rotate(45deg) ;line-height: 200px;text-align: center;/* transition: all 5s; */}/* div:hover{transform: rotate(36000deg);border-radius: 50%;} */</style>
</head>
<body><div>
这是div中 内容</div>
</body>
</html>

在这里插入图片描述
7、scale

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{text-align: center;}div{width: 200px;height: 200px;background-color: red;margin: 200px auto;line-height: 200px;text-align: center;transition: all 5s;/* transform: scale(2); */transform: scale(0.5);}input{width: 200px;height: 30px;margin: 0 auto;transition: all 3s;}div:hover{transform: scale(2);}input:focus{transform: scale(2);/* width: 400px;height: 60px; */}</style>
</head>
<body><div>
这是div中 内容</div><input type="text">
</body>
</html>

在这里插入图片描述
8、图片集

<!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>#box{width: 500px;height: 600px;border-radius: 15px;border: 1px solid #cccccc;/* padding:20px; */margin: 100px auto;position: relative;}#box img{width: 100%;}#box div{width: 250px;height: 250px;padding:20px;border: 1px solid #cccccc;border-radius: 5px;position: absolute;transition: all 1s;box-sizing: border-box;}.item1{top:254px;left: 200px;transform: rotate(45deg);}.item2{transform: rotate(-45deg) translate(100px,130px);}.item3{top:200px;left: 50px;transform: rotate(145deg);}#box .item1:hover{width: 500px;height: auto;top: 0px;left: 0;transform: rotate(0deg)  ;z-index: 1;}</style>
</head>
<body><div id="box"><div class="item1"><img src="image/flo1.jpg" alt=""></div><div class="item2"><img src="image/flo4.jpg" alt=""></div><div class="item3"><img src="image/flo5.jpg" alt=""></div></div>
</body>
</html>

在这里插入图片描述
9、基点演示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>transform-origin</title><style>html,body {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0 auto;height: 100%;width: 100%;}.outer {/**定义子元素水平居中**/display:flex;justify-content:center;width: 100px;height: 100px;background-color: #6a5acd8c;position:relative;}/**竖向辅助线**/.vertical-line{position:absolute;left:50%;transform:translateX(-50%);height:100%;width:1px;background:#000;}/**横向辅助线**/.horizontal-line{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:1px;background:#000;}.inner {width:20px;height:20px;/* border-radius:50%; */background-color: #6a5acdeb;/* transform-origin:50% 50px ;*50px为环绕半径 */animation:an-circle 3s linear infinite;}@keyframes an-circle  {to {transform: rotate(360deg);}}</style>
</head>
<body><div class="outer"><div class="horizontal-line"></div><div class="vertical-line"></div><div class="inner"></div></div><br/><p>圆周环绕动画</p>
</body>
</html>

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

今天的分享就到这里了

🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。

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

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

相关文章

SpringBoot中Selenium详解

SpringBoot中Selenium详解

文章目录 SpringBoot中Selenium详解一、引言二、集成Selenium1、环境准备1.1、添加依赖 2、编写测试代码2.1、测试主类2.2、页面对象2.3、搜索组件 三、使用示例四、总结 SpringBoot中Selenium详解 一、引言 在现代软件开发中&#xff0c;自动化测试是提高软件质量、减少重复…
阅读更多...
Edge SCDN的独特优势有哪些？

Edge SCDN的独特优势有哪些？

强大的边缘计算能力 Edge SCDN&#xff08;边缘安全加速&#xff09;是酷盾安全推出的边缘集分布式 DDoS 防护、CC 防护、WAF 防护、BOT 行为分析为一体的安全加速解决方案。通过边缘缓存技术&#xff0c;智能调度使用户就近获取所需内容&#xff0c;为用户提供稳定快速的访问…
阅读更多...
Fastapi教程：使用aioredis异步访问redis

Fastapi教程：使用aioredis异步访问redis

本文将介绍如何使用 FastAPI 异步访问 Redis&#xff0c;包括环境配置、连接创建、数据库初始化、增删查改操作、键过期、管道&#xff08;pipeline&#xff09;操作以及事务管理等内容。 环境准备 首先&#xff0c;我们需要安装必要的依赖包。Redis 是一个键值存储系统&…
阅读更多...
duxapp 2024-12-09 更新 PullView可以弹出到中间，优化CLI使用体验

duxapp 2024-12-09 更新 PullView可以弹出到中间，优化CLI使用体验

UI库 修复 Button 禁用状态失效的问题Modal 组件即将停用&#xff0c;请使用 PullView 基础库 PullView side 新增 center 指定弹出到屏幕中间PullView 新增 duration 属性&#xff0c;指定动画时长新增 useBackHandler hook 用来阻止安卓端点击返回键 RN端 修复 windows …
阅读更多...
多线程与线程互斥

多线程与线程互斥

目录 引言 一、多线程设计 多线程模拟抢票 二、互斥锁 互斥量的接口 修改抢票代码 锁的原理 锁的封装&#xff1a;RAII 引言 随着信息技术的飞速发展&#xff0c;计算机软件正变得越来越复杂&#xff0c;对性能和响应速度的要求也日益提高。在这样的背景下&#xff0c;…
阅读更多...
Vue导出报表功能【动态表头+动态列】

Vue导出报表功能【动态表头+动态列】

安装依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader创建export-excel.vue组件 代码内容如下&#xff08;以element-ui样式代码示例&#xff09;&#xff1a; <template><el-button type"primary" click"Expor…
阅读更多...
ZUC256 Go Go Go！！！

ZUC256 Go Go Go！！！

文章目录 背景运行效果代码 背景 因业务需要使用ZUC算法&#xff0c;GitHub上又没有对ZUC256相对应的Go语言的实现。 吃水不忘挖井人&#xff0c;在这里感谢GmSSL及BouncyCastle两个强大的密码学库&#xff01; 本ZUC256的编写&#xff0c;参考了这两个库及中科院软件院发布的…
阅读更多...
力扣打卡12：复原IP地址

力扣打卡12：复原IP地址

链接&#xff1a;93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 这道题需要对字符串进行操作&#xff0c;我选择了三层循环&#xff0c;其实还可以递归。 我在循环时进行了剪枝&#xff0c;比如一些情况直接跳出循环。 我的代码&#xff1a; class Solution { p…
阅读更多...
The ‘.git/hooks/pre-push‘ hook was ignored because it‘s not set as executable.

The ‘.git/hooks/pre-push‘ hook was ignored because it‘s not set as executable.

Mac上使用Git提交代码提示&#xff1a; hint: The .git/hooks/prepare-commit-msg hook was ignored because its not set as executable. hint: You can disable this warning with git config advice.ignoredHook false. hint: The .git/hooks/commit-msg hook was ignored b…
阅读更多...
【实践·专业课】内存管理-存储管理-文件系统

【实践·专业课】内存管理-存储管理-文件系统

1. 基于Linux的简单区块链实现 1.1. 环境准备 确保使用的 Linux 系统&#xff08;如 Ubuntu、CentOS 等&#xff09;已安装 Python 3。 在终端输入python3命令&#xff0c;若出现 Python 解释器的版本信息等提示&#xff0c;则表示已安装&#xff1b; 若提示未找到命令&…
阅读更多...
MySQL 学习 之 批量插入数据性能问题

MySQL 学习 之 批量插入数据性能问题

文章目录 现象优化 现象 在使用 kettle 同步大数据的数据到我们的 MySQL 数据库中时发现&#xff0c;数据量大时插入效率很慢&#xff0c;大约在 2000/s 优化 在 MySQL 驱动连接中添加 rewriteBatchedStatementstrue 参数&#xff0c;减少 网络 IO DB IO 耗时 默认关闭指定…
阅读更多...
2个GitHub上最近比较火的Java开源项目

2个GitHub上最近比较火的Java开源项目

1. SpringBlade 微服务架构 标题 SpringBlade 微服务架构 摘要 SpringBlade 是一个由商业级项目升级优化而来的微服务架构&#xff0c;采用Spring Boot 3.2、Spring Cloud 2023等核心技术构建&#xff0c;遵循阿里巴巴编码规范&#xff0c;提供基于React和Vue的两个前端框架&am…
阅读更多...
MongoDB 建模调优change stream实战

MongoDB 建模调优change stream实战

MongoDB开发规范 &#xff08;1&#xff09;命名原则。数据库、集合命名需要简单易懂&#xff0c;数据库名使用小写字符&#xff0c;集合名称使用统一命名风格&#xff0c;可以统一大小写或使用驼峰式命名。数据库名和集合名称均不能超过64个字符。 &#xff08;2&#xff09…
阅读更多...
Ubuntu 环境美化

Ubuntu 环境美化

一、终端选择 zsh 参考文章使用 oh-my-zsh 美化终端 Oh My Zsh 是基于 zsh 命令行的一个扩展工具集&#xff0c;提供了丰富的扩展功能。 先安装zsh再安装Oh My Zsh 1.zsh安装 sudo apt-get install zsh 2.设置默认终端为 zsh chsh -s /bin/zsh 3.安装 oh-my-zsh 官网&…
阅读更多...
MySQL 在线 DDL 变更的一个异常问题

MySQL 在线 DDL 变更的一个异常问题

文章目录 前言1. 模拟现场2. 原因推测3. 如何解决4. 误导报错后记 前言 业务执行一条 DDL engineinnodb 失败了很多次&#xff0c;报错 ERROR 1062 (23000): Duplicate entry xxx for key ‘xxx’&#xff0c;在官方文档中也提到过&#xff0c;Online DDL 期间可能会出现 ERRO…
阅读更多...
分布式事务的前世今生-纯理论

分布式事务的前世今生-纯理论

一个可用的复杂的系统总是从可用的简单系统进化而来。反过来这句话也正确: 从零开始设计的复杂的系统从来都用不了&#xff0c;也没办法让它变的可用。 --John Gal 《系统学》 1975 1. 事务的概念 百科&#xff1a; 事务&#xff08;Transaction&#xff09;&#xff0c;一般是…
阅读更多...
微前端框架micro-app中的数据通信机制

微前端框架micro-app中的数据通信机制

在微前端框架micro-app中&#xff0c;getData方法和addDataListener方法都是用于数据通信的重要工具&#xff0c;但它们在使用方式和功能上存在一些显著的差别。 getData方法 功能&#xff1a;getData方法用于直接获取micro-app框架注入的全局对象window.microApp中存储的数据…
阅读更多...
操作系统的文件系统

操作系统的文件系统

文件系统的基本组成 ⽂件系统是操作系统中负责管理持久数据的⼦系统&#xff0c;说简单点&#xff0c;就是负责把⽤户的⽂件存到磁盘硬件中&#xff0c; 因为即使计算机断电了&#xff0c;磁盘⾥的数据并不会丢失&#xff0c;所以可以持久化的保存⽂件。 ⽂件系统的基本数据单位…
阅读更多...
vue使用百度富文本编辑器

vue使用百度富文本编辑器

1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网&#xff1a;ueditor:rich text 富文本编辑器 - GitCode 整理好的&#xff1a;vue-ueditor: 百度编辑器JSP版 因为官方的我没用来&#xff0c;所以我自己找的另外的包…
阅读更多...
浅谈自然语言处理技术（NLP）在银行领域的应用

浅谈自然语言处理技术（NLP）在银行领域的应用

自然语言处理技术（NLP）通过解析和理解海量非结构化数据，为银行领域提供了前所未有的洞察力和决策支持。这项技术的应用不仅优化了风险管理，还革新了客户服务和市场分析等多个方面。 银行系统中存在大量的非结构化信息，这些信息不仅数据量庞大，而且种类繁多，处理起来相对…
阅读更多...
最新文章

Copyright @ 2022~2023