（CSS2） compact分配对象为块对象或基于内容之上的内联对象（CSS3） run-in分配对象为块对象或基于内容之上的内联对象（CSS3） ruby将对象作为表格脚注组显示（CSS3） ruby-base将对象作为表格脚注组显示（CSS3） ruby-text将对象作为表格脚注组显示（CSS3） ruby-base-group将对象作为表格脚注组显示（CSS3） ruby-text-group将对象作为表格脚注组显示（CSS3） box将对象作为弹性盒模型显示（CSS3）-webkit-box;-moz-box;-o-box;-ms-box;inline-box将对象作为内联块级弹性盒模型显示（CSS3）
clip:rect(0 auto 35px 10px) 上边不剪切，右边不剪切，下边从第35个像素开始剪切直至最底部，左边剪10
overflow:visible 不剪切内容 hidden将超出对象尺寸的内容进行裁剪，将不出现滚动条。 scroll将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。 auto在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
第三节：弹性盒模型（box-orient子元素排列方式、box-pack子元素对齐方式、box-align子元素对齐方式、box-flex子元素如何分配剩余盒子的剩余空间、box-flex-group子元素的所属组、box-ordinal-group子元素的显示顺序、box-direction子元素顺序是否相反、box-lines子元素是否可以换行显示）要使其生效需给父级元素display为box或者是inline-box；注意浏览器
box-orient 定义盒子内部元素的方向排列方式 horizontal(水平线上从左到右) vertical(垂直线上从上到下) inline-axis(水平编排)、block-axis(垂直编排)、inherit(继承父级元素)
box-pack:start 设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐） center设置弹性盒模型对象的子元素居中对齐 end设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐） justify设置或弹性盒模型对象的子元素两端对齐
box-align:start 设置弹性盒模型对象的子元素从开始位置对齐 center设置弹性盒模型对象的子元素居中对齐 end设置弹性盒模型对象的子元素从结束位置对齐 baseline设置弹性盒模型对象的子元素基线对齐 stretch设置弹性盒模型对象的子元素自适应父元素尺寸
box-flex:0让子元素按照父元素的宽度划分 将一个容器分成6份，子对象a分1份，b分2份，c分3份（动态的分配剩余空间）
box-flex-group:1 动态的给数字较大的组分配其内容所需的实际空间（如无内容、paddin、border则不占空间），剩余空间则均分给数字最小的那个组（可能有1个或多个元素）
box-ordinal-group:1 调整三个栏目的先后顺序，数字越大越靠后， 数值较低的元素显示在数值较高元素的前面，相同数值的元素，它们的显示顺序取决于它们的代码顺序
box-direction:normal 确定内部元素的排列顺序 normal、reverse（翻转）、inherit 设置弹性盒模型对象的子元素按正常顺序排列 reverse反转弹性盒模型对象的子元素的排列顺序
box-lines:single 弹性盒模型对象的子元素只在一行内显示 multiple弹性盒模型对象的子元素超出父元素的空间时换行显示
第四节：尺寸（width、min-width、max-width、height、min-height、max-height） 第五节：外补白（margin、margin-top、margin-right、margin-bottom、margin-left） 第六节：内补白（padding、padding-top、padding-right、padding-bottom、padding-left） 第七节：边框（border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、
border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影 ）
border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat none：无背景图片。
border-image:url(skin/border.png) 27/27px;
box-shadow none：无阴影 ① ② ③ ④ box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
box-reflect：none | | | ` = above | below | left | right = | = none | | | | |
第八节：背景（background、background-color、
background-image、background-repeat、background-attachment背景图片是滚动还是固定、background-position、background-origin、background-clip、background-size、multiple-background混合属性 ）
background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变
第九节：颜色（color、opacity） 第十节：字体（font、font-style、font-weight、font-size、font-family、font-stretch） 第十一节：文本（text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size）
text-overflow clip：当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。 ellipsis：当对象内文本溢出时显示省略标记（…）。
text-transform none：无转换 capitalize：将每个单词的第一个字母转换成大写 uppercase：转换成大写 lowercase：转换成小写 full-width： full-size-kana：
white-space normal：默认处理方式。 pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象 nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
direction ltr：文本流从左到右。 rtl：文本流从右到左
unicode-bidi normal：对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。 embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
bidi-override 严格按照direction属性的值重排序。忽略隐式双向运算规则。 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用 假如您想应用direction属性于内联元素的文本，您必须设定unicode-bidi属性为embed或bidi-override。
第十二节：列表（list-style、list-style-image、list-style-position、list-style-type）
list-style-type disc：实心圆(CSS1) circle：空心圆(CSS1) square：实心方块(CSS1) decimal：阿拉伯数字(CSS1) lower-roman：小写罗马数字(CSS1) upper-roman：大写罗马数字(CSS1) lower-alpha：小写英文字母(CSS1) upper-alpha：大写英文字母(CSS1) none：不使用项目符号(CSS1) armenian：传统的亚美尼亚数字(CSS2) cjk-ideographic：浅白的表意数字(CSS2) georgian：传统的乔治数字(CSS2) lower-greek：基本的希腊小写字母(CSS2) hebrew：传统的希伯莱数字(CSS2) hiragana：日文平假名字符(CSS2) hiragana-iroha：日文平假名序号(CSS2) katakana：日文片假名字符(CSS2) katakana-iroha：日文片假名序号(CSS2) lower-latin：小写拉丁字母(CSS2) upper-latin：大写拉丁字母(CSS2)
第十三节：表格（table-layout、border-collapse、border-spacing、caption-side、empty-cells） 第十四节：内容（content、counter-increment、counter-reset、quotes）
content normal：默认值。表现与none值相同 none：不生成任何值。 [ ]
第十五节：用户user interface（outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode）
outlineoutline:2px solid #f00;border:3px solid #333; outline-width
outline-style none：无轮廓。与任何指定的outline-width值无关 dotted：点状轮廓。 dashed：虚线轮廓。 solid：实线轮廓 double：双线轮廓。两条单线与其间隔的和等于指定的outline-width值 groove：3D凹槽轮廓。 ridge：3D凸槽轮廓。 inset：3D凹边轮廓。 outset：3D凸边轮廓。 outline-offset：4px； cursor [ [ ] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
resize none：不允许用户调整元素大小。 both：用户可以调节元素的宽度和高度。 horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。 none：不允许用户调整元素大小。 both：用户可以调节元素的宽度和高度。 horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。
第十六节：多栏multi-column（columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside）
columns:200px 3;
第十七节：2D变换（transform、transform-origin）
translate移动。translate（X（距离left位置）,Y（距离top位置））。以坐标轴原点为中心进行位移，正值向右下角移动。 1旋转。transfrom：rotate（10deg）。平面旋转多少度 2斜拉。skew（X,Y）。倾斜多少度 3缩放。scale（X,Y）。放大或缩小多少倍 4移动。translate（X，Y）
transfrom：rotate（30deg）。
所有2D转换方法连在一起就是matrix()。矩形方式进行变换matrix(); 改变起点位置：transfrom-origin：bottom left
eg：transfrom：scale（1.5）。
深究矩阵 matrix
transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）//a=1,b=0,c=0,d=1,e=30,f=30。 假设中心坐标为（0 ，0） x坐标为 ax+cy+e = 1_0 + 0_0 +30 = 30。 y坐标为 bx+dy+f = 0_0 + 1_0 + 30 = 30。 中心坐标变为了（30 ，30） 向右下角偏移，transfrom：translate（30px, 30px） 所以matrix只用关心最后两个参数就可以了 缩放：transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）当中的1是缩放的参数，所以写为transfrom：matrix（scalex ,0, 0 ,scaley ,30 ,30）
第十八节：过渡
transition-property：过渡效果的css属性名称。none、all、indent transition-duration：过渡的时长。 transition-timing-function：过渡速度曲线。平缓还是先慢后快。 transition-delay：过渡延迟。
第十九节：动画（animation-timing-function）
animation-name：`动画名称。animation-delay：动画延迟。animation-duration：动画运动周期时长。animation-timing-function：动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）animation-iteration-count：动画播放次数。0、infinite。animation-direction：动画是否在下一个周期逆向播放。normal、alternate。animation-play-state：动画是否正在运行或暂停。
简写：animation：name duration timing-function delay
@keyframes animationName{
你可能感兴趣的:(前端,css3)
Claude 3.7 Sonnet 根据UI设计稿生成前端html页面
徐同保
前端 ui html
UI设计稿：提示词：你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在标签里，类名都以"m-"开头AI回答的结果：根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在标签里。```html账单明细/*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-
前端解决跨域的几种方案
爱分享的程序员
前端 前端
以下是前端解决跨域问题的7种主流方案，根据应用场景和实现难度排序，附详细实现示例：一、开发环境解决方案1.WebpackDevServer代理（推荐）//vue.config.js/webpack.config.jsmodule.exports={devServer:{proxy:{'/api':{target:'http://backend-domain.com',//后端地址changeOri
webpack的SplitChunksPlugin和在路由或组件级别进行拆分
混血哲谈
webpack 前端 node.js
请问下面内容中提到的SplitChunksPlugin和“在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分”在前端项目中如何应用？“”“在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。您可以详细了解SplitChunksPlugin如何帮助您实现这一点。使用客户端框架时，在路由或组件级别
JavaScript 中的性能优化：从基础到高级技巧
lina_mua
深入 javascript 性能优化 开发语言
1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优
论云原生架构及其应用
桃花键神
云原生 架构
摘要：2021年7月，我所在的公司承担了广东省某医院的网上预约挂号项目的开发工作，我有幸作为系统架构师参与整个系统的开发过程，并负责了系统架构设计工作。该系统以预约挂号为主线，其中包括管理平台审核、确认挂号、订单支付、更新预约状态等业务模块。本文以网上预约挂号项目为例，详细论述了云原生架构在该项目中的具体应用。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三
useSyncExternalStore 的应用
前端
我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：修能学而不思则罔，思而不学则殆。---《论语·为政》WhatuseSyncExternalStoreisaReactHookthatletsyousubscribetoanexternalstore.useSyncExternalStore是一个支持让用户订阅外部
从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录
算法探索者
前端
一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可
浏览器工作原理深度解析（阶段一）：从 URL 到页面渲染的完整流程
码农的时光故事
javascript 前端
一、浏览器工作流程概述作为前端开发者，我们每天都在与浏览器打交道，但多数人对其内部工作机制却知之甚少。实际上，浏览器的核心功能就是将用户输入的URL转换为可视化的网页。这一过程大致分为六个关键步骤：网络请求：通过HTTP/HTTPS协议获取页面资源构建DOM树：解析HTML代码生成文档对象模型样式计算：解析CSS规则并应用到对应元素布局渲染：计算元素位置和尺寸生成渲染树合成优化：将渲染层合并为位图
解析：浏览器事件冒泡及事件捕获
C860
浏览器 浏览器
今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点
pear-admin-boot开发框架使用记录（三）
后青春期的诗go
经验分享 java spring boot spring log4j mybatis
一、实现部门选择操作用于从组织架构里选择出部门的操作，如开发日志管理模块，创建人新增日志时可以通过选择框选择相应共享的部门。数据库表调整在数据表添加2个字段：sharedeptid共享部门idvarcharsharedeptname共享部门名称varchar前端html页面调整页面添加如下代码：共享部门前端JS调整添加如下代码：letdtree=layui.dtree;dtree.renderSe
基于koajsAdmin+mongodb的后台管理快速开发框架安装运行记录
后青春期的诗go
经验分享 mongodb 数据库 node.js vue.js elementui
前置操作下载源码源码地址：https://gitee.com/zhoushuigui/koajs-admin安装mongodb数据库并连接安装yarnnpminstallyarn-g安装nodemonnpminstallnodemon-g前端运行安装依赖进入项目根目录，在命令行执行如下命令安装依赖：yarn--registry=https://registry.npmmirror.com启动服务y
【微信小程序（云开发模式）变通实现DeepSeek支持语音】
技术与健康
微信小程序 notepad++ 小程序
整体架构前端（微信小程序）：使用微信小程序云开发能力，实现录音功能。将录音文件上传到云存储。调用云函数进行语音识别和DeepSeek处理。界面模仿DeepSeek，支持文本编辑。后端（云函数+Node.js）：使用云函数调用腾讯云语音识别（ASR）服务。调用DeepSeekAPI处理文本。步骤1：初始化云开发环境在微信开发者工具中创建小程序项目，并开通云开发。在project.config.jso
Web Component 教程（六）：基于 Stencil 脚手架开发 Web Component
乐闻x
Web Component 学习记录 前端 web component stencli
前言在现代前端开发中，WebComponent是一种逐渐受到关注的技术，它允许我们创建可以在任何框架或库（如React,Angular,Vue等）中使用的可重用组件。而Stencil是一个强大的开发工具，它帮助我们轻松构建这些WebComponent，使开发过程更高效、更简洁。那么，究竟如何使用Stencil来开发WebComponent呢？今天，我们就来探索这一主题，从安装和设置，到创建和使用组
Angular Material表格的动态列宽设置
t0_54program
编程问题解决手册 angular.js 前端 javascript 个人开发
在前端开发中，AngularMaterial表格（mat-table）是非常流行的组件之一。它提供了丰富的功能，如排序、分页和过滤等。然而，有时我们需要动态调整表格列的宽度，以适应不同的数据和用户需求。本文将介绍如何在TypeScript中获取mat-table的列宽，并据此设置相应的过滤器宽度。问题描述在使用AngularMaterial表格时，如何获取每个列的宽度？例如，我们希望为每一列设置一
HTML 教程：从零开始掌握常用语法
LoveYa!
前端 html 前端 笔记 学习
免费无广纯净版微信小程序测mbti很有趣，不需要任何授权，也不需要登录，直接就是测，几分钟了解自己的人格mbti，快来试试吧。可以微信直接搜索小程序名“一秒MBTI”HTML教程：从零开始掌握常用语法欢迎来到HTML的世界！HTML（HyperTextMarkupLanguage，超文本标记语言）是网页开发的基石，它负责定义网页的结构和内容。无论你是想成为一名前端开发者，还是仅仅想了解网页背后的魔
解决npm run dev运行后报错：”Could not read package.json: Error: ENOENT: no such file or directory“
moz与京
实训期间报错整理 npm json 前端
在启动一个项目的前端时，执行npmrundev命令，结果报错如下：根据报错提示："npmerrorerrno-4058"通常是由于文件系统权限问题或文件路径问题导致的。这个错误码表示在执行某个操作时，npm无法访问或修改某个文件或目录。在这个情境下，想到是因为没有指定项目文件就在终端执行了命令。先cd到目标文件夹中：cdclient进入到前端文件夹目录，再执行原命令，发现项目启动成功。这一报错解决
六十天前端强化训练之第二十一天大师级详解 React Context API：从原理到实战
编程星辰海
# 前端 前端 react.js javascript React Context API
=====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、庖丁解牛：深入理解ContextAPI1.1设计哲学与运转机制工作原理三步曲：1.2核心三剑客详解1.3性能优化要诀二、手把手实现主题切换系统2.1完整代码实现（逐行注释版）2.2配套CSS样式设计三、关键知识点拆解3.1状态初始化策略3.2CSS变量注入原理3.3性能优化实践3.4可访问性最佳实践四、
【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境
Mr.小朱同学
Web前端笔记 前端 笔记 vue.js Vue3 Vite 搭建项目环境
这篇文章，主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。目录一、搭建项目环境1.1、前提条件1.2、开始搭建1.3、下载依赖1.4、启动工程一、搭建项目环境目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。1.1、前提条件在创建Vu
Postman 从入门到精通的详细图文教程指南
清尘沐歌
postman 测试工具
API已经成为连接不同系统和服务的重要桥梁，无论你是前端开发者、后端工程师还是测试人员，掌握API的开发和测试技能都是非常重要的。Postman是一个广受欢迎的API开发工具，它不仅能够帮助你轻松发送HTTP请求，还提供了强大的测试、调试和协作功能。本系列教程旨在帮助你从零开始，逐步掌握Postman的各项功能，从基础的请求发送到高级的自动化测试和团队协作。无论你是初学者还是有一定经验的开发者，都
Postman高级功能深度解析：Mock Server与自动化监控——构建高效API测试与监控体系
测试渣
测试工具 postman
引言：Postman在API开发中的核心价值在数字化时代，API（应用程序编程接口）已成为系统间交互的“神经网络”，其质量直接影响用户体验与业务连续性。然而，传统API测试面临两大挑战：开发阶段依赖：前端与后端团队需同步开发，导致进度延迟；测试环境复杂：生产数据敏感、测试场景覆盖不全、性能压力模拟困难。Postman作为全球领先的API开发与测试工具，通过其MockServer与自动化监控两大核心
框架基本知识总结 Day17
小斌的Debug日记
框架学习日记 vue redis gitee
token续命每一次操作后都要延长token的过期时间，长时间不操作token才会过期登录延长时间应该是在拦截器中做的，因为它会拦截所有请求前端的拦截需要用到路由守卫响应式“响应式”指的是系统能根据数据变化做出响应，并自动更新相关部分的视图。Vue.js通过数据的变化来响应用户的操作或者应用的状态变化，自动触发视图更新。响应式的核心思想是：当数据发生变化时，视图会自动更新组合式api的响应是数据用
TypeScript语言的计算机视觉
苏墨瀚
包罗万象 golang 开发语言 后端
使用TypeScript进行计算机视觉：一个现代化的探索引言随着人工智能和机器学习的快速发展，计算机视觉（ComputerVision）成为了一个极具活力的研究领域。计算机视觉旨在使计算机能够“看”和“理解”数字图像或视频中的内容。近年来，TypeScript作为一种现代化的编程语言，因其类型安全和更好的开发体验，逐渐在前端和后端开发中得到了广泛应用。本文将探讨如何使用TypeScript进行计算
抖音用户视频批量下载工具开发全解析
木觞清
音视频 python
一、逆向工程原理剖析1.1抖音Web端防护体系抖音采用五层防御机制保护数据接口：graphLRA[浏览器指纹检测]-->B[请求参数签名]B-->C[Cookie动态验证]C-->D[请求频率限制]D-->E[IP信誉评级]1.2核心参数解密参数名称作用原理生成方式有效期x-bogus请求签名防篡改前端JS生成（需反混淆）5分钟msToken设备会话标识首次访问自动生成30分钟__ac_signa
01.AJAX 概念和 axios 使用
Lv547
# AJAX ajax 前端 javascript
01.AJAX概念和axios使用1.什么是AJAX?使用浏览器的XMLHttpRequest对象与服务器通信浏览器网页中，使用AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页2.什么是服务器？可以暂时理解为提供数据的一台电脑3.为何学AJAX?以前我们的数据都是写在代码里固定的,无法随时变化现在我们的数据可以从服务器
TypeScript模块 vs JavaScript模块：现代化开发的模块化之道
念九_ysl
typescript 前端 typescript
一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
SvelteKit 最新中文文档教程（7）—— 构建和部署
前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
前端性能优化之SSR优化
xiangzhihong8
前端 前端
我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应
使用CSS3实现炫酷的3D翻转卡片效果
木木黄木木
css3 3d 前端
使用CSS3实现炫酷的3D翻转卡片效果这里写目录标题使用CSS3实现炫酷的3D翻转卡片效果项目介绍技术要点分析1.3D空间设置2.核心CSS属性3.布局和定位实现难点和解决方案1.3D效果的流畅性2.卡片内容布局3.响应式设计性能优化建议浏览器兼容性总结项目介绍在这个项目中，我们使用纯CSS3技术实现了一个具有3D翻转效果的交互卡片。当用户将鼠标悬停在卡片上时，卡片会沿Y轴优雅地旋转180度，展示
前端面经分享（25/03/18）
CreatorRay
react 面试 前端 前端 面试 react
北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年上家公司的项目为什么会选择MQTT进行通信React常用Hook为什么React不能在条件语句里用Hook前端常见的优化策略React如何捕获子组件的错误React给节点加key会有什么效果最近俩家公司都用WebSocket做了什么HTTP各个版本的区别跨域的常见解决方案前端常见布局WebSocket和SSE的区别A页面滚动到一
智慧物流数字管理系统设计案例分析
UI设计开发服务商
数据分析 数据挖掘
你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一
windows下源码安装golang
616050468
golang安装 golang环境 windows
系统： 64位win7， 开发环境：sublime text 2， go版本： 1.4.1
1. 安装前准备(gcc, gdb, git)
golang在64位系
redis批量删除带空格的key
bylijinnan
redis
redis批量删除的通常做法：
redis-cli keys "blacklist*" | xargs redis-cli del
上面的命令在key的前后没有空格时是可以的，但有空格就不行了：
$redis-cli keys "blacklist*"
1) "blacklist:12:
[email protected] oracle正则表达式的用法
0624chenhong
oracle 正则表达式
方括号表达示
方括号表达式
描述
[[:alnum:]]
字母和数字混合的字符
[[:alpha:]]
字母字符
[[:cntrl:]]
控制字符
[[:digit:]]
数字字符
[[:graph:]]
图像字符
[[:lower:]]
小写字母字符
[[:print:]]
打印字符
[[:punct：]]
标点符号字符
[[:space:]]
2048源码(核心算法有，缺少几个anctionbar，以后补上)
不懂事的小屁孩
2048
2048游戏基本上有四部分组成，
1：主activity，包含游戏块的16个方格，上面统计分数的模块
2：底下的gridview，监听上下左右的滑动，进行事件处理，
3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字
4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现)
写代码的流程
1：设计游戏的布局，基本是两块，上面是分
jquery内部链式调用机理
换个号韩国红果果
JavaScript jquery
只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this 因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象）
function create(type){
var element=document.createElement(type);
//this=element;
你订酒店时的每一次点击 背后都是NoSQL和云计算
蓝儿唯美
NoSQL
全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。
云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。
Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
java笔记1
a-john
java
1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。
2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。
3，面向对象程序设计方式的特性：
3.1 万物皆为对象。
C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一）
aijuans
C/C++求职面试必备考点
找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。
后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
程序员写代码时就不要管需求了吗？
asia007
程序员不能一味跟需求走
编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。
我的技术不是很好，但是就不代
Activity的四种启动模式
百合不是茶
android 栈模式启动 Activity的标准模式启动 栈顶模式启动 单例模式启动
android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;
启动模式xml中配置
<activity android:name=".MainActivity" android:launchMode="standard&quo
Spring中@Autowired标签与@Resource标签的区别
bijian1013
java spring @Resource @Autowired @Qualifier
Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。
1. @Autowired @Autowired是Spring 提供的，需导入 Package:org.springframewo
Changes Between SOAP 1.1 and SOAP 1.2
sunjing
Changes Enable SOAP 1.1 SOAP 1.2
JAX-WS
SOAP Version 1.2 Part 0: Primer (Second Edition)
SOAP Version 1.2 Part 1: Messaging Framework (Second Edition)
SOAP Version 1.2 Part 2: Adjuncts (Second Edition)
Which style of WSDL
【Hadoop二】Hadoop常用命令
bit1129
hadoop
以Hadoop运行Hadoop自带的wordcount为例，
hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行
Hadoop HDFS相关命令
hadoop fs -ls
列出HDFS文件系统的第一级文件和第一级
java异常处理（初级）
白糖_
java DAO spring 虚拟机 Ajax
从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。
最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
记录整理-工作问题
braveCS
工作
1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。
2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
org.apache.tools.zip实现文件的压缩和解压，支持中文
bylijinnan
apache
刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦）
后改用org.apache.tools.zip
org.apache.tools.zip的使用网上有更简单的例子
下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法
import java.io.BufferedReader;
import java.io.BufferedWrit
读书笔记-4
chengxuyuancsdn
读书笔记
1、JSTL 核心标签库标签
2、避免SQL注入
3、字符串逆转方法
4、字符串比较compareTo
5、字符串替换replace
6、分拆字符串
1、JSTL 核心标签库标签共有13个，
学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html
功能上分为4类：
(1)表达式控制标签：out
[物理与电子]半导体教材的一个小问题
comsci
问题
各种模拟电子和数字电子教材中都有这个词汇-空穴
书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴
我现在回过头翻大学时候的教材,觉得这个
Flashback Database --闪回数据库
daizj
oracle 闪回数据库
Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。
在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
简单排序:插入排序
dieslrae
插入排序
public void insertSort(int[] array){
int temp;
for(int i=1;i<array.length;i++){
temp = array[i];
for(int k=i-1;k>=0;k--)
C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容
dcj3sjt126com
c
# include <stdio.h>
int main(void)
{
int * p; //等价于 int *p 也等价于 int* p;
int i = 5;
char ch = 'A';
//p = 5; //error
//p = &ch; //error
//p = ch; //error
p = &i; //
centos下php redis扩展的安装配置3种方法
dcj3sjt126com
redis
方法一
1.下载php redis扩展包 代码如下 复制代码
#wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz
2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
线程池(Executors)
shuizhaosi888
线程池
在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦
public interface Executor {
void execute(Runnable command);
}
public class RunMain implements Executor{
@Override
pub
openstack 快速安装笔记
haoningabc
openstack
前提是要配置好yum源
版本icehouse，操作系统redhat6.5
最简化安装，不要cinder和swift
三个节点
172 control节点keystone glance horizon
173 compute节点nova
173 network节点neutron
control
/etc/sysctl.conf
net.ipv4.ip_forward =
从c面向对象的实现理解c++的对象（二）
jimmee
C++ 面向对象 虚函数
1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。
2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数
3. c++中类的析构函数，就时回收内存(free)
4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。
专门在
如何让那个一个div可以拖动
lingfeng520240
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml
第10章 高级事件（中）
onestopweb
事件
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
计算两个经纬度之间的距离
roadrunners
计算 纬度 LBS 经度 距离
要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。
/**
*
* @param longitudeA
* 经度A点
* @param latitudeA
* 纬度A点
* @param longitudeB
*
最具争议的10个Java话题
tomcat_oracle
java
1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。
2、Java 9 即将到来
Oracle早在8月份就发布
zoj 3826 Hierarchical Notation(模拟)
阿尔萨斯
rar
题目链接：zoj 3826 Hierarchical Notation
题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。
解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
outline-width 
ax+cy+e 为水平坐标。bx+dy+f 为垂直坐标。