![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS基础
文章平均质量分 89
HTML+CSS学习记录
努力的小朱同学
未来很长,梦想很远。
展开
-
CSS 之 自定义属性(变量)
CSS的自定义属性,又称为CSS变量或级联变量,用于定义一个带有值的、可重复使用的CSS属性(变量)。其包含的值可以在其作用域内的任意属性上重复使用,在使用时需要借助var()函数获取自定义属性的值。当自定义属性的值发生变化时,所有使用该自定义属性的CSS属性都会随之变化。原创 2024-05-28 16:26:24 · 1539 阅读 · 0 评论 -
CSS 之 帧动画(Keyframe Animation)
帧动画允许你通过指定 CSS 属性在不同时间点上的行为来创建动画效果,这些时间点被称为关键帧,所以又被称为关键帧动画。帧动画需要通过@keyframes来创建。@keyframes`仅仅是定义了在所在作用域内全局都可以使用的关键帧动画,定义好了动画的过程,但是其并不能自动应用。还需要通过CSS的animation属性来显式的指定关键帧动画应用的元素,以及一系列相关的动画属性。原创 2024-05-13 14:34:46 · 1692 阅读 · 0 评论 -
CSS 之 过渡动画(transition)
transition属性用来设置元素的过渡动画,是过渡属性的简写形式,属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay,分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件:transitionrun、transitionstart、transitionend、transitioncancel。原创 2024-04-25 16:16:15 · 2245 阅读 · 0 评论 -
CSS 之 display属性详解
display的属性值有:block、inline、flex、grid、table、flow、flow-root、ruby、list-item、table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container等等。原创 2023-10-18 15:49:39 · 15499 阅读 · 0 评论 -
CSS 之 table 表格布局
除了使用HTML的table元素外,我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果,具有表头、表尾、行、单元格等概念,让元素以表格的形式进行布局。原创 2023-10-09 09:49:31 · 8621 阅读 · 0 评论 -
CSS 之 grid 网格布局
设置display: grid;的元素,即为容器元素,容器属性共有17条,包含以下:grid-template-columns、grid-template-rows、column-gap、row-gap、gap等等容器的直接子元素即为项目元素,项目属性共有10条,包含以下:grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、justify-self、align-self等等原创 2023-09-16 14:46:29 · 1115 阅读 · 0 评论 -
HTML 之 块级元素、行内元素和行内块元素之间的嵌套规则
之前对元素之间的嵌套规则没有进行系统的梳理,一直以为各种元素之间可以随意进行嵌套,但在实际敲代码的过程中发现并不是这样,大部分标签之间是可以随意嵌套的,但也存在一些特殊规则,比如:p标签内不能再嵌套p标签和div标签等块级标签。这篇博客就是为了彻底搞清楚不同类型元素之间的嵌套规则。原创 2022-09-07 16:29:22 · 3044 阅读 · 0 评论 -
CSS 之 z-index 属性详解
`z-index`属性是用来设置元素的堆叠顺序或者叫做元素层级,`z-index`的值越大,元素的层级越高。当元素发生重叠时,层级高的元素会覆盖在层级低的元素的上面,使层级低的元素的重叠部分被遮盖住。当父元素设置了`z-index`属性时,子元素的`z-index`属性只与同级元素和父级元素作比较时才有意义,与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以父元素的`z-index`属性值为准进行对比,子元素本身的`z-index`属性值无效。...原创 2022-08-26 11:46:58 · 63143 阅读 · 28 评论 -
CSS 之 百分比(%)样式属性
这篇博客主要是整理一下,CSS中所有可以使用 % 作为属性值的样式属性,并说明他们的基数取决于什么,有些样式属性的 % 取决于元素本身的属性,有些元素样式的 % 取决于其父元素的属性。整理的可能有遗漏,欢迎大家留言补充。一、取决于父元素1、height 如果给子元素的height属性设置为 % ,则其基数取决于父元素的height属性。2、width 如果给子元素的width属性设置为 % ,则其基数取决于父元素的width属性。3、padding 如果给子元素的paddin原创 2022-02-27 17:48:39 · 3348 阅读 · 0 评论 -
HTML5 学习笔记(九)--- CSS3补充
linear-gradient(渐变轴方向,颜色1,颜色2...) 函数用于创建一个多种颜色线性渐变的图片,至少需要指定两种及以上的颜色,以及指定渐变轴的方向。函数的第一个参数一定是指定渐变轴方向,可以是 `to left等方位名词` ,该方位名词的方向即为颜色1渐变为颜色2的正方向,可以写两个临近的方位名词,表示两者的夹角方向为渐变轴仿瓷昂。也可以是 `ndeg` 角度的形式, 0deg 是页面中 y轴 的负方向即从下到上的方向,顺时针方向为角度正方向 。如果不指定方向,则默认从上到下。...原创 2021-08-05 16:14:23 · 217 阅读 · 1 评论 -
HTML5学习笔记一
1.html5的概念html5定义了html(超文本语言)得最新标准,增加了一些新的标签、属性和特性。广义的html包括 html5+css3+javaScript 三者组成技术集。2.新增语义化标签header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签*注意:在IE9及以下版本的浏览器中,这些标签是行内元素,需要原创 2020-09-23 21:36:09 · 337 阅读 · 0 评论 -
HTML5 学习笔记(七)--- 元素拖放
一、拖放事件1、概念 在 HTML5 中增加了多个针对元素拖放的事件,使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作,要想真正实现拖放后进行数据交互,还需要结合 dataTransfer 对象,才能真正实现拖放效果。 **注意:**要实现元素拖放,首先要在目标元素上 设置 draggable = “true” ,否则无法实现拖放。2、事件**① dragStart:**在元素拖动开始时触发,事件对象是被拖动元素。**② drag:**在元素拖动过程中触发,事件对象是被拖动元素。原创 2021-08-04 10:54:50 · 795 阅读 · 1 评论 -
HTML5 学习笔记(六)--- canvas 画布
一、概念 Canvas 元素时 HTML5 新增的专门用来绘制图形、字符和图像的元素,其本身是一个矩形区域,用户通过 JavaScript 来控制元素中的每一像素来绘制图形。二、绘制图形1、基本使用 ① 创建 Canvas 元素 ② 获取 Canvas 元素 ③ 获取上下文 创建 Context 对象 ④ 设置图形参数 ⑤ 绘制图形注意: 在绘制各种图形时 出现的坐标参数,都是以创建的 Canvas 元素盒子为基准的,盒子左上角的坐标为 (0,0) 。2、绘制直线原创 2021-08-03 20:29:06 · 796 阅读 · 1 评论 -
HTML5 学习笔记(五)--- 样式元素和表单域
声明:本博客的所有案例都是在谷歌浏览器中实验的结果。一、样式元素1、mark mark 元素用来强调文档中的某部分内容,以高亮的背景显示,通常是以黄色背景显示。使用形式与 strong 相同,不太常用。案例展示:案例代码:<p>这是一段文章中的<mark>强调部分</mark></p><p>这是一段文章中的<mark>强调部分</mark></p>2、meter meter 元素用来原创 2021-08-02 21:40:34 · 216 阅读 · 1 评论 -
HTML5学习笔记三
HTML5学习笔记三一、3D转换特点:近大远小 遮挡不可见三维坐标系: x轴----向右是正值 向左是负值; y轴----向下是正值,上面是负值; z轴----向屏幕外是正值,向里面是负值。最常用到的功能是:3D位移和3D旋转1、3D位移 语法格式:transform: translateX(100px):仅仅是在 x 轴上移动transform: translateY(100px):仅仅是在 y 轴上移动transform: translateZ(100px):仅仅是原创 2020-10-05 21:38:55 · 232 阅读 · 0 评论 -
HTML5 学习笔记(四)--- 语义标签、隐藏/显示内容和对话框
最近抽时间把花了好几千买的大学教材翻了翻,有一本是青岛英谷的 HTML5 课本 ,发现有一些知识没了解过,所以就把这些零碎的知识整理了一下,也算是加深一下印象。一、语义标签具体使用情景1、article 该元素通常用于表示页面中独立的、完整的一块内容,例如显示博客文章、新闻内容等情景。2、header 该元素通常用于显示某块内容或整个网页的标题部分,可能会在网页中多次出现,例如显示文章标题、网站标题等情景。3、footer 该元素通常用于显示网页底部的某些相关信息,例如网页原创 2021-08-01 21:58:30 · 500 阅读 · 1 评论 -
html5+css3 学习笔记二(菜鸡详细入门笔记)
html5+css3 学习笔记二一、2D转换2D 转换是改变块级标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scale1.translate改变块级标签的位置语法:transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)代码演示:/* 水平垂直移动 100px */ /* transform: translate(100px, 1原创 2020-09-30 08:48:17 · 274 阅读 · 0 评论 -
HTML5 学习笔记(八)--- 音频和视频(补充)
一、audio 音频 和 video 视频1、属性属性作用currentTime获取或设置音频、视频播放的当前时长,单位为秒duration获取音频、视频的总时长,单位为秒paused判断音频、视频是否处于暂停状态volume获取或设置音频、视频的音量,值的范围:0~1playbackRate获取或设置音频、视频的当前播放速度,值的范围:-1~2muted判断音频、视频是否处于静音状态2、常用方法方法作用canPl原创 2021-08-04 15:08:05 · 148 阅读 · 0 评论