战斗机金头蛮
战斗机金头蛮

css-before 和 after的妙用

CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。

Creative Button Styles

Creative Button Styles

 

一 基本语法

在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：

Html代码   收藏代码
  1. p:before  {}  

 

不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了：

Html代码   收藏代码
  1. img::after {}  

 

这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

  • [String] - 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
    Html代码   收藏代码
    1. a:after { content: "↗"; }  
     
  • attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
    Html代码   收藏代码
    1. a:after { content:"(" attr(href) ")"; }  
     
  • url() / uri() – 用于引用媒体文件。示例：
    Html代码   收藏代码
    1. h1::before { content: url(logo.png); }  
     
  • counter() –  调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
    Html代码   收藏代码
    1. h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }  

 

二 进阶技巧

清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：

Html代码   收藏代码
  1. .clear-fix { *overflow: hidden; *zoom: 1; }  
  2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

 

许多人喜欢给 blockquote 引用段添加巨大的引号作为背景，这种时候我们就可以用 :before 来代替 background 了，即可以给背景留下空间，还可以直接使用文字而非图片：

Html代码   收藏代码
  1. blockquote::before {  
  2.     content: open-quote;  
  3.     position: absolute;  
  4.     z-index: -1;  
  5.     color: #DDD;  
  6.     font-size: 120px;  
  7.     font-family: serif;  
  8.     font-weight: bolder;  
  9. }  

 

三 特效妙用

除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”" 。否则，其他的样式属性一概不会生效。

悬浮出现方括号

悬浮出现方括号

鼠标移上链接，出现方括号：

Html代码   收藏代码
  1. a {  
  2.     position: relative;  
  3.     display: inline-block;  
  4.     outline: none;  
  5.     text-decoration: none;  
  6.     color: #000;  
  7.     font-size: 32px;  
  8.     padding: 5px 10px;  
  9. }  
  10.   
  11. a:hover::before, a:hover::after { position: absolute; }  
  12. a:hover::before { content: "\5B"; left: -20px; }  
  13. a:hover::after { content: "\5D"; right:  -20px; }  

 

同样，我们只需要配合 display: block 和 position: absolute ，就可以将其当成两个容器，拼合成悬浮出现双边框的特效：

Html代码   收藏代码
  1. a {  
  2.     position: relative;  
  3.     display: inline-block;  
  4.     outline: none;  
  5.     text-decoration: none;  
  6.     color: #000;  
  7.     font-size: 32px;  
  8.     padding: 0 10px;  
  9. }  
  10.   
  11. /* 大框 */  
  12. a:hover::before, a:hover::after {   
  13.     content: "";  
  14.     display: block;  
  15.     position: absolute;  
  16.     top: -15%%;  
  17.     left: -14%%;  
  18.     width: 120%;  
  19.     height: 120%;  
  20.     border-style: solid;  
  21.     border-width: 4px;  
  22.     border-color: #DDD;  
  23.  }  
  24.   
  25. /* 小框 */  
  26.  a:hover::after {  
  27.     top: 0%;  
  28.     left: 0%;  
  29.     width: 100%;  
  30.     height: 100%;  
  31.     border-width: 2px;  
  32.  }  

 

用 :before 和 :after 伪类结合更多 CSS3 强大的特性，还可以完成非常多有意思的特效和 Hack ，这里权当抛砖引玉，诸位又能想出什么妙用呢？


居中

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

html如下：

 class="block" style="height: 300px;">

     class="centered">
        
haorooms案例题目

        
haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容

css如下：

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

对一个文字进行美化

 

 

左右型美化

 

HTML代码

Html代码   收藏代码
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>CSS3伪类元素（::before|::after）,文字进行美化title>  
  6. head>  
  7. <body>  
  8. <div>  
  9.     <span data-text='库'>库span>  
  10. div>  
  11. body>  
  12. html>  

 

 

 

CSS代码

Html代码   收藏代码
  1. *{  
  2.     padding: 0;  
  3.     margin: 0  
  4. }  
  5. span{  
  6.     position: relative;  
  7.     font-size: 12rem;  
  8.     color: #0099CC  
  9. }  
  10. span::before{  
  11.     position: absolute;  
  12.     font-size: 12rem;  
  13.     color: #333;  
  14.     content: attr(data-text);  
  15.     white-space:nowrap;  
  16.     width: 50%;  
  17.     display: inline-block;  
  18.     overflow: hidden  
  19. }  

 

 

 

上下型美化

 

只需要把CSS代码里的width:50%修改成height:50%就可以了，思路是一样的。

 

