- 博客(23)
- 收藏
- 关注
RSS订阅原创 CSS 居中设置
居中情况1：不开启定位，并确定元素大小——margin例子：水平居中 .box1{ width:100px; height:100px; background-color: khaki; margin:150px auto; }情况2：开启定位，并确定元素大小 ——absolute+margin例：水平垂直居中 .box1{ background-
2021-07-07 21:01:11
89
原创 JS BOM
BOM浏览器对象模型作用：在BOM中为我们提供了一组对象，用来完成对浏览器的操作一组对象：Window 整个浏览器的窗口 也是网页中的全局对象间歇调用setInterval(回调函数，间隔的时间)返回值 一个Number类型的数据，作为定时器的唯一标识如何关闭：clearInterval(定时器标识)超时调用setTimeout(回调函数，延时时间) ，只会执行一次如何关闭：clearTimeout(标志)系统对话框alert(字符串) 警告框confi
2021-07-05 21:44:31
91
原创 js 事件对象
事件对象（Event）什么是事件对象当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向如何使用：IE8以下浏览器中事件对象没有作为实参传递，而是作为window的属性保存为了兼容IE8以下，常采用以下方式：`元素.事件 = function(event){ event = event || window.event; };`...
2021-07-05 20:50:07
99
原创 JS-DOM
DOM 文档对象模型文档一个网页就是一个文档对象每一个节点都转换为对象模型表示节点和节点之间的关系，方便操作页面节点的分类文档节点 Document，整个网页元素节点 Element 网页中的标签属性节点 Attribute 标签中的属性文本节点 Text 网页中的文本内容DOM的操作查询利用document查询，document是window对象的属性获取页面中的所有元素：document.all；获取页面中html根元
2021-07-04 22:56:23
96
原创 js-Date对象
Date表示一个时间创建一个Date对象:var d = new Date();创建一个指定的时间对象var d2 = new Date("2/18/2011 11:10:30");获取当前日期对象是几日d2.getDate()`获取当前日期对象是周几0 表示周日，1表示周一d2.getDay();获取当前时间对象的月份d2.getMonth()0 表示1月获取当前日期对象的年份d2.getFullYear()获取当前日期对象的时间戳d2.
2021-07-03 23:39:30
46
原创 JS-字符串常用属性和方法
字符串常用方法属性length属性，获取字符串的长度-例子：str.length方法查找某一字符charAt(索引) 查找并获取指定索引的字符charCodeAt(索引) 查找并获取指定索引字符的编码indexOf(查找的字符) 从前往后，查找并获取某一字符/字符串在整个字符串首次出现的索引lastIndexOf(查找的字符)) 从后往前，查找并获取某一字符/字符串在整个字符串首次出现的索引search(正则表达式) 根据正则表达式，查找指定内容，并将第一个匹配到的内容
2021-06-22 20:27:44
70
原创 JS-数组
JSP–数组也是一个对象位置：索引，从0开始创建数组：var arr = new Array();var arr=[];添加元素向指定索引添加元素：arr[0]=1;创建数组时，直接添加元素，var arr=[123,“helli”,true,null]push() 方法，向末尾添加元素,arr.push(“hello”); 返回值为数组新的长度unshift()方法，向前面添加元素，arr.unshift(1,“hello”) 返回值为数组新的长度删除元
2021-06-21 21:27:38
140
原创 JS—流程控制
流程控制条件判断语句if-else if 不加括号则只执行最近的一个语句if(条件表达式){ 语句... }if(条件表达式){ 语句... }else{ 语句... }-if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else if(条件表达式){ 语句... }else{ 语句... }switch-caseswitch(条件表达式){ case 表达式: 语句... b
2021-06-17 23:44:48
144
原创 JS—运算符
运算符逻辑运算符! 取反当对非布尔值使用!时，会先将其转换为布尔值然后再取反可以利用!来将其他的数据类型转换为布尔值&& 与运算 短路与 如果第一个值是false，则不再检查第二个值对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值|| 或运算 短路的或对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值赋值运算符=+=-=*=/=%=关系运算符><>=<=如果比较
2021-06-17 23:38:40
50
原创 javascript-1
简介负责页面中的的行为。一门运行在浏览器端的脚本语言。编写的位置：可以编写到标签的指定属性中<button onclick="alert('hello');">我是按钮</button><a href="javascript:alert('aaa');">超链接</a>可以编写到script标签中<script type="text/javascript"> //编写js代码 </script>
2021-06-16 16:57:28
45
原创 弹性盒笔记
弹性盒(flex)一种布局手段，用来代替浮动来完成页面的布局，让元素可以跟随页面的大小的改变而改变使用：父元素，设置为弹性容器`display:flex; 设置为块级弹性容器display:inline-flex 设置为行内的弹性容器`弹性容器的子元素则为弹性元素，弹性元素也可作为弹性容器弹性容器的样式：flex-direction 容器中弹性元素的排列方式可选值：row 默认值，弹性元素在容器中水平排列（左向右）row-reverse 弹性元素在容器中反向水平排列（
2021-06-13 23:43:50
37
原创 Less笔记
Lesscss的预处理语言作用：可以编写更少的代码实现更强大的样式特性：对变量的支持、对mixin的支持执行：将less转换为css，然后再由浏览器执行CSS自身也支持变量 html{ /* css原生也支持变量的设置 */ --color:#ff0; --length:200px; } .box1{ /* calc()计算函数 */ wi
2021-06-13 23:11:04
42
原创 CSS-动画
CSS-动画过渡（transition）发生某个行为时某属性值发生变化transition-property:执行过渡的属性，例height\ weight \alltransition-duration:过渡的持续时间，s或mstransition-timing-function:过渡的时序函数可选值：ease 默认值 先加速，后减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速后减速cubi
2021-06-13 22:29:22
39
原创 CSS背景
背景样式背景颜色： background-color ：背景图片： background-image:url();设置背景图片的位置：background-position:top / left / right / bottom / center 在两个方位设置以上偏移值，缺省则默认缺省所在方位伪center背景重复方式：background-repeat:no-repeat / repeat-x / repeat-y设置背景的范围background-clip:边框出现的位置 bor
2021-06-06 23:33:58
32
原创 CSS字体
字体字体的样式colorfont-size:单位 ：px em remfont-family 字体种类有:serif 衬线字体 \sans-serif 非衬线字体 \monospace等宽字体，可设置多种，浏览器会由前向后自动识别使用font-style:字体的风格 normal italicfont-weight:字体的加粗 normal bord字体样式可简化成一行：例子font: bold italic 50px/2 微软雅黑, 'Times New Rom
2021-06-06 23:06:21
68
原创 CSS定位
定位position:static 静态 、relative相对定位、absolute绝对定位、fixed固定定位、sticky粘滞定位relative 相对定位 开启相对定位后，不设置偏移量没有任何变化；层级提高，但仍在文档流中占用位置，不影响后面元素的布局；定位参考点是自身原本的位置absulote 绝对定位 开启绝对定位后，不设置偏移量没有任何变化；脱离文档流，变成行内块；定位参考点是包含其的（开启了定位）块元素（如果都没有开启定位，则参考点是根元素html）fixed固定
2021-06-06 21:37:28
31
原创 浮动+网页布局+高度塌陷问题解决
浮动+网页布局+高度塌陷问题解决浮动float: none元素不浮动 /left元素向左浮动 /right元素向右浮动特点：设置浮动的元素会脱离文档流，不再占据文档流的位置，元素也变成了行内块元素，即不占据一行，高度和宽度默认被内容撑开，宽度和高度可设置。浮动元素会向父元素的左/右移动，并不会从父元素没流出，也不会超过前面的浮动或没有设置浮动的块元素浮动元素不会盖住文字，文字为环绕排布作用：可以元素水平排列网页布局<body> <
2021-06-06 20:36:08
67
原创 CSS-2 布局
文档流网页是多层结构，最底部的一层为文档层创建的元素默认都在文档层中排列元素有两种状态：在文档流中不在文档流中特点：块元素在页面独占一行默认宽度是父元素的宽度默认高度是子元素内容的高度自上向下排列行内元素不会独占一行默认宽度和高度都取决于内容自左向右排布盒模型盒模型：由外边距(margin)、边框(border)、内边距(padding)、内容区(content)组成盒子大小：默认情况下，由内容区、内边距和边框相加决定
2021-06-05 13:53:52
73
原创 CSS-1 选择器及常用单位
CSS-1作用：修改元素的样式CSS修改的方式： - 内联样式/行内样式 在标签内通过style属性设置样式 - 内部样式表 在head内添加style标签设置对应元素的样式 - 外部引用 在外部CSS文件中编写一套样式表，通过<link rel=“stylesheet” href=“路径”>语法 -
2021-06-05 11:21:22
137
原创 vscode下载失败的解决方法
开始学前端，经人推荐用VS code，但是从官网下载多少次都是下载失败可以这样解决：1、复制下载地址2、将地址前缀改为：http://vscode.cdn.azure.cn 后面的/stable…不变3、回车，下载速度飞快~~...
2021-06-03 20:36:12
3192
5
原创 HTML-1
HTML1、HTML简介 超文本标记语言: HyperText Markup Language 包括**标签**及**文本内容**2、HTML结构<html><head><title>页面标题</title></head><body><h1>这是一个标题</h1><p>这是一个段落。</p><p>这是另外一个段落。</p>&
2021-06-03 00:02:11
119
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人