css布局
170篇文章 · 0订阅
  • 面试官：讲讲flex:1 和 flex:auto 有什么区别？
    讲解面试常见的flex:1和flex:auto的区别。其实这两个属性的差异藏在细节里，今天我们就从 “原理拆解→场景对比→误区避坑” 三个维度，彻底搞懂它们的区别，让你在项目中不再凭感觉写代码。
    前端 面试 CSS
    面试官：讲讲flex:1 和 flex:auto 有什么区别？
  • 还在硬邦邦跳转页面？Vue这3招让应用丝滑如德芙！
    你是不是也遇到过这种情况？页面切换生硬得像老式电视机换台，数据加载时用户一脸懵逼不知道发生了什么，列表操作毫无反馈让人怀疑到底点没点上... 别急！今天我就带你用Vue的过渡动画三招，让你的应用瞬间从
    Vue.js JavaScript 前端
  • 别再用 100vh 了！移动端视口高度的终极解决方案
    作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。 直觉告诉我们，这很简单，给它一个 `height: 100vh` 就行了
    前端 CSS HTML
    别再用 100vh 了！移动端视口高度的终极解决方案
  • 响应式设计：打造适配所有屏幕的H5页面大小🚀🚀
    萝卜青菜，各有所爱；正如我们对于手机的选择一样，每个人都有自己偏好的品牌和型号，而这些设备的屏幕大小也千差万别。面对如此多样化的终端环境，如果一个H5页面仅仅针对某一特定尺寸的手机进行设计，这样是不行
    前端 JavaScript 设计模式
    响应式设计：打造适配所有屏幕的H5页面大小🚀🚀
  • Vue实现一个“液态玻璃”效果登录卡片
    Vue实现一个“液态玻璃”效果登录卡片 效果介绍 液态玻璃（Liquid Glass）是一种极具现代感的UI视觉风格，常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术，模拟出玻璃的
    前端 CSS Vue.js
    Vue实现一个“液态玻璃”效果登录卡片
  • 可视化大屏开发，知道这三个适配方案，效率翻倍！
    前言 开发过大屏可视化应用的前端工程师们通常会有这样的共识： 在可视化开发过程中，最具有挑战性的并非各种图表的配置与效果展示，而是如何确保大屏在不同尺寸的屏幕上都能实现良好的适配。 原始解决方案 起初
    前端 JavaScript
    可视化大屏开发，知道这三个适配方案，效率翻倍！
  • 一文掌握大屏适配方案
    随着大数据可视化、数字孪生、智慧城市等业务场景的普及，大屏开发已成为前端工程师的必备技能之一。然而，不同于传统 Web 页面，大屏项目常常需要在各种尺寸和分辨率的显示设备上展示，这就带来了适配问题。本
    前端 JavaScript CSS
  • 🤡什么鬼？两行代码就能适应任何屏幕？
    你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。 马上教你用！✨
    前端
    🤡什么鬼？两行代码就能适应任何屏幕？
  • GSAP实战仿荣耀官网的页面滚动效果
    在上一篇文章中，我们对GSAP的用法有了一个简单的了解，本文我们就结合GSAP的用法教程，仿照荣耀官网MagicOS的页面，实现一个酷炫的网页效果。 本文正在参加「金石计划」。
    前端
    GSAP实战仿荣耀官网的页面滚动效果
  • 8个最佳动效网页设计，告别枯燥体验！
    作为2018年网页设计的趋势之一，网页动效设计已经成为现代网页用户体验的重要组成部分。不管是微妙的转场动效，还是覆盖整个页面，动画效果无处不在。融入动效的交互细节让现代网页同以往的设计在根本上区别开来。 对设计师来说，CSS和HTML的成熟使设计师变得越来越富有创意，CSS动画…
    CSS 设计 设计师