StickyLove前端学习之路（二）

最新推荐文章于 2025-12-07 19:40:07 发布
原创 最新推荐文章于 2025-12-07 19:40:07 发布 · 132 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3

本文介绍如何使用CSS创建菱形形状及实现元素间的间隔效果。通过旋转div角度达到菱形显示，利用叠加div技巧完成间隔设计，适用于前端开发中布局美化。

1.CSS实现菱形：

CSS实现菱形
原理其实很简单，只要将有宽高的div通过旋转45度角就完成了。

2.CSS实现间隔：

间隔图
我是将两个div盒子叠加在一起，其中一个盒子设置基础背景色，另一个盒子设置不同的间隙小盒子完成的。
css设置间隙
其中.desc为背景盒子，.mask为间隙盒子,.mask p为间隙小盒子，如下图：
间隙小盒子

Stickers7
关注
StickyLove前端学习之路(四)
luoyoupp的博客
07-18 157
一、数组栈方法 1.push(): 把参数顺序的添加到数组的尾部，返回数组添加后的新长度 2.unshift(): 把参数顺序的添加到数组的头部，返回数组添加后的新长度 3.pop(): 删除数组最后一个元素，返回删除的元素 4.shift(): 删除数组第一个元素，返回删除的元素 5.join(): 将数组中所有元素放到一个字符串，返回字符串 6.reverse(): 将数组中所有元素颠倒，返回数组 7.sort(): 将数组排序，返回数组 8.concat(): 将两个数组合并 9.slice(): 从
StickyLove前端学习之路(三)
luoyoupp的博客
07-16 139
js数组Array对象的使用 1.浮点数只删除小数点 这里是从json文件中获得浮点数: 2.数值不过8位数时在前面加零 3.数字没有小数点或小数点后只有一位在后面加零
StickyLove前端学习之路（一）
luoyoupp的博客
07-13 215
1.ajax执行顺序问题 当需要ajax执行优先于正常js代码的执行，需要将ajax中async设为false，例如： 2.本地存储(localStorage和sessionStorage的区别)： localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。 从使用的角度来看，两者的唯一区别在于时效性。 sessionStorage在关闭窗口或标签页之后将会删除这些数据。 而localStorage即使在关闭浏览器窗口后数据
StickyLove前端学习之路（一）（转载）
weixin_49271180的博客
07-22 102
1.ajax执行顺序问题 当需要ajax执行优先于正常js代码的执行，需要将ajax中async设为false，例如： 2.本地存储(localStorage和sessionStorage的区别)： localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。 从使用的角度来看，两者的唯一区别在于时效性。 sessionStorage在关闭窗口或标签页之后将会删除这些数据。 而localStorage即使在关闭浏览器窗
StickyLove开启博客之旅
luoyoupp的博客
07-12 139
听说一个优秀的开发工程师都会撰写博客来记录自己的工作总结和学习经验，我在前端开发的日子还是会比较长的，所以我想通过撰写博客来提升自己的开发技术和思维模式。通过总结工作中遇到的问题以及开发时所获得的心得来不断完善自己的技术体系，这样在未来的职场竞争中就不会处于劣势，同时也有利于自己在项目开发过程中以一种更加轻松的方式来解决期间出现的各种bug。 进入程序开发行列，需要不断学习来提升自己，为了更好地学习，学习规划是必不可少的。虽是博客开启之旅同时也是前端学习规划之路。自己的学习习惯和生活习惯与大多数人有所不同，
StickyLove flex布局学习(一)
luoyoupp的博客
07-28 211
flex布局属性: flex-direction: 设置主轴方向 justfy-content: 主轴排列方式 flex-wrap: 是否换行 align-items: 设置侧轴单行的排列方式 align-content: 设置侧轴多行的排列方式 flex-flow: 合写flex-direction和flex-wrap flex: < number > 分配剩余空间，子项所占份额数目 align-self: 子项在侧轴上的排列方式，可以控制单行其中一个子项在侧轴上的排列方式 order: 设
CSS 网页布局：技术基础与实践技巧
csbysj2020的博客
12-02 948
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
CSS 面试题
d81895606的博客
12-03 347
API类型特点微任务最常用，立即执行微任务现代API，推荐使用宏任务最小延迟，让出控制权宏任务Node.js特有，I/O后执行伪宏任务下一帧前，适合动画宏任务高优先级，比setTimeout快Node.js特快比微任务还快。
【JavaWeb】CSS_三种引入方式
qq_43494013的博客
12-05 417
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 817
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
css使用grid布局实现网格(表格)，动态调整行高，列宽，整体缩放，插入行，列，删除行，列
qq_41505416的博客
12-07 101
摘要：本文演示了使用React和CSS Grid布局实现动态表格功能，包括单元格合并/取消合并、行列调整（高度/宽度）、整体缩放、行列插入（任意位置或末尾）、删除行列等操作。表格支持自适应容器，可实现等宽等高显示。通过Grid布局的灵活特性，实现了复杂的表格交互功能，相比传统table布局更具响应性和可控性。视频演示展示了完整的操作流程和效果。（135字）
CSS Animation 详解
Irene1991的博客
12-04 866
本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。
通过js动态更新css变量
qq_65084229的博客
12-02 123
【代码】通过js动态更新css变量。
Highcharts 仪表板 CSS 样式定制使用说明
Highcharts可视化图表库中文博客
12-03 977
摘要：Highcharts仪表盘提供灵活的CSS样式定制功能，允许在不修改代码的情况下调整外观。通过预定义的CSS类（如highcharts-dashboards-row）或自定义类/ID，
【JavaWeb】CSS_三大选择器
qq_43494013的博客
12-05 273
【JavaWeb】CSS_三大选择器
CSS position 属性
yonghuid123453的博客
12-03 830
CSS position属性是控制元素定位方式的核心工具，提供static（默认）、relative、absolute、fixed和sticky五种定位模式。static遵循文档流，relative基于自身位置偏移但不脱离文档流，absolute相对于最近定位祖先定位并脱离文档流，fixed相对于视口固定定位，sticky则结合relative和fixed特性实现粘性效果。定位元素可通过z-index控制层叠顺序，且不同定位方式会影响文档流布局。合理运用这些定位方式能实现弹窗居中、固定导航等常见布局效果
CSS滚动吸附详解：构建精准流畅的滚动体验-scroll-snap-type
JackieDYH的博客
12-02 984
CSS属性scroll-snap-type:x mandatory用于强制水平滚动容器在停止时精准对齐吸附点。该属性需配合子项的scroll-snap-align使用，定义吸附位置（如start/center/end）。mandatory表示必须严格对齐，而proximity则根据滚动情况智能判断是否吸附。典型应用包括横向轮播图，确保滚动停止时图片边缘或中心自动对齐容器，提升用户体验。
999+套计算机毕业设计——基于HTML5+CSS的图书馆借阅管理系统的设计与实现（含源码+部署教程+数据库）
最新发布
2501_94164441的博客
12-07 679
随着互联网大趋势的到来，社会的方方面面，各行各业都在考虑利用互联网作为媒介将自己的信息及时有效地推广出去，而其中最好的方式就是建立网络管理系统，并对其进行信息管理。本文旨在设计和实现基于SSM框架和HTML技术的图书馆借阅管理系统。
CSS中自定义属性函数var()
wch19960518的博客
12-04 227
var( <自定义属性名> [, <备用值> ]?
Step 12: Shell Control as Container && Step 13:Margins and Paddings 使用CSS类对页面美化
一只学习的渣渣
12-04 374
shell && Margins && Paddings
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值