css-before 和 after的妙用_第1张图片

使用CSS3伪类元素（::before|::after）对文字进行美化

 

 

对多个文字进行美化

 

 

左右型美化

 

这个其实跟单个字的左右型是一样的，你只需要在HTML代码里添加多行标签包含的字就可以了。代码如下

Html代码   收藏代码
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>CSS3伪类元素（::before|::after）,多个文字美化title>  
  6. head>  
  7. <body>  
  8. <div>  
  9.     <span data-text='云'>云span>  
  10.     <span data-text='库'>库span>  
  11.     <span data-text='网'>网span>  
  12. div>  
  13. body>  
  14. html>  

 

 

 

 

上下型

 

上下型有两种方法，一种跟例子3的代码差不多，只需要把width:50%修改成height:50%就可以了。还有一种方法，除了要把 width:50%修改成height:50%，还需要在一个标签里添加多个文字，这种方法其实是最简单的。HTML代码如下

Html代码   收藏代码
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>CSS3伪类元素，文字进行美化title>  
  6. head>  
  7. <body>  
  8. <div>  
  9.     <span data-text='云库网'>云库网span>  
  10. div>  
  11. body>  
  12. html>  

 

 

 

使用CSS3伪类元素（::before|::after）对文字进行美化

 

 

动态文字美化

 

我们先从一个最简单的例子开始

 

HTML代码

Html代码   收藏代码
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>CSS3伪类元素,动态文字进行美化title>  
  6. head>  
  7. <body>  
  8. <div>  
  9.     <span data-text='云库网'>云库网span>  
  10. div>  
  11. body>  
  12. html>  

 

 

 

CSS代码

Html代码   收藏代码
  1. *{  
  2.     padding: 0;  
  3.     margin: 0  
  4. }  
  5. span{  
  6.     position: relative;  
  7.     font-size: 12rem;  
  8.     color: #0099CC  
  9. }  
  10. span::before{  
  11.     position: absolute;  
  12.     font-size: 12rem;  
  13.     color: #333;  
  14.     content: attr(data-text);  
  15.     white-space:nowrap;  
  16.     height: 50%;  
  17.     display: inline-block;  
  18.     overflow: hidden;  
  19.     transition:1s ease-in-out 0s;  
  20. }  
  21. span:hover::before{  
  22.     height: 0;  
  23. }  

 

 

 

在这里需要注意的是伪类的使用，当这两个伪类放在一起时:hover要放在:before之前，不然就没有效果了。上面这个例子是上下型的，左右型 的就可 以在这个例子稍微修改下代码就OK了，把span::before{}伪类元素里的height改成width和给这个伪类添加一个:hover{}样式 就行了，如果是左右型的，那么这里的:hover样式就得对应写成:hover{width:0}

 

 

还有一种就是左右上下一起来的我们只需要给上面这个例子中的span::before伪类选择器追加一个width:50%;span:hover::before伪类选择器也添加一个width:0;就可以了，这里的50%和0可以根据个人需要进行更改。

 

 

从上面的例子中我们可以看出用一个元素把每个文字 包含起来会更方便，不管是左右型还是上下型都适用。对于上下型的话，就看你想用哪一种效果了。

 

 

要每个字单独出来的HTML代码如下

Html代码   收藏代码
  1. <div>  
  2.     <span data-text='云'>云span>  
  3.     <span data-text='库'>库span>  
  4.     <span data-text='网'>网span>  
  5. div>  

 

 

所有文字在一个标签里HTML代码如下

Html代码   收藏代码
  1. <div>  
  2.     <span data-text='云库网'>云库网span>  
  3. div>  

 

 

但他们有一个共同点，那就是CSS样式不需要改动。


