前端知识
[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页
2024-01-24 15:01:15
966
207
页面布局设计 “三行模式”或“三列模式” “三行二列”、“三行三列”模式 多行多列复杂模式导航菜单设计 一级水平导航菜单 二级水平导航菜单课后练习网页标题：1行1列网页标题：3行1列网页标题：1行2列网页标题：3行2列网页标题：4行3列
2024-01-27 00:01:05
383
166
文字背景填充满了，无法跟动态图一样那么细。别急，css里还有有个background-size属性，设置一下就可以了。然后把100%改成0 再给div添加：hover鼠标滑过长度成100%，加个过渡动画。到这里发现为什么跟第一张效果图不一样啊，不应该是进去从上面出来然后再下面消失吗。要实现这种效果只需要使用到background这个属性了。这时候就需要再：hover属性里面加入。然后在设置background属性。这时候页面就会出现这样子。今天来实现下面图片的效果。就跟效果图一模一样了。_css鼠标悬浮显示下划线
2024-01-27 00:01:59
964
569
公式：主图张数 * 单个图片宽度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 为什么设置 -600px？公式：主图张数 * 单个图片高度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 重点：单个图片宽度 200，相当于默认不动可见 3 个 *//* 重点：单个图片高度 150，相当于默认不动可见 1 个 *//* 重点：盒子宽度 600 *//* 重点：盒子宽度 150 */_css走马灯效果
2024-01-26 10:01:53
683
9
less（css预处理语言）Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。_css less
2024-01-26 00:01:45
784
245
当我给盒子添加 点击事件的时候 他会事件冒泡到父元素上，所以 给父元素点击事件，那么红色的方块也会触发事件。这样就可以达到 让伪元素添加事件的效果了。思考：如何让 红色方块点击后会有事件？也可以避免组件冗余，添加类名即可。_js获取伪元素并设置点击事件
2024-01-26 00:01:41
657
469
本次案例我们分析一下数据可视化页面最常见的热点图是如何实现的，其原理并不复杂，只需要用到CSS3动画属性 animation 以及 @keyframe 关键帧即可，重点是向外扩散的环如何布局比较合适，以及每个环怎么扩散何时扩散比较合适。_css 大数据
2024-01-26 00:01:32
571
294
2023跨年代码（烟花 自定义文字 背景音乐 雪花 倒计时）简单 的 线上倒计时跨年烟花盛宴_2024年跨年代码
2024-01-26 00:01:30
947
888
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css。scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。1、scroll-snap-type（吸附模式：添加到父元素中）snap这个方法，可以比较方便的实现想要的效果了，基本够用。_css 自动吸附
2024-01-26 00:01:20
133
329
我们浏览网页的时候总能看见一些炫酷的特效，比如百叶窗效果，本文我们就用HTML CSS制作一个百叶窗小项目，适合刚学前端的小伙伴，使用代码简单易懂，很容易上手，学习完本文后，相信你也能敲出来属于自己的百叶窗效果，改变图片及相应盒子的大小，有女朋友的可以试着放几张在一起的照片，也是一件非常浪漫的事_html百叶窗效果
2024-01-26 00:01:10
926
528
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。_flex布局
2024-01-26 00:01:27
124
276
父级div设置了display:flex，子元素的总宽度超过父元素的宽度之后，所有子元素的width都失效了，变成了平分父元素的宽度(类似flex=1)。解决：给父元素加上flex-flow:row wrap 之后就可以让子元素保持设置的宽度并且换行。如何让flex布局让超出宽度的子元素自动换行？_flex自动换行
2024-01-25 11:01:06
572
737
textarea文本过长换行问题_el-input textarea 换行
2024-01-25 11:01:36
47
637
网页标题：三列自适应宽度网页标题：多行三列自适应宽度一级水平导航菜单：采用“无序列表 超链接”设计
2024-01-25 11:01:17
679
599
圣诞节马上就要到了，不知道给自己喜欢的人准备什么样的惊喜吗？作为一名程序员，当然是用编程制作专属于她or他的圣诞树！_圣诞树代码
2024-01-25 11:01:06
361
228
1.Neumorphism.io2.透明玻璃态生成器3.盒子阴影4.CSS 发光5.渐变颜色按钮6.3D旋转木马7.CSS 发光图标_好看的css样式模板
2024-01-25 10:01:57
565
309
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。该示例中，我们使用了 transform-style: preserve-3d 属性_html动态网页效果代码
2024-01-25 10:01:27
357
288
思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？_css rem适配
2024-01-25 10:01:01
316
354
因为我们之前就把cookie值存到了本地，那么我们就直接读取它，如果没有cookie值，那就说明没有登录，重新跳转到登录界面。之前我们将recommendSong静态头部做好了，现在我们需要将写死的recommendSong日期动态显示。我们先在data中定义俩个变量，动态渲染到页面上。这里我们考虑一个问题，像有些英语歌很长。今天又学到了，居然在小程序中可以直接使用这个内置日期函数来获取日期。列表区域分为俩部分，一部分为导航，另一部分为真正的列表区域。搞定，这个新的接口。头部搭建完，我们就去搭建列表区域。_网易云音乐开发文档
2024-01-25 10:01:58
733
747
网页设计中经常要在背景图上放一些文字介绍，这就需要背景图片能有透明效果以便突出显示文字信息，经多方查阅，终于找到了2种有趣的方法。_css背景透明度不影响文字
2024-01-25 10:01:56
901
824
在大屏可视化应用中，滚动动效（跑马灯效果）也是常见的一种数据展现方式，本章节针对字幕滚动和列表滚动效果做一个小小的总结，结合vue框架，从原生标签、css动画、javascript三个维度简单阐述以下文字及列表滚动动效的实现方案。..._滚动效果
2024-01-25 10:01:51
181
673
属性是一种伪类选择器，它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式。属性可以应用于任何元素，不仅仅是链接。_css的hover属性
2024-01-25 10:01:51
229
155
CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有趣。同时，它也可以将DOM元素与WebGL的内容相结合。在添加标注前需要先给模型命名。_css3dsprite
2024-01-24 15:01:28
214
966
CSS颜色与背景颜色color属性背景background属性1. 背景颜色background-color2. 背景图像background-image3. 背景图像平铺方式background-repeat4. 固定/滚动背景图像background-attachment5. 定位背景图像background-position6. 背景简写backgroundCSS列表样式1. 样式类型list-style-typeCSS盒模型CSS盒模型结构边界属性设置填充属性设置
2024-01-24 15:01:27
500
492
css样式分为外部样式表和内部样式表。外部样式表使用命令调用例如：调用，其中href后跟的是样式路径内部样式表需要在标签内部建立一个标签来使用。“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdanawidth:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左color : #999999_html的对齐代码
2024-01-24 15:01:25
733
527
Element中table组件(el-table)右侧滚动条空白占位处理_el-table gutter
2024-01-24 15:01:23
407
887
最近开发的一个项目中，要求使用一个动画效果，UCD 提供了三种解决方案，各有优劣。使用 生成一个SVG 动画，浏览器渲染SVG，由于DOM频繁的变动，即不断的重绘，这个动作会大量的占用CPU 和 GPU 的资源，针对一些比较老的机器（工厂、政府单位的机器可能比较老旧），可能会导致资源不够，打开浏览器CPU直接冲到100%导致浏览器卡死。应用场景：针对特定性能比较强悍的机器，适用于全屏和局部界面的动画视频或者gif 能很好的展示动画的完整性，资源占用也比较小，但是会有如下缺点：应用场景：可以用于浏览器部分界_png 组成动画
2024-01-24 15:01:03
82
259
在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。CSS3 2D变形 3D变形 过渡 动画。
2024-01-24 15:01:02
66
895
表明鼠标抬起，需要落到的点，不会绘制线条，只用于改变画笔的位置。如果最开始绘制的时候不指明，则默认是上一个点的位置。path: 用来定义形状的通用元素，所有的基本形状都可以用path来创建，是一种svg路径。以上参数一般使用其的缩写，但是有一点需要注意的是，除了(z|Z)外，参数大小写敏感。画笔需要到达的下一个点的位置，会绘制线条，上一个点与当前所处的点会连接成一条线。该属性使用裁剪方式创建元素的可显示区域，区域内的显示，区域外的不显示。大写字母表示绝对位置，小写字母表示相对位置，相对于上一个点的位置。
2024-01-24 15:01:59
140
509
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。_前端加载动画
2024-01-24 15:01:58
725
686
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）_transform 动画
2024-01-24 15:01:57
100
875
HTML 仅能呈现一些信息，表现能力非常有限，需要结合 CSS 一起使用，以使页面更加精美。CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中，大致分为如下四种方法：_html引入css
前端知识
[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页
2024-01-24 15:01:57
1014
622
网页标题：固定定位 网页标题：相对定位relative 网页标题：绝对定位absolute 网页标题：层定位的应用
2024-01-24 15:01:56
451
932
我们需要修改input框中的placeholoder字体或者颜色如果我们直接给input设置class类，写入color颜色，我们会发现修改的颜色是input框中输入字体的颜色。以上就是今天要讲的内容。_placeholder颜色
前端知识
[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页
2024-01-24 15:01:56
295
973
表格 表格 表格标记 表格标记-语法 表格属性设置 表格边框样式属性 表格单元格间距、单元格边距属性 表格水平对齐 设置表格行的属性 表格行的属性-设置 设置单元格的属性 设置单元格的属性-单元格跨行、列 表格嵌套课后练习网页标题：计算机报价表网页标题：会员注册网页标题：列表标签的应用
2024-01-24 15:01:55
857
870
变形是CSS3中新增的一个非常有意思的属性，可以将元素进行2D变形和3D变形，例如旋转、缩放、位移等；还可以结合过渡实现一些特别神奇的动画效果。接下来就一起来了解css3这个强大又有趣的功能吧。
2024-01-24 15:01:53
979
449
每一个九零后，童年里面都有马里奥吧，但是你有没有想过，如果用 CSS 可不可以写一个马里奥呢用CSS去写一个马里奥小游戏是一个有趣而有挑战性的项目，你可以通过这个项目来学习CSS的基本知识和高级技巧，比如选择器、属性、单位、颜色、盒模型、定位、浮动、布局、变换、过渡、动画、伪类和伪元素等。你还可以用CSS来实现一些马里奥游戏的特效，比如马里奥的跳跃、移动、碰撞、变大、变小、射火球等。你可以参考一些网上的例子和教程或者你可以自己发挥你的创意和想象力，创造一个独一无二的马里奥小游戏。?。
2024-01-24 15:01:53
538
643
序言：之前介绍那个博客，然后自己搞了这个界面。最近有人和我要，把代码给大家贴出来，提供参考。首先是这个界面哈然后呢，有那个javascript,就是绑定的登录注册时写在外部文件中的。我给大家贴上。注意啊上面一个登录一个注册。这里同样给出后端代码，就是我们这个登录注册验证码等需要使用到的后端代码。登录注册code 验证码生成_{"dc":"ynnfn"}