- 博客(22)
- 收藏
- 关注
RSS订阅原创 （帧动画）
# 一、帧动画 ### 1、定义关键帧 ```html @keyframes 动画名称（英文） { 0% { /* 动画的开始 */ } 25% { /* 在25%的时候进行的一个动画 */ } 50% { /* 在50%的时候进行的一个动画 */ }
2022-10-26 19:32:57
74
原创 （弹性盒子）
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
2022-10-17 21:18:17
85
原创 （弹性盒子）
## 1、弹性盒子 ### 1.1 什么是弹性盒子？ - 弹性盒子是CSS3的一种新的布局模式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间 - - 操作方便，布局简单，移动端使用广泛 - PC端浏览器支持情况较差 - IE11或更低版本中，不支持或部分支持 - 在盒模型中较为灵活 - 弹性盒模型的内容包括：弹性容器、弹性子元素——项目 - 原理：为父元素设置flex属性，控制子元素的位置及排列方式 - 应用场景 : 移
2022-10-17 21:15:22
68
原创 表单属性选择器
### 时间日期选择器 #### 1、date日期 - 作用：选择一个日期（年月日） - 代码示例 ```html <input type="date"> ``` #### 2、time时间 - 作用：选择小时分钟 - 代码示例 ```html <input type="time"> ``` #### 3、datetime-local本地时间 - 作用：选择一个日期和时间 (年月日时分) - 代码示例 ```html <i
2022-10-13 22:18:10
340
原创 【html5】
# **HTML5** >html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 ## 1、新特性 - 新增语义化元素 - 新增表单相关新元素、新属性 - 新增canvas元素 * canvas 元素使用JavaScript 在网页上绘制图像 - 新增了多媒体相关的video和audio元素 - 地理信息 * HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的
2022-10-13 22:16:18
69
原创 （优缺点）
##### 1.3.3、优缺点 - 结构复杂 - 可以创建任意列数 - 方便通过百分比实现自适应 ### 2、圣杯布局分析实现要点 - 三列（不一定等高） - 改变加载顺序，优先加载中间列—（结构上:中左右，显示效果上：左中右） - 中间列自适应，两侧列固定 #### 2.1、圣杯布局 **HTML** ```HTML <div class="wrap"> <div class="center">中间</div> <
2022-10-13 22:13:06
80
原创 布局技巧）
## 布局技巧 ### 1、等高布局 等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。 #### 1.1、实现要点（需求） - 多列 - 每一列背景不同 - 其中任意一列变高，其它列同步变高 #### 1.2、方法一 ##### 1.2.1、原理 利用padding和margin负值相抵消 - 利用padding提前延伸背景 - 利用margin负值抵销padding的占位 ```html <div class="wrap"> &l
2022-10-13 22:11:09
66
原创 【标签类】
### 1、音频audio - HTML5种新增的音频的标准方法 - IE8及更早版本的浏览器中不支持 - HTML5中支持的音频格式 - ogg audio/ogg 支持浏览器 chrome、Firefox、Opera10+ - MP3 audio/MPEG 支持浏览器 chrome、firefox、OPera10+、IE9+、safari - wav audio/wav 支持浏览器 chrome、Firefox、Opera、Safari - 语法 ```html <aud
2022-10-13 22:05:27
81
原创 html5
# **HTML5** >html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 ## 1、新特性 - 新增语义化元素 - 新增表单相关新元素、新属性 - 新增canvas元素 * canvas 元素使用JavaScript 在网页上绘制图像 - 新增了多媒体相关的video和audio元素 - 地理信息 * HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的
2022-10-13 22:01:10
66
原创 css特性总结
### 2、CSS三大特性总结 #### 2.1 继承性 ##### 2.1.1 概念 父元素向后代元素传递属性的机制。 ##### 2.1.2、表现 后代元素会继承父元素的属性。 ##### 2.1.3、总结常用可继承的属性 font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等 ##### 2.1.4、强制继承 每个CSS属性都接受这些值inherit，表示强
2022-10-07 21:04:53
60
原创 表单外界面属性
### 4、form的属性 #### 4.1 action属性 ```css action="数据提交地址.php,.net" ``` - 作用： 表单的动作属性，定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址。 - 注意： 如果省略 action 属性，则 action 会被设置为当前页面。 #### 4.2 target属性 - 作用： 设置目标地址的打开方式 -
2022-10-07 21:02:23
188
原创 html表单
## html表单 ### 1、概述 表单的作用：用于搜集不同类型的用户输入。 表单的组成：表单元素（控件）、表单区域。 ### 2、表单区域 #### 2.1 form标签 - 语法： ```css <form></form> ``` - 作用： 定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等 - 注意： form表单实现上述操作是最为常见方式之
2022-10-07 20:58:33
67
原创 css定位布局
## CSS 定位布局 ### 1、定位的作用 普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示。 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）。 ### 2、定位的实现 使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。 定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。 边
2022-10-07 20:56:55
87
原创 css浮动
## CSS 布局 ### 1、css浮动 **概述** 网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。 #### 1.1、浮动的概念 浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。 #### 1.2、浮动属性 - float - left 左浮动 - right 右浮动 - float:none 不浮动(默认值)
2022-10-07 20:51:02
128
原创 css浮动
1、css浮动 **概述** 网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。 #### 1.1、浮动的概念 浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。 #### 1.2、浮动属性 - float - left 左浮动 - right 右浮动 - float:none 不浮动(默认值) #### 1.3、浮动的基本特性
2022-09-29 22:02:52
70
原创 【css外边距的问题】
1 外边距问题 **典理情形一：**  - 结构关系：嵌套块元素的垂直外边距塌陷 - 问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值
2022-09-29 21:59:09
101
原创 css选择器
### 1、复合选择器 概述：由两个或多个基础选择器通过不同的方式组合而成的选择器 #### 1.1 后代元素选择器 - 语法： ```css E F { 样式声明; } ``` - 描述：【空格】连接一个或多个选择器 - 作用： 选择E元素内部包含的所有F元素 - 代码示例： ```css .box span{ background-color:red; } <div class="box"> <sp
2022-09-29 21:56:19
270
原创 css盒模型
CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器） 所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）   ### 2、内容 content 概述：CSS通过为元素设置width和height属性值来规定元素的c
2022-09-29 21:51:55
66
原创 css字体文本属性
## CSS字体 ，文本属性 ### 1、css字体 #### 1.1 font-family - 作用：设置文本的字体系列 - 语法：font-family:字体名称； - 常用值： - 一个字体名称或系列名称（介绍常用字体名称、字体系列） - 微软雅黑 Microsoft YaHei - 宋体 SimSun - 黑体 HeiTi - 楷体 KaiTi - 多个字体名称 - 逗号分开 如果浏览器不支
2022-09-29 21:50:06
69
原创 html表格
## HTML表格 ### 1、表格简介 表格由 `table `标签来定义。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。 类比：excel表格&网页中的表格 ### 2、表格的作用 之前，web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难，现在已经被DIV+CSS布局所取代。 现在，用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) **注意：**现在HTML表格应该用于展现表格数据，而
2022-09-29 21:48:06
83
原创 【html常用标签】
## html常用标签 ### 1、html列表 #### 1.1 无序列表 没有序列的一组内容。 (1)语法 ```html <ul> <li>苹果</li> <li>香蕉</li> ... </ul> ``` (2)语义 无序列表，用于将没有数字顺序的一组数据或内容进行分组。 (3)默认样式（演示） - 默认间距(外边距、内边距) - 列表样式：实心圆 (4)典型应用 - 新闻列表 -
2022-09-29 21:43:13
45
原创 【浏览器】
- web浏览器是用于读取HTML文件，并将其作为网页显示 - 浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核； - 内核的作用负责对网页语法的解释并渲染网页； - 五大浏览器：chrome、safari、Firefox、Opera、IE 1.chrome 谷歌浏览器 生产商：Google 内核：webkit、blink 2.Firefox 火狐浏览器 生产商：Mozilla 内核：gecko 3.Safari 苹果浏览器 生产商：苹果公司
2022-09-29 21:37:15
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人