你可能感兴趣的:(前端库)

  • OpenCV实战技术应用 yzx991013 OpenCV基础全集opencv人工智能计算机视觉
    10.0角点检测应用技术实现，使用SIFT算法进行特征点检测并绘制。结果：实现过程:解析过程：1.导入模块：importcv2：导入opencv库，用于图像处理操作，包括图像读取、特征提取、图像绘制、匹配等。importnumpyasnp：导入numpy库，用于处理数组数据，在特征描述符的存储和处理中可能会用到。2.函数定义：sift_tz()：功能：使用SIFT算法进行特征点检测并绘制。实现：i
  • HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？ 前端Hardy CSShtmlcss前端javascript
    这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07
  • 数据库基础：从概念到 MySQL 实战 东锋1.3 数据库数据库mysql
    数据库基础：从概念到MySQL实战在当今数字化时代，数据的重要性不言而喻，而数据库作为数据管理的核心工具，发挥着关键作用。对于技术爱好者和开发者来说，深入了解数据库知识是必不可少的。今天，就让我们一起走进数据库的世界，从基础概念到MySQL数据库的实战应用，进行一次全面的探索。一、数据库的基本概念1.数据库发展历程数据库的发展是随着数据处理量的不断增加而逐步演进的，主要经历了四个阶段：人工管理阶段
  • SDK与API 东锋1.3 开发与应用软件构建软件工程
    1.1.SDK的定义SDK是SoftwareDevelopmentKit的缩写，翻译成中文是：软件开发工具包。SDK是一组工具、库、文档和示例代码的集合，旨在帮助开发者更轻松地创建应用程序或集成特定服务。SDK通常由硬件平台、操作系统或服务提供商提供，以便开发者能够利用其平台或服务的功能。1.2.SDK的组成SDK通常可以包括以下内容：库或框架：提供预先编写的代码库，开发者可以直接调用这些库来实现
  • ZXing库 -- 生成二维码 蓝田～ python开发语言
    引言二维码（QRCode）因其高密度的数据存储能力和易于扫描的特性，在现代社会中得到了广泛应用。ZXing是一个开源的二维码生成与读取库，它支持多种编程语言，包括Java。本指南将详细介绍如何在Java项目中使用ZXing库来生成带有透明背景的二维码。准备ZXing库com.google.zxingcore3.4.1com.google.zxingjavase3.4.1生成二维码编写代码packa
  • Redis 消息队列详解 maply Redisredis数据库缓存
    Redis消息队列详解Redis作为一个高性能的内存数据库，支持多种实现消息队列的方式，主要包括：RedisList（基于列表的队列）RedisPub/Sub（发布/订阅）RedisStream（消息流）RedisSortedSet（延迟队列）不同的方式适用于不同的场景，下面详细讲解各自的实现原理、适用场景以及示例代码。1.基于RedisList的消息队列Redis的List结构（链表）可以用来实
  • 浅谈redis zhaoyang9999 redisredis数据库java
    redis谈谈你对redis的理解非关系数据库他是单线程的：数据放在内存中，单线程操作效率高（多线程会造成CPU的上下文切换）基于内存操作（周期性的把更新的数据写入到磁盘（RDB）或者把修改操作写入追加的文件记录（AOF））五大基本数据类型strng（最常用）list（列表）底层链表可以用来消息订阅set（集合）hash（哈希hsetkeyfieldvalue）map集合更适合对象的存储Zset（
  • 适合画地图的js库对比整理，Leaflet，Google Maps，Mapbox GL JS，OpenLayers，Cesium，D3.js等对应官方网站、Github项目地址、特点、使用场景及应用 飞火流星02027 前台地图GISjavascript地图库LeafletD3.jsMapboxGLJSGoogleMapsOpenLayers
    摘要适合画地图的js库对比整理，Leaflet，GoogleMapsJavaScriptAPI，MapboxGLJS，OpenLayers，Cesium，D3.js及对应官方网站、Github项目地址、特点、使用场景地图库对比整理明细表说明维度库名Github项目特点使用场景LeafletLeaflet/Leaflet轻量级、易于使用、功能丰富。支持各种地图服务（如OpenStreetMap、Ma
  • C++vector容器的使用 jax不摆烂 C++入门到精通c++开发语言
    目录一、C++中什么是vector容器二、vector的特点三、使用场景四、对vector容器的简单使用1、vector构造函数2、vector赋值操作3、vector容量与元素个数4、vector的插入和删除5、vector数据的存取6、vector容器互换7、预留空间一、C++中什么是vector容器在C++中，vector是一个非常常用的标准模板库（STL）容器，它提供了动态数组的功能。ve
  • Docker操作指南 梦想的边缘 运维docker容器运维
    Docker操作指南概念解释：镜像（Image）：Docker将应用程序及其所需的依赖、函数库、环境、配置等文件打包在一起供运行启动，称为镜像。容器（Container）：镜像中的应用程序运行后形成的进程就是容器，容器之间是隔离，容器对外也是不可见的镜像托管平台（DockerHub）：DockerHub是一个Docker镜像的托管平台。这样的平台称为DockerRegistry。国内的网易云镜像服
  • 【Redis】Redis入门以及什么是分布式系统{Redis引入+分布式系统介绍} 阿猿收手吧！ #Redisredis数据库缓存
    文章目录介绍redis的引入分布式系统单机架构应用服务和数据库服务分离【负载均衡】引入更多的应用服务器节点单机架构分布式是什么数据库分离和负载均衡理解负载均衡数据库读写分离引入缓存数据库分库分表引入微服务介绍Theopensource,in-memorydatastoreusedbymillionsofdevelopersasadatabases，cache,streamingengine,and
  • java.sql.Date 弃用分析与替代方案 蓝田～ javamicrosoft
    引言java.sql.Date是Java标准库中的一个类，它继承自java.util.Date，主要用于在Java应用程序与数据库之间进行日期数据的传输。然而，随着Java语言的发展，java.sql.Date以及其父类java.util.Date逐渐被认为存在设计缺陷，并被新的日期时间API所替代。本文将对java.sql.Date的启用原因进行分析，并探讨其弃用原因及替代方案。启用原因分析SQ
  • Coze，Dify，FastGPT，对比 云连山 AI编程AI编程
    在当今AI技术迅速发展的背景下，AIAgent智能体成为了关键领域，Coze、Dify和FastGPT作为其中的佼佼者，各有千秋。平台介绍-FastGPT：由环界云计算公司发起，是基于大语言模型（LLM）的开源知识库问答系统。其亮点是支持Flow可视化工作流编排，在知识问答领域表现出色，拥有庞大用户群体，包括数百家企业付费客户等。网址为https://fastgpt.cn/。-Dify：苏州语灵人
  • 【黑龙江乡镇界】面图层arcgis数据shp格式乡镇名称和编码wgs84无偏移内容测评 鸿业远图科技 arcgis
    本文将详细讲解与“最新黑龙江乡镇界面图层arcgis数据shp格式乡镇名称和编码wgs84无偏移”相关的知识点，包括GIS基础、ArcGIS软件、SHP文件格式、WGS84坐标系统以及乡镇行政数据的重要性。GIS基础GIS（GeographicInformationSystem，地理信息系统）是一种用于采集、存储、管理、分析和展示所有类型地理数据的系统。它整合了地图、数据库、统计分析和计算机图形等
  • MyBatis 框架简介 天之涯上上 mybatistomcatjava
    MyBatis框架简介MyBatis是一个优秀的Java持久层框架，它主要用于简化应用程序与数据库之间的交互。通过MyBatis，开发者可以直接编写SQL语句或使用XML映射文件来操作数据库，同时保持代码的灵活性和高效性。MyBatis以其易用性、灵活性和对SQL的强大支持而闻名，尤其适用于复杂查询和高度定制化的数据库操作场景。MyBatis的主要功能和特点1.持久化操作MyBatis通过将Jav
  • JAVA开发中 MyBatis XML 映射文件 的作用 天之涯上上 javamybatisxml
    MyBatisXML映射文件（通常是以.xml结尾的文件，例如UserMapper.xml）是MyBatis框架的重要组成部分，主要用于定义SQL语句、结果映射关系以及参数绑定。它的作用是将Java方法与SQL语句关联起来，实现持久化操作（如查询、插入、更新和删除）。以下是关于MyBatisXML映射文件的详细说明：1.XML映射文件的作用1.1定义SQL语句MyBatis的核心功能是操作数据库，
  • MySQL 执行计划：优化查询性能 J老熊 MySQL实战秘籍mysql数据库开发语言后端面试性能优化系统架构
    一、什么是MySQL执行计划？MySQL执行计划（ExecutionPlan）是MySQL在执行SQL查询时，所采取的具体执行策略。它描述了查询如何从数据库中获取数据，执行的步骤顺序以及使用的索引等信息。通过执行计划，我们可以直观地看到查询语句的执行路径，从而判断是否可以优化。二、如何查看MySQL执行计划？查看执行计划有几种方式：EXPLAIN语句使用EXPLAIN可以查看单个查询的执行计划。例
  • python字符串写入excel-python 将数据写入excel weixin_37988176
    摘要链接：python第三方库——xlrd和xlwt操作Excel文件学习：http://blog.csdn.net/wangkai_123456/article/details/50457284python操作Excel读写(使用xlrd和xlrt)：http://blog.csdn.net/mr__fang/article/details/7089581Python中一般使用xlrd（exce
  • python并行计算 weixin_30894389
    0.基础并行/发：multiprocessing/threading1.concurrent2.并发：asynico3.Ipython下的并行计算：使用ipyparallel库的IPython提供了前所未有的能力，将科学Python的探索能力与几乎即时访问多个计算核心相结合。系统可以直观地与本地或网络的计算节点集群进行交互，而不管集群的实现方式如何。这种易于交互使用帮助IPython和Python
  • Python并行计算：提高效率的利器 uote_e pythonjavalinuxPython
    在现代计算领域中，处理大规模数据和复杂计算任务是常见的挑战。为了应对这些挑战，一种常见的解决方案是利用并行计算技术。Python作为一种流行的编程语言，也提供了强大的工具和库来支持并行计算。本文将介绍Python中的并行计算概念和技术，并提供一些示例代码。并行计算简介并行计算是指同时执行多个计算任务，以提高计算效率。在传统的串行计算中，任务是按顺序依次执行的，而并行计算可以将任务分解成多个子任务，
  • 【YOLO日志文件】读取和可视化events.out.tfevents文件 我是瓦力 其他YOLO目标检测人工智能计算机视觉pytorch视觉检测
    文章目录前言方法读取数据可视化数据总结前言目的：读取和可视化events.out.tfevents文件问题：yolo官方程序默认出的图样式和数据不够详细，如何提取出相应数据，方便自己查看详细和处理数据方法：通过tensorboardX和tensorboard库读取数据，再通过matplotlib进行可视化例如yolo结果数据都是固定样式图，不能方便查看其中每个点的具体数值。方法读取数据为了读取.t
  • 【wiki知识库】05.分类管理模块--后端SpringBoot模块 熊哈哈O_o 从0到1带你搭建wiki知识库springboot后端javaspring
    个人主页：哈__期待您的关注目录一、今日目标二、☀SpringBoot代码修改1.使用逆向工程生成Category表结构2.新增CategoryQueryParam3.新增CategorySaveParam4.新增CategotyQueryVo三、新增分类管理的相关接口1./category/all2./category/save3./category/delete1.我们删除的是一个二级分类2.
  • AI-知识库搭建（一）腾讯云向量数据库使用 CJ点 人工智能GPT向量数据库知识库
    一、AI知识库将已知的问答知识，问题和答案转变成向量存储在向量数据库，在查找答案时，输入问题，将问题向量化，匹配向量库的问题，将向量相似度最高的问题筛选出来，将答案提交。二、腾讯云向量数据库向量数据库_大模型知识库_向量数据存储_向量数据检索-腾讯云腾讯云向量数据库（TencentCloudVectorDB）是一款全托管的自研企业级分布式数据库服务，专用于存储、检索、分析多维向量数据。该数据库支持
  • Spring Boot + Jasypt 实现application.yml 属性加密的快速示例 oscar999 SpringBoot实战开发大全springbootjava属性加密
    Jasypt（JavaSimplifiedEncryption）是一个专为Java应用程序设计的开源加密库，旨在简化加密和解密流程，保护敏感数据如密码、API密钥等。jasypt-spring-boot-starter允许开发者在SpringBoot应用中轻松地实现加密和解密功能。本篇介绍使用jasypt-spring-boot-starter以达成在application.yml等配置文件中使用
  • mybatisplus获取返回对象（自增ID） 笑发财了1 springboot后端jarjavamavenmysql个人开发
    需求有时候我们在数据库里设置了属性自增，在添加对象后，前端需要我们返回这个属性（对象）。做法1.在该实体类的自增主键上加上注解@TableId(value="journey_location_id")，后面的type是默认值可以不写。value为数据表中的字段名@TableId(value="journey_location_id",type=IdType.AUTO)privateintjourn
  • Vue组件的概念与复用 2401_85969651 vue.jsjavascript前端visualstudiocode
    目录一、引言二、为什么使用组件二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的世界里，组件是构建用户界面的基石。它们让我们能够以一种高效、可维护的方式开发复杂的前端应用。无论是初涉Vue的新手，还是有一定经验的开发者，深入理解组件的概念与复用机制，都能极大提升开发效率与代码质量。二、为什么使用组件随着前端应用日益复杂，页面功能愈发繁多，传统的
  • Vue 组件的概念与复用 2401_85969651 vue.js前端javascriptvisualstudiocode
    目录一、引言二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的奇妙天地里，组件宛如熠熠生辉的基石，稳稳撑起用户界面构建的大厦。无论你是刚踏入Vue领域的新手，还是久经沙场的开发者，吃透组件的概念与复用窍门，都如同掌握了一把开启高效开发、优质代码大门的金钥匙，能让你的前端开发之旅畅行无阻。二、什么是Vue组件本质上，Vue组件就是一个被赋予独特魅
  • 【postgresql初级使用】在表的多个频繁使用列上创建一个索引，多条件查询优化，多场景案例揭示索引失效 韩楚风 postgresql数据库sqldatabase
    多列索引专栏内容：postgresql使用入门基础手写数据库toadb并发编程个人主页：我的主页管理社区：开源数据库座右铭：天行健，君子以自强不息；地势坤，君子以厚德载物.文章目录多列索引概述多列索引创建创建语法创建说明案例分析创建数据创建索引带首列查询不带首列查询总结结尾概述
  • 接口 V2 完善：基于责任链模式、Canal 监听 Binlog 实现数据库、缓存的库存最终一致性 Hello Dam Java开发#Java功能开发实战#场快订SaaS平台责任链模式数据库缓存数据一致性CanalBinlog
    本文介绍了一种使用Canal监听MySQLBinlog实现数据库与缓存最终一致性的方案。文章首先讲解了如何修改Canal配置以适应订单表和时间段表的变化，然后详细描述了通过责任链模式优化消息处理逻辑的方法，确保能够灵活应对不同数据表的更新需求。最后，展示了如何利用RocketMQ消费Canal消息并通过责任链处理器同步更新缓存，从而保证数据的一致性。此方法有效提升了系统的可扩展性和维护效率。️He
  • 【人工智能时代】- 开源向量数据库比较：Chroma, Milvus, Faiss,Weaviate xiaoli8748_软件开发 人工智能时代人工智能开源数据库
    语义搜索和检索增强生成(RAG)正在彻底改变我们的在线交互方式。实现这些突破性进展的支柱就是向量数据库。选择正确的向量数据库能是一项艰巨的任务。本文为你提供四个重要的开源向量数据库之间的全面比较，希望你能够选择出最符合自己特定需求的数据库。什么是向量数据库?向量数据库是一种将数据存储为高维向量的数据库，高维向量是特征或属性的数学表示。每个向量都有一定数量的维度，根据数据的复杂性和粒度，可以从数十到
  • apache 安装linux windows 墙头上一根草 apacheinuxwindows
    linux安装Apache 有两种方式一种是手动安装通过二进制的文件进行安装，另外一种就是通过yum 安装，此中安装方式，需要物理机联网。以下分别介绍两种的安装方式     通过二进制文件安装Apache需要的软件有apr,apr-util,pcre  1，安装 apr        下载地址：htt
  • fill_parent、wrap_content和match_parent的区别 Cb123456 match_parentfill_parent
    fill_parent、wrap_content和match_parent的区别:   1）fill_parent   设置一个构件的布局为fill_parent将强制性地使构件扩展，以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fill_parent将强制性让它布满整个屏幕。 2） wrap_conte
  • 网页自适应设计 天子之骄 htmlcss响应式设计页面自适应
    网页自适应设计        网页对浏览器窗口的自适应支持变得越来越重要了。自适应响应设计更是异常火爆。再加上移动端的崛起，更是如日中天。以前为了适应不同屏幕分布率和浏览器窗口的扩大和缩小，需要设计几套css样式，用js脚本判断窗口大小，选择加载。结构臃肿，加载负担较大。现笔者经过一定时间的学习，有所心得，故分享于此，加强交流，共同进步。同时希望对大家有所
  • [sql server] 分组取最大最小常用sql 一炮送你回车库 SQL Server
    --分组取最大最小常用sql--测试环境if OBJECT_ID('tb') is not null drop table tb;gocreate table tb( col1 int, col2 int, Fcount int)insert into tbselect 11,20,1 union allselect 11,22,1 union allselect 1
  • ImageIO写图片输出到硬盘 3213213333332132 javaimage
    package awt; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imagei
  • 自己的String动态数组 宝剑锋梅花香 java动态数组数组
    数组还是好说，学过一两门编程语言的就知道，需要注意的是数组声明时需要把大小给它定下来，比如声明一个字符串类型的数组：String str[]=new String[10];    但是问题就来了，每次都是大小确定的数组，我需要数组大小不固定随时变化怎么办呢？  动态数组就这样应运而生，龙哥给我们讲的是自己用代码写动态数组，并非用的ArrayList 看看字符
  • pinyin4j工具类 darkranger .net
    pinyin4j工具类Java工具类 2010-04-24 00:47:00 阅读69 评论0 字号：大中小 引入pinyin4j-2.5.0.jar包: pinyin4j是一个功能强悍的汉语拼音工具包，主要是从汉语获取各种格式和需求的拼音，功能强悍，下面看看如何使用pinyin4j。 本人以前用AscII编码提取工具，效果不理想，现在用pinyin4j简单实现了一个。功能还不是很完美，
  • StarUML学习笔记----基本概念 aijuans UML建模
    介绍StarUML的基本概念，这些都是有效运用StarUML?所需要的。包括对模型、视图、图、项目、单元、方法、框架、模型块及其差异以及UML轮廓。         模型、视与图（Model, View and Diagram）        &
  • Activiti最终总结 avords Activiti id 工作流
    1、流程定义ID：ProcessDefinitionId，当定义一个流程就会产生。 2、流程实例ID：ProcessInstanceId，当开始一个具体的流程时就会产生，也就是不同的流程实例ID可能有相同的流程定义ID。 3、TaskId，每一个userTask都会有一个Id这个是存在于流程实例上的。 4、TaskDefinitionKey和（ActivityImpl activityId
  • 从省市区多重级联想到的，react和jquery的差别 bee1314 jqueryUIreact
    在我们的前端项目里经常会用到级联的select，比如省市区这样。通常这种级联大多是动态的。比如先加载了省，点击省加载市，点击市加载区。然后数据通常ajax返回。如果没有数据则说明到了叶子节点。   针对这种场景，如果我们使用jquery来实现，要考虑很多的问题，数据部分，以及大量的dom操作。比如这个页面上显示了某个区，这时候我切换省，要把市重新初始化数据，然后区域的部分要从页面
  • Eclipse快捷键大全 bijian1013 javaeclipse快捷键
    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)Alt+↑ 当前行和上面一行交互位置(同上)Alt+← 前一个编辑的页面Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)Alt+En
  • js 笔记 函数 征客丶 JavaScript
    一、函数的使用 1.1、定义函数变量 var vName = funcation(params){ } 1.2、函数的调用 函数变量的调用：      vName(params); 函数定义时自发调用：(function(params){})(params); 1.3、函数中变量赋值 var a = 'a'; var ff
  • 【Scala四】分析Spark源代码总结的Scala语法二 bit1129 scala
    1. Some操作   在下面的代码中，使用了Some操作：if (self.partitioner == Some(partitioner))，那么Some(partitioner)表示什么含义？首先partitioner是方法combineByKey传入的变量， Some的文档说明：   /** Class `Some[A]` represents existin
  • java 匿名内部类 BlueSkator java匿名内部类
    组合优先于继承 Java的匿名类，就是提供了一个快捷方便的手段，令继承关系可以方便地变成组合关系 继承只有一个时候才能用，当你要求子类的实例可以替代父类实例的位置时才可以用继承。   在Java中内部类主要分为成员内部类、局部内部类、匿名内部类、静态内部类。 内部类不是很好理解，但说白了其实也就是一个类中还包含着另外一个类如同一个人是由大脑、肢体、器官等身体结果组成，而内部类相
  • 盗版win装在MAC有害发热，苹果的东西不值得买，win应该不用 ljy325 游戏applewindowsXPOS
    Mac mini 型号: MC270CH-A RMB:5,688   Apple 对windows的产品支持不好,有以下问题:   1.装完了xp,发现机身很热虽然没有运行任何程序！貌似显卡跑游戏发热一样，按照那样的发热量,那部机子损耗很大,使用寿命受到严重的影响!   2.反观安装了Mac os的展示机，发热量很小，运行了1天温度也没有那么高 &nbs
  • 读《研磨设计模式》-代码笔记-生成器模式-Builder bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 生成器模式的意图在于将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示（GoF） * 个人理解： * 构建一个复杂的对象，对于创建者（Builder）来说，一是要有数据来源(rawData)，二是要返回构
  • JIRA与SVN插件安装 chenyu19891124 SVNjira
    JIRA安装好后提交代码并要显示在JIRA上，这得需要用SVN的插件才能看见开发人员提交的代码。 1.下载svn与jira插件安装包，解压后在安装包(atlassian-jira-subversion-plugin-0.10.1) 2.解压出来的包里下的lib文件夹下的jar拷贝到(C:\Program Files\Atlassian\JIRA 4.3.4\atlassian-jira\WEB
  • 常用数学思想方法 comsci 工作
      对于搞工程和技术的朋友来讲，在工作中常常遇到一些实际问题，而采用常规的思维方式无法很好的解决这些问题，那么这个时候我们就需要用数学语言和数学工具，而使用数学工具的前提却是用数学思想的方法来描述问题。。下面转帖几种常用的数学思想方法，仅供学习和参考   函数思想 　　把某一数学问题用函数表示出来，并且利用函数探究这个问题的一般规律。这是最基本、最常用的数学方法
  • pl/sql集合类型 daizj oracle集合typepl/sql
    --集合类型 /*   单行单列的数据，使用标量变量   单行多列数据，使用记录   单列多行数据，使用集合（。。。）   *集合：类似于数组也就是。pl/sql集合类型包括索引表（pl/sql table）、嵌套表（Nested Table）、变长数组（VARRAY）等 */ /*     --集合方法 &n
  • [Ofbiz]ofbiz初用 dinguangx 电商ofbiz
    从github下载最新的ofbiz（截止2015-7-13），从源码进行ofbiz的试用 1. 加载测试库 ofbiz内置derby，通过下面的命令初始化测试库 ./ant load-demo (与load-seed有一些区别)   2. 启动内置tomcat ./ant start 或 ./startofbiz.sh 或 java -jar ofbiz.jar &
  • 结构体中最后一个元素是长度为0的数组 dcj3sjt126com cgcc
    在Linux源代码中，有很多的结构体最后都定义了一个元素个数为0个的数组，如/usr/include/linux/if_pppox.h中有这样一个结构体： struct pppoe_tag {     __u16 tag_type;     __u16 tag_len;   &n
  • Linux cp 实现强行覆盖 dcj3sjt126com linux
    发现在Fedora 10 /ubutun 里面用cp -fr src dest，即使加了-f也是不能强行覆盖的，这时怎么回事的呢？一两个文件还好说，就输几个yes吧，但是要是n多文件怎么办，那还不输死人呢？下面提供三种解决办法。 方法一 我们输入alias命令，看看系统给cp起了一个什么别名。 [root@localhost ~]# aliasalias cp=’cp -i’a
  • Memcached(一)、HelloWorld frank1234 memcached
    一、简介 高性能的架构离不开缓存，分布式缓存中的佼佼者当属memcached，它通过客户端将不同的key hash到不同的memcached服务器中，而获取的时候也到相同的服务器中获取，由于不需要做集群同步，也就省去了集群间同步的开销和延迟，所以它相对于ehcache等缓存来说能更好的支持分布式应用，具有更强的横向伸缩能力。 二、客户端 选择一个memcached客户端，我这里用的是memc
  • Search in Rotated Sorted Array II hcx2013 search
    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this affect the run-time complexity? How and why? Write a function to determine if a given ta
  • Spring4新特性——更好的Java泛型操作API jinnianshilongnian spring4generic type
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装JDK liuxingguome centos
    1、行卸载原来的： [root@localhost opt]# rpm -qa | grep java tzdata-java-2014g-1.el6.noarch java-1.7.0-openjdk-1.7.0.65-2.5.1.2.el6_5.x86_64 java-1.6.0-openjdk-1.6.0.0-11.1.13.4.el6.x86_64 [root@localhost
  • 二分搜索专题2-在有序二维数组中搜索一个元素 OpenMind 二维数组算法二分搜索
    1,设二维数组p的每行每列都按照下标递增的顺序递增。 用数学语言描述如下：p满足 (1),对任意的x1，x2，y，如果x1<x2,则p(x1,y)<p(x2,y); (2),对任意的x，y1,y2, 如果y1<y2,则p(x,y1)<p(x,y2); 2,问题： 给定满足1的数组p和一个整数k，求是否存在x0,y0使得p(x0,y0)=k? 3,算法分析： (
  • java 随机数 Math与Random SaraWon javaMathRandom
    今天需要在程序中产生随机数，知道有两种方法可以使用，但是使用Math和Random的区别还不是特别清楚，看到一篇文章是关于的，觉得写的还挺不错的，原文地址是 http://www.oschina.net/question/157182_45274?sort=default&p=1#answers 产生1到10之间的随机数的两种实现方式： //Math Math.roun
  • oracle创建表空间 tugn oracle
    create temporary tablespace TXSJ_TEMP   tempfile 'E:\Oracle\oradata\TXSJ_TEMP.dbf'   size 32m   autoextend on   next 32m maxsize 2048m   extent m
  • 使用Java8实现自己的个性化搜索引擎 yangshangchuan javasuperword搜索引擎java8全文检索
    需要对249本软件著作实现句子级别全文检索，这些著作均为PDF文件，不使用现有的框架如lucene，自己实现的方法如下： 1、从PDF文件中提取文本，这里的重点是如何最大可能地还原文本。提取之后的文本，一个句子一行保存为文本文件。 2、将所有文本文件合并为一个单一的文本文件，这样，每一个句子就有一个唯一行号。 3、对每一行文本进行分词，建立倒排表，倒排表的格式为：词=包含该词的总行数N=行号
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他