- 2024-12-31CSS特效032：2025庆新春，孔明灯向上旋转飘移效果
CSS常用示例100+专栏目录本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。因为常用所以记录、展示、
- 2024-12-29使用 Gap 属性给 CSS Flex 布局设置间距
使用Gap属性给CSSFlex布局设置间距我们知道cssgrid布局有gap属性，可以让行和列之间有同样的空隙，但是有的时候我们并不需要使用grid布局，而是只想对一行，或者是一列元素，调整它的间距，如果在flex下也能使用gap就好了。事情还就是这么的蹊跷，在最新的css规范中，gap属
- 2024-12-13HTML&CSS：高颜值的个人资料卡片
这段代码通过CSS的过渡和变换属性，实现了一个具有动态效果的个人资料卡片，包括鼠标悬停时的动画效果。演示效果HTML&CSS<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width
- 2024-12-12input标签和textarea文本域 清除默认样式
<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style> *{ margin:0px; padding:0px; } .outerNode{ width:100%; height:100%; background-col
- 2024-12-05防止浏览器记住密码
一、问题引入客户要求登录时，不能被浏览器截取记录密码 二、问题分析问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。三、解决方案使用css属性-webkit-text-securi
- 2024-12-02记录一个前端景深效果的实现
参考教程：https://blog.csdn.net/aaaa_aaab/article/details/143949881在上述教程的基础上有一些修改，并非是在banner上的应用：展示代码tsimporttype{CSSProperties}from'vue'conststartX=ref(0);constcurrentX=ref(0);constcloudStyle1=ref<CSSPropertie
- 2024-11-29zblogphp设置404页面的最新方法
操作步骤：新建一个 404.php 文件，复制以下代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="
- 2024-11-30大模型AIGC培训讲师人工智能培训讲师叶梓Python深度学习与AIGC培训提纲
【课程时长】8天（6小时/天）【课程简介】随着AIGC（基于AI的内容生成）技术的崛起，以ChatGPT为代表的人工智能技术正引领全球科技潮流。为了帮助学员更好地理解和应用这一技术，特推出了本课程。本课程从基础开始，深入浅出地讲解Python数据分析、机器学习等核心概念，以及各种常用经典算
- 2024-08-08高性能图片懒加载
之前都是监听页面滚动，使用window.addEventListener("scroll", () => {})然后判断图片是否进入可视区域，在进行加载图片（data-src自定义属性，赋值给src属性）这里介绍一个高性能的图片懒加载方式，浏览器原生自带的IntersectionObserverAPI（兼容性也挺好），用于异步检测目标元素与父级
- 2024-07-27盒子模型-小了解
前言：什么是盒子模型？我们可以把所有的html标签都看作一个盒子，这些盒子就像我们生活中的快递，每个盒子都存在内容（买的物品）、保护层（内边距）、快递盒（边框）、快递之间的距离（外间距）。所以，盒子模型主要定义了四个区域：内容（content）、内边距（pading）、边框（border）、外间距（margin）。盒子模型
- 2024-07-26前端绘制一个好看炫酷的流程图
文章目录一、效果图二、直接上代码一、效果图因为是图片，所以不能展示动画效果，你们要看具体效果，就复制下面的代码到自己的项目里面去二、直接上代码<template><divclass="part"><divclass="line_box"><svgheight="505"width="450"><d
- 2024-07-15html+css实现水印
大概原理就是写一个div,宽高同视口,然后固定定位,层级高低看需要然后使用pointer-events:none;pointer-events CSS属性指定在什么情况下(如果有)某个特定的图形元素可以成为鼠标事件的 targetnone元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属
- 2024-06-21rank
<template><divclass="ting-rank"><ul><liv-for="(item,index)inlist":key="index+item.text"style="background-image:url('http://42.193.126.16:9000/sjoss/upload/20240618/550a3
- 2024-06-21自定义组件获取接口数据
<template><divclass="ting-title"><spanclass="text">{{text}}</span></div></template><script>exportdefault{name:'TingTitle',data:()=>{
- 2024-06-14HTML的学习总结#4
这篇是对今天的学习进行总结，今天的学习内容不是很多，但是含金量很大，所以我会认真的总结介绍，也希望大家跟我一起学习认识。文字阴影 主要是给文字添加阴影效果，使得文字更加着重和增强显示效果。<style>/*水平位置垂直位
- 2024-06-03Vue3简单项目流程分享——工作室主页
Vue3简单项目流程分享——工作室主页零、写在最前以下是项目相关的一些链接：源代码GitHub仓库（需要魔法上网）：仓库网页示例（需要魔法上网）：网页示例UI图（来源@设计师杨贺）：MasterGo主页补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。如果你想要运行源代码：
- 2024-05-11el-cascader设置为任意一级选项，去除单选按钮以及点击关闭下拉选择
1、标签组件：<el-cascaderref="cascaderRef1"popper-class="popper-cascader"@change="handleChangeCascader(cascaderRef1)"></el-cascader>2、给popper-cascader设置样式，在element-ui,scss里编写.popper-cascader.el-cascader-panel
- 2024-05-08网页布局-------三角制作
使用border设置三角形，通过transparent隐藏多余的内容<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><
- 2024-04-29Typora Notes
<!doctypehtml><htmlstyle='font-size:18px!important'><head><metacharset='UTF-8'><metaname='viewport'content='width=device-widthinitial-scale=1'><styletype='text/css&
- 2024-04-29网页布局------导航栏悬浮特效
实现效果：当鼠标指针悬浮在导航栏上会出现内阴影效果页面结构<ul><li>首页</li><li>知识星球</li><li>趣味问答</li><li>奖品</li></ul>页面样式*{margin:0;padding:0;
- 2024-04-18css 动画之无缝跑马灯
<divclass="target-top"style="overflow:hidden"><divclass="target-img"><divv-for="itemintargetFors":key="item.id">...//内容不重要</div></div>
- 2024-03-26element 文本域设置 隐藏边框，禁止缩放，自动换行...
1.隐藏边框:deep(.el-textarea__inner){box-shadow:0000px;}:deep(.el-textarea__inner:hover){box-shadow:0000px;}:deep(.el-textarea__inner:focus){box-shadow:0000px;} 2.禁止缩放resize="none"3.自动换行 autosizeminRows:5