- 博客(23)
- 收藏
- 关注
原创 原生js实现简易放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .box {...
2020-01-16 11:18:20
177
原创 css选择器以及权重的优先级
**选择器类型**1、ID #id2、class .class3、标签 p4、属性 [type=“text”]5、伪类 :hover6、伪元素 ::after7、子代选择器、相邻(兄弟)选择器等8、通配符 ***权重计算**内联样式,如: style=””,权值为1000。ID选择器,如:#id,权值为0100。类,伪类和属性选择器,如.c...
2020-01-15 18:31:48
235
原创 document。write和innerHTML的区别
1.document.write是直接将内容写入到页面,但是在写之前如果没有调用document.open, 那么浏览器就会自己去调用document.open,而且每次写完之后我再去关闭浏览器然后再去打开会重新调用该函数,而此时就会导致页面被重写。2.innerHTML则是DOM元素的一个属性,会精确读取到html的某一个DOM元素。并且可以对此DOM元素来进行更改,当我的innerHTML将...
2020-01-14 11:14:00
1618
原创 window。onload和$(document)。ready的区别
1.window.onload必须等到页面内(包括图片的)所有元素加载到浏览器中后才能执行。而$(document).ready必须是等DOM元素加载完毕后就会执行。2.window.onload如果有多个,则只会执行最后一个,它会把前面的都覆盖掉。$(document).ready则可以编写多个,并且每一个都会执行。3.window.onload不能简写,$(document).ready可...
2020-01-13 20:16:59
178
原创 关于display:none;和visibility:hidden;的相同点和不同点
相同点:display:none;和visibility:hidden;都是使元素隐藏设置前:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...
2020-01-09 10:19:32
577
原创 原生js模仿京东轮播图效果(简易效果)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; ...
2020-01-08 10:22:06
317
原创 rgba()和opacity的比较
首页rgba()和opacity都能实现透明效果,但是rgba()只作用于元素的颜色或其背景色,而opacity作用于元素,以及元素内的所有内容的透明度直接看代码和效果图/opacity/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...
2020-01-07 13:24:29
143
原创 关于CSS text-transform 属性
**简单来说text-transform 属性就是控制文本的大小写(绝大多数的时候针对英文)。****1.none 默认。定义带有小写字母和大写字母的标准的文本。**2.capitalize 文本中的每个单词以大写字母开头。**3.uppercase 定义仅有大写字母。**4.lowercase 定义无大写字母,仅有小写字母。**5.inherit 规定应该从父元素继承 t...
2020-01-06 12:52:20
645
原创 获取时间并且将其格式化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p id="time">存放时间的位置</p><script t...
2020-01-03 10:14:53
159
原创 阻止a标签的跳转
直接看代码1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="http://www.baidu.com">百度一...
2019-12-31 09:31:04
287
1
原创 关于background-size的cover和contain
1.cover:把背景图像扩展至足够大(非等比例的扩大),以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s...
2019-12-30 09:50:44
559
原创 整理一下关于HTML的文本格式化标签
HTML 文本格式化标签标签描述<b>定义粗体文本<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>...
2019-12-27 10:16:15
170
原创 关于jQuery尺寸问题(处理元素和浏览器窗口的尺寸)。
jQuery尺寸的方法** width()height()innerWidth()innerHeight()outerWidth()outerHeight()****1.width()和 height()设置或返回元素的宽度(高度)(不包括内边距、边框或外边距)。2.innerWidth()和 innerHeight()设置或返回元素的宽度(高度)(包括内边距)。3.oute...
2019-12-26 09:41:36
172
原创 innerHTML和innerText的区别
1.innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。2.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&...
2019-12-25 09:37:48
131
原创 关于CSS3新增的背景属性
先前,再css里面我们知道background的几个属性color,image,repeat,attachment,position,这些都是我们再css里面常用的,那么css3新增的属性有哪些呢?往下看:**CSS3新增属性:background-clip ,background-origin , background-size1.background-clip背景的剪裁属性,是从指定位...
2019-12-24 10:11:48
407
原创 CSS3之@font-face 规则
1.首先使用你需要的字体(在这之前你必须要有自己的字体文件);**@font-face{ font-family: myFirstFont; src: url('../fonts/icomoon.ttf') /*这是你所要引用的字体文件*/ ,url('../fonts/icomoon.eot'); /* IE9 */}div{ font-family:myFirstFon...
2019-12-23 09:48:59
177
原创 CSS3之过渡 transition
**首先,CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。**如果要实现这一点,必须规定两项内容:①指定要添加效果的CSS属性②指定效果的持续时间。******transition属性的介绍****1.transition-property : 规定应用了过渡的 CSS 属性的名称。① none :没有属性会使用过渡效果。②all : 所有属性都将获得过渡效果。...
2019-12-20 10:09:22
213
原创 css之5种定位position
1.position:static 静态定位**HTML默认值,就是没有定位,属于正常的文档流top,left,right,bottom等偏移量没影响**1.position:relative 相对定位
2019-12-19 17:02:49
198
原创 css3之box-sizing
首先,box-sizing 属性是以特定的方式定义匹配某个区域的特定元素,以适应指定区域,是css3中新增的属性。**语法格式box-sizing: content-box/border-box/inherit;**属性介绍①.content-box: 由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。也就是我们所说的标...
2019-12-19 10:03:12
283
原创 JS对HTML DOM元素的增删改查
**1.增:**①createElement : 创建一个新的HTML元素(节点);var p = document.createElement("p");②createTextNode : 创建一个新的文本节点;var ptext = document.createTextNode("这是一个文本节点。");③appendChild : 给所选的目标元素末尾添加插入节点(或者给...
2019-12-18 10:54:19
239
原创 js定义变量的3种方式var , const , let以及区别
**1.用var定义一个变量,此时变量 不初始化(没有赋值) 时输出undefined,并且变量是 可以被修改(重新赋值)**/*var a; //不初始化(没有赋值)alert(a);//输出undefined*/var a = 1;alert('此时是函数外面定义的a:' + a);//输出a=1function one(){a = 2;alert('此时是函数外面定义的a ...
2019-12-17 10:17:22
308
原创 归纳CSS3的动画属性
(代码最下,先了解下属性)1.@keyframes用于来规定动画;**2.animation这个是所有动画属性的简写模式,除了一个 animation-play-state 属性;**3.animation-name顾名思义,这个是用来规定动画的名称的**4.animation-duration这个是用来规定动画完成一次所要花的时间,默认的是0;**5.animation...
2019-12-16 11:39:26
181
原创 清除浮动(闭合浮动)的几种方法
****1.父级div定义高度**原理: 给父元素设置固定的高度,避免了父元素无法获取height的问题(就是父元素height不会为0);优点: 简单,代码少,容易掌握;缺点: 只能适用于固定的高度布局(限制性比较大);**2.在浮动的元素的结尾处添加空标签**原理: 在浮动的元素后面添加空的div标签并且设置样式clear:both;优点: 简单,代码少,浏览器支持好;...
2019-12-14 13:48:12
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人