- 效果（源码在最后）： 实现：1.定义标签： <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas>2. 文字的基本样式：h1{ position: absolute; ... 效果（源码在最后）： 实现：1.定义标签： <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas>2. 文字的基本样式：h1{ position: absolute; ...
- 先看效果（完整代码在底部）：点击效果视频预览 实现过程（可一步一步实现）：1.定义标签与基本css样式： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas>#canvas{ position: fixed; top: 0; left: 0; /* fi... 先看效果（完整代码在底部）：点击效果视频预览 实现过程（可一步一步实现）：1.定义标签与基本css样式： <h1>北极光之夜。</h1> <canvas id="canvas"></canvas>#canvas{ position: fixed; top: 0; left: 0; /* fi...
- 前言 vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。（2）具体描述如下：vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh... 前言 vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。（2）具体描述如下：vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh...
- calc是英文单词calculate(计算)的缩写,是css3的一个新增功能;MDN的解释为：可以用在任何长度,数值,时间,角度,频率等处;CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 S... calc是英文单词calculate(计算)的缩写,是css3的一个新增功能;MDN的解释为：可以用在任何长度,数值,时间,角度,频率等处;CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 S...
- 1.相对定位 代码：position:relative 定义：相对于原来的位置，进行指定方向的偏移，但仍然在标准文档流中，原来的位置会被保留 常用参数：top:1px（上）;left:1px（左）;bottom:1px（下）;right:1px;（右）2.绝对定位 代码：position:absolute; 定义：相对于父级或浏览器的位置，进行指定偏移，不在标准文档流中，... 1.相对定位 代码：position:relative 定义：相对于原来的位置，进行指定方向的偏移，但仍然在标准文档流中，原来的位置会被保留 常用参数：top:1px（上）;left:1px（左）;bottom:1px（下）;right:1px;（右）2.绝对定位 代码：position:absolute; 定义：相对于父级或浏览器的位置，进行指定偏移，不在标准文档流中，...
- 解决使用float浮动后出现的父级边框坍塌问题1.增加父级高度 eg：#father{height:1000px}2.在浮动效果下方增加一个空div，并且将清除div两侧的浮动效果 eg: <div style:"float:left">浮动的内容</div> <div style:"clear:both"></div>注：clear：left（清除左侧浮动效果）、r... 解决使用float浮动后出现的父级边框坍塌问题1.增加父级高度 eg：#father{height:1000px}2.在浮动效果下方增加一个空div，并且将清除div两侧的浮动效果 eg: <div style:"float:left">浮动的内容</div> <div style:"clear:both"></div>注：clear：left（清除左侧浮动效果）、r...
- 1.设置圆角边框1.1 参数设置border-raduis ： 左上 右上 右下 左下（顺时针）注：a.当只设置一个时，四个角都圆角半径都为此值；当设置两个时，为设置对角线的圆角半径； b.如果需要设置为半圆，需要将 数值 = 圆角半径 + 边框 并且 宽度 或者 高度需要设置为和这个值相同（朝向上下则设置高度，朝向左右则设置宽度） eg：border-radui... 1.设置圆角边框1.1 参数设置border-raduis ： 左上 右上 右下 左下（顺时针）注：a.当只设置一个时，四个角都圆角半径都为此值；当设置两个时，为设置对角线的圆角半径； b.如果需要设置为半圆，需要将 数值 = 圆角半径 + 边框 并且 宽度 或者 高度需要设置为和这个值相同（朝向上下则设置高度，朝向左右则设置宽度） eg：border-radui...
- 1、字体 1.1 字体样式 字体 font-family ;字体大小 font-size ;字体粗细 font-weight; 可以连写，如下格式： font{ （1）字体风格（斜体-oblique） （2）字体粗细（bloder或100）（3）大小/行高 （12px/20px） （4）字体样式（“楷体 ”） } 2、文本 ... 1、字体 1.1 字体样式 字体 font-family ;字体大小 font-size ;字体粗细 font-weight; 可以连写，如下格式： font{ （1）字体风格（斜体-oblique） （2）字体粗细（bloder或100）（3）大小/行高 （12px/20px） （4）字体样式（“楷体 ”） } 2、文本 ...
- css为cascading style sheet的简称，意思为层叠样式表（级联样式表）1.发展史 css1.0 ：混乱时代，表达式和样式糅合在一起 ==》 css 2.0 ：表达式和样式开始分开 出现div（块）+CSS的思想 ==》 css 2.1 ：出现大量更新，出现如@import url（XXX）之类的神奇的东西 ==》 css 3.0... css为cascading style sheet的简称，意思为层叠样式表（级联样式表）1.发展史 css1.0 ：混乱时代，表达式和样式糅合在一起 ==》 css 2.0 ：表达式和样式开始分开 出现div（块）+CSS的思想 ==》 css 2.1 ：出现大量更新，出现如@import url（XXX）之类的神奇的东西 ==》 css 3.0...
- WEB前端全栈成长计划·第三阶段最终积分排行榜和最终考核成绩已公布，请大家仔细查看之后填写信息回复表哦~有问题随时联系华为云小助手01 WEB前端全栈成长计划·第三阶段最终积分排行榜和最终考核成绩已公布，请大家仔细查看之后填写信息回复表哦~有问题随时联系华为云小助手01
- WEB前端全栈成长计划·第二阶段最终积分排行榜和最终考核成绩已公布，请大家仔细查看之后填写信息回复表哦~有问题随时联系华为云小助手01 WEB前端全栈成长计划·第二阶段最终积分排行榜和最终考核成绩已公布，请大家仔细查看之后填写信息回复表哦~有问题随时联系华为云小助手01
- 听完了课，会了；动手做，又不会。前端开发如何能够真正上路走一程？下面是我的一些感悟和建议1.需求引导2.用趁手的工具3.学以致用4.量力而行1.需求引导恩格斯说，社会一旦有技术上的需要，则这种需要会比十所大学更能把科学推向前进。我说，一旦有了实际的需求，则这种需求会比你多上十节课更能把你的前端开发能力推向前进。有了需求，就有了项目，只有在项目中，才能培养人、锻炼人的开发能力没有需求怎么办？有... 听完了课，会了；动手做，又不会。前端开发如何能够真正上路走一程？下面是我的一些感悟和建议1.需求引导2.用趁手的工具3.学以致用4.量力而行1.需求引导恩格斯说，社会一旦有技术上的需要，则这种需要会比十所大学更能把科学推向前进。我说，一旦有了实际的需求，则这种需求会比你多上十节课更能把你的前端开发能力推向前进。有了需求，就有了项目，只有在项目中，才能培养人、锻炼人的开发能力没有需求怎么办？有...
- 编码设置 采用UTF-8编码，在CSS代码头部使用。命名的规范 状态：以s为命名，表示动态的、具有交互性质的状态 工具：以u为命名，表示不耦合业务逻辑的，可服用的工具 布局：以g为命名。 组件：以m为命名，表示可以复用，移植的组件模块命名的思想：没有选择BEM这种命名 过于严苛以及样式名长丑的规则字符小写 定义的选择器名，属性以及属性值的书写为小写选择器：当一个规则包含多个选择器时，每个选择... 编码设置 采用UTF-8编码，在CSS代码头部使用。命名的规范 状态：以s为命名，表示动态的、具有交互性质的状态 工具：以u为命名，表示不耦合业务逻辑的，可服用的工具 布局：以g为命名。 组件：以m为命名，表示可以复用，移植的组件模块命名的思想：没有选择BEM这种命名 过于严苛以及样式名长丑的规则字符小写 定义的选择器名，属性以及属性值的书写为小写选择器：当一个规则包含多个选择器时，每个选择...
- WEB前端全栈成长计划·第三阶段积分排行榜新鲜出炉！ WEB前端全栈成长计划·第三阶段积分排行榜新鲜出炉！
- theme: channing-cyan原文地址：[Stop Using the Pixel Unit in CSS]为什么 web 开发者会不假思索的使用“px”单位？这仅仅是他们的一个坏习惯?还是他们缺乏对其他 CSS 单位的认识?更或许是他们的设计团队更倾向于使用“px”和“pt”作为设计稿的单位？到目前为止，并不清楚为什么大部分的团队选择像素作为单位。也许，大部分的原因是它看起来更... theme: channing-cyan原文地址：[Stop Using the Pixel Unit in CSS]为什么 web 开发者会不假思索的使用“px”单位？这仅仅是他们的一个坏习惯?还是他们缺乏对其他 CSS 单位的认识?更或许是他们的设计团队更倾向于使用“px”和“pt”作为设计稿的单位？到目前为止，并不清楚为什么大部分的团队选择像素作为单位。也许，大部分的原因是它看起来更...
上滑加载中
推荐直播
-
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步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签