引子① VsCode 集成 Sass ✅1.1 安装 Live Sass Compiler 插件Live Sass Compiler 是一个用于实时编译和自动刷新 SCSS 文件的 VS Code 插件。1.2 点击该页的设置按钮1.3 进行配置"liveSassCompile.settings.autoprefix": [
"> 1%",
......
37
0
0
2024-07-03
前端面试实录CSS篇1. CSS 选择器以及优先级?• CSS 选择器 选择器格式优先级权重id 选择器#id100类选择器.classname10属性选择器[title]/[title="one"]10伪类选择器div:hover10标签选择器div1伪元素选择器input::after1子选择器ul>li0后代选择器li a0通配符选择器*0• C
......
140
0
0
2024-06-06
一、 目的通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。 本文也会同步到我的个人网站。二、 内容简介1、 引入，还原浮动本来的意义
2、 说明，实际开发中常用浮动来做什么
3、 提问，为什么要清除浮动
4、 回答，如何清除浮动以及常用的几种方法
5、 结论，得出本文认为最好用的方法
三、 正文1、 浮动本来的意
......
158
0
0
2024-05-29
摘要本文是一篇关于如何设计优秀的CSS网页布局框架的文章，提供了一些设计指南和具体的代码示例，以帮助读者快速搭建出优秀的网站。文章重点介绍了选择合适的CSS框架、创建网格系统、使网站响应式以及一些其他设计考虑因素。选择合适的CSS框架在设计一个CSS网页布局框架之前，需要先选择一个合适的CSS框架。有许多CSS框架可供选择，例如Bootstrap、Found
......
339
0
0
2024-04-23
各位追求技术的小伙伴们，今天要给大家介绍的是一篇来自.cult的精彩文章，作者Luis Minvielle。.cult是一个位于柏林的开发者社区平台，他们专注于分享职业相关内容，制作原创纪录片，以及分享来自全球开发者的未被讲述的故事。对于那些终于找到了自己热爱的编程工作的开发者们来说，他们常常会遇到一个难题：用编程谋生固然美妽，但当你不得不反复做着相同的任务
......
326
0
0
2024-04-02
写在前面今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是
......
337
0
0
2024-03-30
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。其功能能够涵盖：精简调暗饱和度降低饱和度色度增强调整不透明度反转补充转换对比度调色板完整的教程，你可以看这里
......
374
0
0
2024-03-23
前置知识：要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧：animation 、 transform 和 filter 这三个就不多做介绍了，基本上所有的动画都会用到这两个属性。box-shadowbox-shadow：阴影用法：box-shadow: h-shadow v-shadow blur spread color inset ;h-s
......
355
0
0
2024-03-18
原理其实很简单，找一张loading的静态图 旋转即可！ 知识点：transform<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width
......
345
0
0
2024-02-25
<ul class="accordion-container">
<li class="accordion-item" style="background-image: url(bg1.jpg);">
<p class="accordion-title">背景1</p>
......
302
0
0
2024-02-10
背景变色<div class="button"><span>hover me to change</span></div>
.button {
margin:40px auto;
width:200px;
height:60px;
padding:0 30px;
......
395
0
0
2024-02-10
示例代码01JQ实现$(".ion-ios-search").click(function() {
if (!$(".search").hasClass("active")) {
$(".search").addClass("active");
}
})
$(".ion-ios-close-empty").cli
......
193
0
0
2024-02-10
CSS 原生嵌套语法在之前，只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法，像是这样：div {
& > p {
color: red;
}
&:hover {
color: yellow;
}
}
从 Chrome 112 开始，原生
......
183
0
0
2024-02-03
在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局。不要重复自己通过 grid-template-columns 和 grid-template-rows 属性，我们可以显式地设置网格中的行数和列数，并指定它们的大小。如果我们希望多行和/或多列的大小相
......
144
0
0
2024-02-03
本文章系《Unleashing the Power of CSS》（释放CSS的力量，暂且这么翻译吧）一书的学习笔记，希望通本书的学习，系统的梳理下CSS相关的高级新特性。本篇文章是其第一部分，由于全书英文版，理解和阅读会有偏差，欢迎各位大佬们指正，我们一起共同提高。开篇在过去的几年里，CSS引入了许多新的改进功能，并且跨浏览器的努力提高了兼容性，使这门语言
......
150
0
0
2024-02-02