DangR_Jisoo的博客

CSS3——box-shadow属性的介绍其实box-shadow在实际开发中应用比较少，但是前几天看过一个老师写一个小项目，里面用到了box-shadow，而且对这个讲解的很详细，我就感觉我自己学的跟那位老师学的不是一个box-shadow，感觉自己了解的不透彻，所以来做个笔记box-shadow: 10px 10px 10px rgba(44, 16, 111,.5);首先，由上述代码可以看出，box-shadow传递四个参数走向X方向的阴影走向Y方向的阴影阴影程度透明度如果想要

JavaScript之递归及其相关案例什么是递归？递归：一个函数在内部可以调用其本身var num = 1;function fn() { console.log('我爱写代码'); if (num == 6) { return; } else { num++; } fn();}fn(); //'我爱写代码'*6由于递归很容易发生栈溢出错误，所以必须要加退出条件return

JavaScript闭包详解及案例一. 变量作用域函数内部可以使用全局变量函数外部不可以使用局部变量当函数执行完毕时，本作用域内的局部变量会被销毁二. 闭包闭包:有权访问另一个函数作用域中变量的函数(变量所在的函数就是闭包函数，闭包就是典型的高阶函数)闭包的作用：延申了变量的作用范围//方法一function fn() { var num = 10; return function() { consol

