- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第六篇，Varlet支持自定义主题及暗黑模式，本篇文章我们来详细看一下这两者的实现。 主题定制Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以如... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第六篇，Varlet支持自定义主题及暗黑模式，本篇文章我们来详细看一下这两者的实现。 主题定制Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以如...
- <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 伪元素</title> <style> p:first-line { color: #ff0000; font-variant: small-caps; } p:first-letter { ... <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 伪元素</title> <style> p:first-line { color: #ff0000; font-variant: small-caps; } p:first-letter { ...
- 大家好，我是 CoderBin “回流重绘”是什么？在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制具体的浏览器解析渲染机制如下所示：解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生... 大家好，我是 CoderBin “回流重绘”是什么？在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制具体的浏览器解析渲染机制如下所示：解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生...
- CSS3 positon定位详解（通俗易懂），文章内包涵很多个人理解（错误请指出）positon定位一共有四种，分别是static静态（默认），relative相对，fixed固定，absolute绝对定位，以及sticky粘性定位。static静态定位默认的定位方式，不可以使用left，top，right，buttom等属性，Z—index也不能更改，完全遵循文档标准流，正常定位（sta... CSS3 positon定位详解（通俗易懂），文章内包涵很多个人理解（错误请指出）positon定位一共有四种，分别是static静态（默认），relative相对，fixed固定，absolute绝对定位，以及sticky粘性定位。static静态定位默认的定位方式，不可以使用left，top，right，buttom等属性，Z—index也不能更改，完全遵循文档标准流，正常定位（sta...
- 在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？ 0. 内倒角首先我们来看下css如何实现内倒角.card { width: 200px; height:... 在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？ 0. 内倒角首先我们来看下css如何实现内倒角.card { width: 200px; height:...
- 一、HTML和CSS1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)2、每个HTML文件里开头都有个... 一、HTML和CSS1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)2、每个HTML文件里开头都有个...
- CSS概念CSS全称 Cascading Style Sheets 层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效 好处功能强大将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率 CSS的使用：CSS与html结合方式 内联样式在标签内使用style属性指定css代码如：hello css 内部样式在head标签内，定义style标签，style标签的... CSS概念CSS全称 Cascading Style Sheets 层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效 好处功能强大将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率 CSS的使用：CSS与html结合方式 内联样式在标签内使用style属性指定css代码如：hello css 内部样式在head标签内，定义style标签，style标签的...
- 案例的学习可以帮助我们更快的深入学习. 案例的学习可以帮助我们更快的深入学习.
- 鼠标天使是一个好玩的技能,大家可以尝试 鼠标天使是一个好玩的技能,大家可以尝试
- Vite 官方中文文档Vue3 官方中文文档Vue Router 4.x 官方中文文档Vuex 4.x 官方中文文档本文只介绍利用Vite构建Vue3项目并安装Vuex，Vue Router，CSS预处理器的详细步骤，各内容的具体使用请查阅官方文档。 一、构建Vite+Vue3兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。 使用NPM构建$ npm init vite@... Vite 官方中文文档Vue3 官方中文文档Vue Router 4.x 官方中文文档Vuex 4.x 官方中文文档本文只介绍利用Vite构建Vue3项目并安装Vuex，Vue Router，CSS预处理器的详细步骤，各内容的具体使用请查阅官方文档。 一、构建Vite+Vue3兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。 使用NPM构建$ npm init vite@...
- 前言这篇博客不含题目，只有答案和解析，如果您需要查看题目我这里还贴心的为您准备了完整版🏆🏆🏆，请前往主页查看文章中出现的题目和代码可戳链接进行保存🏄♂️🏄♂️🏄♂️（蓝桥杯真题）：「蓝桥杯」https://www.aliyundrive.com/s/7fsobhSy8dZ 提取码: 34pi言归正传，我们开始一起学习吧🎖️🎖️🎖️： 1. 水果拼盘🎖️🎖️🎖️... 前言这篇博客不含题目，只有答案和解析，如果您需要查看题目我这里还贴心的为您准备了完整版🏆🏆🏆，请前往主页查看文章中出现的题目和代码可戳链接进行保存🏄♂️🏄♂️🏄♂️（蓝桥杯真题）：「蓝桥杯」https://www.aliyundrive.com/s/7fsobhSy8dZ 提取码: 34pi言归正传，我们开始一起学习吧🎖️🎖️🎖️： 1. 水果拼盘🎖️🎖️🎖️...
- 前言这篇博客比较全面，包含了题目、解题代码和解析，如果你知道题目并且只想要看解析和代码，博主还贴心的给您定制了一篇精华版🪄🪄🪄，请前往主页查看文章中出现的题目和代码可戳链接进行保存🏄♂️🏄♂️🏄♂️（蓝桥杯真题）：「蓝桥杯」https://www.aliyundrive.com/s/7fsobhSy8dZ 提取码: 34pi 1. 水果拼盘🎖️🎖️🎖️🌟介绍：目前... 前言这篇博客比较全面，包含了题目、解题代码和解析，如果你知道题目并且只想要看解析和代码，博主还贴心的给您定制了一篇精华版🪄🪄🪄，请前往主页查看文章中出现的题目和代码可戳链接进行保存🏄♂️🏄♂️🏄♂️（蓝桥杯真题）：「蓝桥杯」https://www.aliyundrive.com/s/7fsobhSy8dZ 提取码: 34pi 1. 水果拼盘🎖️🎖️🎖️🌟介绍：目前...
- CSS中的定位是我们实现基本功能所必备的知识 CSS中的定位是我们实现基本功能所必备的知识
- 前言今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000... 前言今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000...
- 如下图所示：quick order 文件夹下存在一个 _index.scss 文件，其导入了 styles 文件夹下的 index：然而，styles 文件夹下并没有 index.scss 文件，只有一个 _index.scss. 但是，ctrl + click 点击上图第一行代码后，会自动跳转到 styles 文件夹下的 _index.scss 文件：查看这个 @import 的语法：Sa... 如下图所示：quick order 文件夹下存在一个 _index.scss 文件，其导入了 styles 文件夹下的 index：然而，styles 文件夹下并没有 index.scss 文件，只有一个 _index.scss. 但是，ctrl + click 点击上图第一行代码后，会自动跳转到 styles 文件夹下的 _index.scss 文件：查看这个 @import 的语法：Sa...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签