- 一、前言Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader:# Sassnpm install -D sass-loader node-sa... 一、前言Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader:# Sassnpm install -D sass-loader node-sa...
- 手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS 手拉手Vite+Vue3+TinyVue+Echarts+TailwindCSS
- 一、前言CSS 提供了三种基本的定位机制:普通流、浮动和固定定位;通过这三种方式可实现页面的排版布局。 二、普通流普通流中元素的位置由元素在 (X)HTML 中的位置决定:块级元素独自占一行,在文本流中从上到下一个接一个地排列;行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列; 三、浮动浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。 四、固定定位固定定位... 一、前言CSS 提供了三种基本的定位机制:普通流、浮动和固定定位;通过这三种方式可实现页面的排版布局。 二、普通流普通流中元素的位置由元素在 (X)HTML 中的位置决定:块级元素独自占一行,在文本流中从上到下一个接一个地排列;行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列; 三、浮动浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。 四、固定定位固定定位...
- padding设置 p 元素的 4 个内边距:p{ padding:2cm 4cm 3cm 4cm;}所有浏览器都支持 padding 属性。注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替... padding设置 p 元素的 4 个内边距:p{ padding:2cm 4cm 3cm 4cm;}所有浏览器都支持 padding 属性。注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替...
- 一、导语自CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。 二、简单属性选择器如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。下面的例子是把包含标题(title)的所有元素变为蓝色:[title]{ color:blue;}如果希望把包含标题(title)的所有元素变为红色,可以写作:*[title] {color:red;}与... 一、导语自CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。 二、简单属性选择器如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。下面的例子是把包含标题(title)的所有元素变为蓝色:[title]{ color:blue;}如果希望把包含标题(title)的所有元素变为红色,可以写作:*[title] {color:red;}与...
- 一、vw、vh、vmin、vmax 1.1 vw、vh、vmin、vmax 的含义(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。视窗(Viewport)是浏览器实际显示内容区域,换句话说是不包括工具栏和按钮的网页浏览器。(2)具体描述如下:vw:视窗宽度的百分比... 一、vw、vh、vmin、vmax 1.1 vw、vh、vmin、vmax 的含义(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。视窗(Viewport)是浏览器实际显示内容区域,换句话说是不包括工具栏和按钮的网页浏览器。(2)具体描述如下:vw:视窗宽度的百分比...
- 一、前言HSL 是CSS3引进的一种将 RGB 色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。 二、定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。HSL 即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)。色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。饱和度(S)是指... 一、前言HSL 是CSS3引进的一种将 RGB 色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。 二、定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。HSL 即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)。色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。饱和度(S)是指...
- 一、前言媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有:width、height和color(等)。使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果。 二、媒体查询语法CSS3中的媒体查询:根据浏览器窗口大小的改变,页面颜色就会改变。CSS3 语法@media mediatype and|not|only (media... 一、前言媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有:width、height和color(等)。使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果。 二、媒体查询语法CSS3中的媒体查询:根据浏览器窗口大小的改变,页面颜色就会改变。CSS3 语法@media mediatype and|not|only (media...
- 简介CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活,是前端开发中常用的定位元素的方式。selenium中的css定位,实际是通过css选择器来定位到具体元素,css选择器来自于css语法。CSS定位有以下显著优点:语法简洁对比其他定位方式,定位效率更快对比其他定位方式,定位更稳定 css选择器语法基础选... 简介CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活,是前端开发中常用的定位元素的方式。selenium中的css定位,实际是通过css选择器来定位到具体元素,css选择器来自于css语法。CSS定位有以下显著优点:语法简洁对比其他定位方式,定位效率更快对比其他定位方式,定位更稳定 css选择器语法基础选...
- H5+CSS3+JS逆向前置——HTML1、H5基础HTML概述HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式,使得浏览器可以正确地解析和显示网页内容。HTML的主要元素包括:元素:包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签,如<p>、<a>、<... H5+CSS3+JS逆向前置——HTML1、H5基础HTML概述HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式,使得浏览器可以正确地解析和显示网页内容。HTML的主要元素包括:元素:包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签,如<p>、<a>、<...
- 有一个客户启用了 Angular Server Side Rendering,并且启用了 inlineCriticalCss,后来发现在 Dynatrace 的 hotspot 里的 vendor.js 文件有个名叫 walkStyleRules 的函数,耗时比较多。如下图所示: Angular 服务器端渲染(Server Side Rendering)Angular的服务器端渲染是一种技术... 有一个客户启用了 Angular Server Side Rendering,并且启用了 inlineCriticalCss,后来发现在 Dynatrace 的 hotspot 里的 vendor.js 文件有个名叫 walkStyleRules 的函数,耗时比较多。如下图所示: Angular 服务器端渲染(Server Side Rendering)Angular的服务器端渲染是一种技术...
- 目录基本概念 基本入门location匹配顺序补充:URLRewrite基本概念 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路 优势:分担负载,减轻web服务器的压力,适用于大负载。静态资源放置cdn,同时还可以通过配置缓存到客户浏览器中,这样极大减轻we... 目录基本概念 基本入门location匹配顺序补充:URLRewrite基本概念 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路 优势:分担负载,减轻web服务器的压力,适用于大负载。静态资源放置cdn,同时还可以通过配置缓存到客户浏览器中,这样极大减轻we...
- wkhtmltopdf入门在进行网页开发中,有时会遇到需要将网页内容转换为PDF格式的需求,这时候我们可以使用wkhtmltopdf工具来实现。本篇文章将介绍wkhtmltopdf的基本用法和常见问题。什么是wkhtmltopdfwkhtmltopdf是一个开源的工具,用于将HTML页面转换为PDF格式。它使用WebKit渲染引擎,支持CSS、JavaScript等前... wkhtmltopdf入门在进行网页开发中,有时会遇到需要将网页内容转换为PDF格式的需求,这时候我们可以使用wkhtmltopdf工具来实现。本篇文章将介绍wkhtmltopdf的基本用法和常见问题。什么是wkhtmltopdfwkhtmltopdf是一个开源的工具,用于将HTML页面转换为PDF格式。它使用WebKit渲染引擎,支持CSS、JavaScript等前...
- 视差滚动视差滚动是一种效果,能够使不同层次的元素以不同的速度进行滚动,从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现:background-attachment和transform:translate3D 1、background-attachmentbackground-attachment:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。它的属性值的含义如下:属... 视差滚动视差滚动是一种效果,能够使不同层次的元素以不同的速度进行滚动,从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现:background-attachment和transform:translate3D 1、background-attachmentbackground-attachment:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。它的属性值的含义如下:属...
- 一、什么是 CSS 预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,... 一、什么是 CSS 预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新,构建AI应用全新智能中枢
2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间,华为云展示了Serverless与MCP融合创新的解决方案,本期访谈直播,由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持,华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
去报名 -
苏州工业园区“华为云杯”2025人工智能应用创新大赛赛中直播
2025/08/21 周四 16:00-17:00
Vz 华为云AIoT技术布道师
本期直播将与您一起探讨如何基于华为云IoT平台全场景云服务,结合AI、鸿蒙、大数据等技术,打造有创新性,有竞争力的方案和产品。
即将直播
热门标签