JavaScript注册事件的两种方式传统注册方式(具有唯一性，后面注册事件的处理函数会覆盖掉前面的处理函数)var btn=document.querySelectorAll('button'); btn[0].onclick=function(){ alert('你好'); //不会弹出 } btn[0].onclick=function(){ alert('我不好'); //会弹出}

JavaScriptDOM事件流DOM事件流分为三个阶段: 1.捕获阶段 2.当前目标阶段 3.冒泡阶段JS代码只能得到捕获阶段或冒泡阶段的一个onclick和attachEvent只能得到冒泡阶段捕获阶段:如果addEventListener的第三个参数是true,则处于捕获阶段document–>html–>body–>father–>son冒泡阶段:如果addEventListener的第三个参数是false或者省略,则处于冒泡阶段son–>father–&gt

JavaScript偏移量offset，可视区client，滚动scroll系列一.element.offsetTop element.offsetLeft以上两种方法获得元素距离其父元素的上距离与左距离，但是父元素得设置定位，若没有设置定位，则以body为主<style> * { margin: 0; padding: 0; } .box1 { p

JavaScript定时器及案例两种好用的定时方法window.setTimeout(调用函数,[延迟的毫秒数]);window在调用的时候可以省略延迟的毫秒数可以省略，默认值是0毫秒后调用调用函数可以写在外面页面中通常有很多定时器，我们会将定时器赋给变量window.addEventListener('load', function() { var time = setTimeout(fn, 1000); function fn() {

JavaScript基本包装类型String(字符串对象)只有对象，复杂数据类型才有属性和方法，为什么string这个简单数据类型会有length属性呢？基本包装类型：把简单数据类型包装成复杂数据类型有哪些基本包装类型呢？var str='pink';console.log(str.length); //4以上代码等同于var str=new String('pink');console.log(str.length); //4根据字符返回位置str.indexOf(‘要查找的字

JavaScript内置对象Math一. JavaScript对象共有三种：自定义对象（前面所学，基础），浏览器对象（API所学），内置对象（基础）二. 内置对象：JavaScript语言自带的一些对象，供开发者使用，并提供了最常用，最基本的属性和方法(Math,Array,Date,String等)三. Math对象：是一个内置对象，具有数学常数和函数的属性和方法，不是一个函数对象四. 有关Math的相关方法Math.max() 是一个方法，返回一组数据里的最大值console.log(

JavaScript之Date()——倒计时案例案例：距2021年1月1日还有多少天？思路：活动开始的时间减去当前的时间function countDown(time) { var nowTime = +new Date(); //获得当前时间的时间戳 var inputTime = +new Date(time); //获得你要输入时间的时间戳 var times = (inputTime - nowTime) / 1000; //获得两个时间差的秒数 var d = parseIn

JavaScript内置对象Date(日期)Date()日期对象，是一个构造函数，所以必须使用new来创建和调用日期对象var date_ = new Date(); //若括号里没有任何参数，则返回系统当前时间console.log(date_); //Fri Nov 27 2020 23:04:45 GMT+0800 (中国标准时间)Date()里面参数常见的写法1. 数字型：2020,05,06(此方法返回的月份比写入的月份大一月)var date1 = new Date(2020, 0

JavaScript内置对象Array(数组)一. 创建数组的两种方式方法一：数组字面量var arr=[1,2,3,4,5,6];方法二：new Array()var arr1=new Array(); //创建一个空数组var arr2=new Array(2); //创建一个长度为2的数组var arr3=new Array(2,3,4); //创建一个[2,3,4]的数组二. 检测是否为数组的两种方法方法一：instanceof运算符var arr4=[1,2,3,

Javascript对象详解什么是对象？对象是一组无序的相关属性和方法的集合（字符串，数值，数组，函数等），由属性和方法构成创建对象的三种方式：方式1：使用字面量创建对象//创建对象var obj={ name: 'jisoo', //属性 age: 25, //属性 gender: '女', //属性 sayHi: function(){

HTML5语义化标签<header>头部标签<nav>导航标签<article>内容标签<section>块级标签<aside>侧边栏标签<footer>尾部标签注意：语义化标签主要针对于搜索引擎新标签在页面中可以使用多次IE9中，需要把这些元素转换为块级元素移动端使用这些标签较多header, nav, article, secti

CSS3设置动画效果制作动画分为两步：先定义动画用keyframes定义动画@keyframes 动画名称{ 0%{ width:100px; } 100%{ width:200px; } }0%是动画的开始，100%是动画的完成，当然也可以设置多个动画过程，比如

CSS3盒子模型在之前学习的CSS中，给盒子设置的内边距与边框最终会影响盒子的大小div { width: 200px; height: 200px; background-color: aqua; border: 20px solid red; padding: 50px; } <div></div>在上述代码中，我们给div盒子设置的是宽和高各200

HTML5多媒体标签和视频标签多媒体标签音频标签 <audio src="文件地址" controls="controls"></audio>支持格式有限，主要支持三种格式1.Ogg Vorbis(常用)2.MP3(常用)3.Wav属性:1.autoplay=“autopaly”(音频在就绪后马上播放，谷歌浏览器禁用了自动播放)2.controls=“controls”(向用户显示控件，比如播放按钮，不同浏览器显示控件不同)3.loop=“loop”(音频结束

CSS3——3D转换首先来看什么是3D：3D效果是元素分别在X轴，Y轴，Z轴呈现，转变3D呈现transform-style用来控制子元素是否开启三维立体环境transform-style:flat; 不开启，默认transform-style:preserve-3d; 开启代码写给父级，但影响子盒子3D透视(perspective)如果想要在网页中产生3D效果需要透视透视写在被观察元素的父盒子之上单位是px，数值越小，3D效果越明显3D位移transform:tran

CSS3——2D转换2D转换transform可以实现元素的位移(translate)，旋转(rotate)，缩放(scale)等效果位移transform:translate(x,y)一起写transform:translateX(n)分开写transform:translateY(n)分开写若参数的单位是百分比，则是以盒子和高度和宽度来作为参考点的，也可以以px为单位优点：不会影响到其他元素缺点：对行内标签没有效果img { width: 200px;

用CSS属性设置三角效果先看效果图代码如下：.box1 { position: absolute; top: -16px; right: 20px; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: pink; }

利用绝对定位使盒子居中若想设置水平居中：1.元素先设置绝对定位，把left设置成50%2.然后把margin-left设置成盒子宽度的一半.Mbox { position: relative; left: 50%; margin-left: -100px; width: 200px; height: 200px; background-color: pink

外边距+内边距+边框详解外边距(margin)margin可以设置盒子和盒子之间的距离若想要盒子水平居中，则必须满足两个条件：(1).盒子必须设置宽度(2).让左右外边距为auto(margin: 10px auto)若想要让行内元素或行内块元素水平居中，则只需要给其父元素添加text-align:center;即可有关外边距最经典的问题就是嵌套块元素垂直外边距的塌陷.father { width: 400px; height: 400

浮动的特性浮动的元素会脱离标准流<style> * { margin: 0; padding: 0; } .box1 { width: 500px; margin: 100px auto; border: 10px solid red; } .box2 { /* fl

定位的特殊属性行内元素添加绝对定位或固定定位，可直接设置宽高，不用设置display：inline-block转换成行内块元素之后再设置宽高块级元素添加绝对定位或固定定位，若没有给宽高，则默认宽高是元素内容的大小在不设置块级元素的宽高，也不设置定位时，元素的宽度默认和父元素一样宽，高度就是元素撑开盒子的高度，但是设置定位之后，在不设置宽度高度的情况下，元素的宽度和高度就是撑开元素的高度和宽度脱标的盒子(浮动，绝对定位，固定定位)不会触发外边距的塌陷只有定位的元素才有z-index属性...

定位全解(绝对，相对，固定，粘性定位)一. 绝对定位(position: absolute)绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流<style> * { margin: 0; padding: 0; }

表格常用属性table{ border-collapse: collapse; width: 500px; height: 200px; text-align: center;}table td { border: 1px solid red;}属性含义border-collapse: collapse合并相邻的边框width设置宽度height设置高度text-align设置表格的内容对齐方

取消与默认属性在我们点击文本框<input>时，文本框默认边框会加黑加粗，影响了视觉效果，我们可以使用outline：none属性来取消默认样式未设置outline：none属性之前的效果如下图所示：鼠标未聚焦之前：鼠标聚焦之后：很清楚的发现轮廓加粗加黑了，使文本框变得很不美观但是加了outline：none属性之后，文本框样式与没有聚焦一样input{ outline: none}2. 我们在页面写入一个文本域时，文本域的大小可以随意用鼠标拖动来设置大小，一般情

表单相关属性(详解)一. 表单组成元素：表单=表单标签+表单元素(表单域)+表单按钮表单标签<form action='http://127.0.0.1:8000/' method='post' name='form1'></form>功能：用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址method=get或post指明提交

背景图片背景图片主要有以下几个属性：background-imagebackground-image: url('播放按钮.png');background-repeatbackground-repeat: no-repeat;background-positionbackground-position: center top;background-attachmentbackground-attachment: scroll;background-image

HTML中meta标签的作用首先，meta标签是一个自结束标签，其格式为<meta…/ >，下面介绍meta标签的作用：1. 规定字符集 <meta charset="utf-8">HTML规定解码字符集为UTF-8， 此句为了防止乱码，UTF-8字符集支持 地球上所有的文字，而中文系统默认编码是GB2312，产生乱码的根本原因是编码和解码采用的字符集不同。...