- 博客(38)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript
全局变量在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。局部变量在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）全局变量和局部变量的区别全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间预解析JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在
2022-02-18 15:46:50
117
原创 3D 转换
三维坐标系 x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 transfrom-style 控制子元素是否开启三维立体环境..
2021-12-15 20:24:50
136
原创 动画(animation)
动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px }} 语法格式(使用动画) div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间；} ..
2021-12-10 17:21:35
352
原创 2D 转换之 scale
scale 的作用 用来控制元素的放大与缩小 语法 transform: scale(x, y) 知识要点 注意，x 与 y 之间使用逗号进行分隔 transform: scale(1, 1): 宽高都放大一倍，相当于没有放大 transform: scale(2, 2): 宽和高都放大了二倍 transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致 transform:scale(0.5, 0.5): 缩小 scale..
2021-12-10 16:46:38
296
原创 设置元素旋转中心点(transform-origin)
transform-origin 基础语法 transform-origin: x y; 重要知识点 注意后面的参数 x 和 y 用空格隔开 x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center) ...
2021-12-10 11:41:47
1283
原创 transform
2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale translate 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y)transform: translateX(n)transfrom: translateY(n) translate 最大的优点就是不影响其他元素的位置 translate ..
2021-12-10 00:37:11
176
原创 盒子模型的大小改变
盒子模型（★★★）CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况：box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width如果盒子模型我们改为了box-sizing: border-box ， 那padding和border
2021-12-06 18:36:08
1277
原创 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构示例demo<style> div { width: 200px; height: 200px; background-color: pink; } /* div::before 权重是2 */ div::before { /* 这个content是必须要写的 */ content:
2021-12-06 18:17:13
548
原创 新增的表单元素 结构伪类选择器
<!-- 我们验证的时候必须添加form表单域 --><form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li>.
2021-12-06 13:33:56
75
原创 视频标签- video 音频标签- audio
基本使用当前 元素支持三种视频格式： 尽量使用 mp4格式使用语法： <video src="media/mi.mp4"></video>属性很多，有一些属性需要大家重点掌握：autoplay 自动播放 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性 width 宽度 height 高度 loop 循环播放 src 播放源 muted 静音播放示例代码：<video src="media.
2021-12-06 11:47:38
1626
原创 CSS 用户界面样式
鼠标样式 cursor li { cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。轮廓线 outline给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。 input { outline: none; }防止拖拽文本域 resize实际开发中，我们文本域右下角是不可以拖拽的。 textarea{ resize: .
2021-12-04 12:50:47
121
原创 CSS 三角
div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 ..
2021-12-04 11:29:14
60
原创 字体图标重要
字体图标的产生字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。2.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了
2021-12-03 16:38:47
162
原创 精灵图（重点）
为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）： 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理： 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图（sprites）的使用使用精灵图核心：精灵技
2021-12-03 14:29:31
215
原创 网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位 可以让每个盒子排列成为网页。一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。6.1. 标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。6.2. 浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局6.3. 定位定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。7.
2021-12-03 13:37:54
132
原创 圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px; 如果4个角，数值相同 border-radius: 15px; 里面数值不同，我们也可以按照简写的形式，具体格式如下: border-radius: 左上角 右上角 右下角
2021-12-03 11:09:42
439
原创 z-index 绝对定位的盒子居中
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴) 语法： 选择器 { z-index: 1; } z-index 的特性如下： 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上； 如果属性值相同，则按照书写顺序，后来居上； 数字后面不能加单位。 注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。 绝对定位的盒子居中..
2021-11-30 21:59:51
292
原创 定位(position)
定位 = 定位模式 + 边偏移定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。边偏移（方位名词）边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。边偏移属性 示例 描述 top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。 left left.
2021-11-30 15:15:10
157
原创 盒子浮动的重要性及对其它元素的影响
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等为什么需要浮动？有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可..
2021-11-26 23:00:10
916
转载 圆角边框 盒子阴影
border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length;参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom
2021-11-24 18:21:27
66
原创 盒子模型重点
盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器border : border-width || border-style || border-color 边框样式 border-style 可以设置如下值： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线边框样式 border-style 可以设置如下值：
2021-11-23 00:28:22
122
转载 CSS 的三个特性：层叠性、继承性、优先级
层叠性 CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突 的问题层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠继承性子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性 子元素可以继承父元素的样式（te.
2021-11-22 17:36:37
310
原创 背景图片
background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超 大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)background-image : none | url (url) 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号背景平铺background-repeat: repeat | no-repeat | repeat-x | repeat-y 背.
2021-11-21 13:25:12
139
原创 【无标题】简洁版小米侧边栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>简.
2021-11-21 12:43:29
65
原创 块元素 行内元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。 2.2 块元素 块级元素的特点： ① 比较霸道，自己独占一行。 ② 高度，宽度、外边距以及内边距都可以控制。 ③ 宽度默认是容器（父级宽度）的100%。 ④ 是一个容器及盒子，里面可以放行内或者块级元素。 注意： 文字类的元素内不能使用块级元素
2021-11-20 22:34:26
216
原创 CSS 的复合选择器
后代选择器 (重要）后代选择器又称为包含选择器例如：ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */元素1 和 元素2 中间用空格隔开 元素1 是父级，元素2 是子级，最终选择的是元素2 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可 子选择器 (重要）语法： div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */ 元素1 和 元素2 中间用 大于号 隔
2021-11-20 21:55:41
278
转载 基于CSS的新闻案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
2021-11-19 19:50:50
153
原创 CSS 文本属性
对齐文本 text-align 属性用于设置元素内文本内容的水平对齐方式。 div { text-align: center; }装饰文本 text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。 div { text-decoration：underline； }文本缩进text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。 div { text-indent:.
2021-11-19 16:24:43
56
原创 CSS 字体属性
CSS 使用 font-family 属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} 各种字体之间必须使用英文状态下的逗号隔开 一般情况下,如果有空格隔开的多个单词组成的字体,加引号. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示字体大小 CSS 使用 font-size 属性定义字体大小。 p { font-si.
2021-11-19 15:51:41
52
原创 CSS 基础选择器
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式。 语法 标签名{ 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ... } 作用 标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。 优点 能快速为页面中同类型的标签
2021-11-19 00:32:09
175
原创 注册页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>综合.
2021-11-16 14:32:26
44
原创 ＜select＞ 表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表语法： <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> 1. <select> 中至少包含一对<option&g.
2021-11-16 12:34:49
157
原创 表单标签 input
<input> 标签用于收集用户信息。 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。 <input type="属性值" /> <input /> 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型除 type 属性外，<input>标签还有其他很多属性，其常用属性如下...
2021-11-16 12:07:28
1383
原创 表单域form标签
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器. <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form> 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成...
2021-11-16 11:46:24
598
原创 列表标签 重点
无序列表<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。 无序列表的基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> 1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。 2. <ul>
2021-11-16 00:12:26
547
原创 2021-11-15
表格标签 合并单元格 合并单元格方式： 跨行合并：rowspan="合并单元格的个数" 跨列合并：colspan="合并单元格的个数
2021-11-15 23:55:01
323
原创 2021-11-14
HTML 常用标签<h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减，</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后，</h5> <h6>具体效果刷新见。</h6> 标签语义：作为标题使用，并且依据重要性递减<p>标签用于定义段 落，它可
2021-11-14 16:08:46
190
原创 2021-11-14
前端html标签<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。 <!DOCTYPE html> 这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页. 注意: 1. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。 2. <!DOCTYPE>不是一个 HTML 标签，它就是 文档类型声明标签。lang 语言种类 .
2021-11-14 15:36:30
192
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人