0 WU567_

尚未进行身份认证

暂无相关简介

等级
TA的排名 29w+

ES5新增常见方法

Array API数组:2个索引方法:indexOf() 和 lastIndexOf();5个迭代方法:forEach()、map()、filter()、some()、every();2个归并方法:reduce()、reduceRight();String API字符串trim();// 去掉字符串前后空格trimLeft()trimRIght()新增的对象方法JSON.pa...

2020-04-24 21:56:38

ES5严格模式

ES5严格模式除了正常运行模式,ECMAscript 5 添加了第二种运行模式:严格模式(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。严格模式的特点:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版本的Javascript做好...

2020-04-23 23:41:59

JS基础(三)—变量

变量JavaScript 变量是存储数据值的容器。1.变量声明: var a = "hello world";var声明变量的关键字a变量名=赋值"hello world"变量的值声明变量的时候计算机到底干了什么事呢?我们所写的程序运行在内存中,当我们使用关键字 var 声明一个变量的时候,计算机会从内存中留出一定储存空间,为我们存放不同类型...

2020-04-01 18:23:29

JS基础(二)—JS书写

01-JS基础1.JS书写位置js代码结尾的分号可加可不加;script标签可以出现在除title标签以内的其他任何位置;大部分情况写在body结束之前;内部jsscript标签有一个type属性,是可以忽略的:外部js创建一个外部js文件, 用src属性用路径的方式引入js文件:内部引入内联js2.向页面输出内容往页面中写一个字符串(单双引号...

2020-03-31 21:48:21

JS基础(一)—JS介绍

01-JS基础1.Javascript是一门面向对象的,跨平台的脚本语言。什么是面向对象?对象:属性和方法什么是跨平台?跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。什么是脚本语言?HTML文件必须在浏览器里执行。JS文件嵌入到HTML文件里才能执行。凡是不能独立执行需要依赖其他程序的,通常...

2020-03-31 00:24:10

响应式布局

响应式布局1.概念响应式布局:用一套代码,去适配不同的设备。既可以运行在PC端,也可以运行在移动端,从而实现响应式布局。就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。(注:比较适合小网站,个人博客,产品介绍页…)2.CSS3 Media Query要实现响应式布局,我们就需要知道CSS3中的Media Query(媒体查询),Med...

2020-03-26 13:07:38

CSS3实现倒影效果

css的功能很强大,可以实现很多效果。比如图像的倒影和文字的倒影等,利用的是box-reflect,因为浏览器兼容问题,目前主要采用-webkit-box-reflect来实现(谷歌浏览器)。倒影的属性:box-reflect:给图片加倒影,只需要给div加一张图片:-webkit-box-reflect: below;下倒影-webkit-box-reflect: abov...

2020-03-25 15:49:03

CSS3文本阴影、边框阴影

1.文本阴影 text-shadow首先来看一个特别酷炫的火焰字:代码:运行效果:这个火焰字就是用文本阴影实现的;text-shadow的属性值:text-shadow:x(阴影在x轴偏移,正值向右偏移,负值向左偏移)y(阴影在y轴偏移,正值向上偏移,负值向下偏移)blur(模糊度,值越大越模糊,不可为负值)color(阴影颜色)多阴影(用逗号隔开)火焰字利用的就是多...

2020-03-25 08:34:41

grid网格布局之骰子案例

上次用的flex布局做的骰子,这次用grid网格布局来做。点数1—5用3行3列的网格,点数6用3行2列的网格就ok啦html:css:点数1—5的网格结构都是33的(红框中的结构相同),再利用grid-area找到指定的位置即可点数1:点数2:点数3:点数4:点数5:点数6:32的网格运行结果:...

2020-03-24 09:34:23

flex布局之骰子案例

此案例用flex布局实现,有利于帮助我们掌握flex语法的使用。首先是1—3的点数,结构相同html:css:运行效果:接下来是点数4,因为flex适合做一维的布局,我们就把点数4的结构分为两行来操作html:css:注: 垂直是主轴的时候:默认情况下,当宽高不写的时候,宽度由父容器决定,高度由内容决定,所以这里我们要给box4下的div 每行50%的高度。运行效果...

2020-03-24 08:39:21

flex弹性盒模型

flex弹性盒模型随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。flex弹性布局比较适合做自适应的网页,特别是移动端(要适配不同大小的设备)一、语...

2020-03-23 21:03:17

CSS之元素居中方案

CSS常用的居中方案如图的这种情况,我们要让子元素在父容器内上下左右居中,常用的居中方案有:1、定位 + 拉取自身宽度的一半(这种情况子元素需要固定大小)2、定位 + 位移 : 当子元素大小不固定时,我们要让元素居中可以使用transfom:translate(xx%, xx%); 因为translate的百分比是按照子元素来计算的。此时box2的宽高可不固定,子元素都可以在父容器...

2020-03-21 23:23:02

CSS3 pointer-events属性(控制鼠标点击事件)

pointer-events:(鼠标点击事件失效)• 阻止用户的点击动作产生任何效果• 阻止CSS里的 hover 和 active 状态的变化触发事件• 阻止JavaScript点击动作触发的事件• 提交页面,提交按钮点击后,添加这个样式属性(style=“pointer-events”),来防止重复提交。• 一些层的绝对定位,覆盖按钮,穿透可以点击它。pointer-events...

2020-03-21 16:24:12

css3 calc()方法详解

css3 calc()方法1、什么是calc()?学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东西?在实际运用中更好的使用。calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pa...

2020-03-20 23:23:04

CSS3 iconfont字体图标的使用(很详细)

CSS3 iconfont(字体图标)首先来看看什么是字体图标,在哪里使用?比如天猫的商品分类栏:还有小米商城的底部栏:所以字体图标的使用的是比较多的,而且是很方便更改它的大小以及颜色的,还可以使用彩色的字体图标。首先分享一个非常多字体图标的网站:https://www.iconfont.cn/(阿里巴巴矢量图标库)在这里,基本上你想使用的图标都可以找到,那么接下来我们就看看是...

2020-03-20 21:47:52

HTML5语义化标签

HTML5语义化标签在学习HTML5语义化标签之前,首先来了解一下HTML5的一些相关知识。一、兼容性支持HTML5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器...

2020-03-18 13:13:56

animation动画

animation动画animation动画1、 首先要知道transition和animation的区别:transition:; 过渡 需要事件触发animation 动画 不需要事件触发,使用关键帧就可以执行2、 animation原理:逐帧动画。会把整个运动过程,划分成100份。3、animation属性:▷ animation-name : ; 设置动画的名字 (自定...

2020-03-16 09:42:36

transform变形

transform变形一、定义transform属性应用于元素的2D或3D转换,这个属性可以使元素旋转,缩放,移动,倾斜等。二、属性和用法1、translate : 位移transform:translate(100px,100px); 两个值 分别对应 x轴 和 y轴。transform:translateX(100px);只针对x轴transform:translateY...

2020-03-13 23:00:21

transition过渡

transition过渡定义和用法transition用于设置四个过渡属性:1、transition-property : 规定设置过渡效果的CSS属性的名称。all ( 默认值 ) , 指定 width , height;2、transition-duration : 规定完成过渡效果需要多少秒或毫秒。需要添加单位:s (秒) ms (毫秒) 1s == 1000ms3...

2020-03-12 17:42:14

CSS Sprite

CSS SpriteCSS Sprite叫做CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。好处(1)可以减少图片的质量,网页的图片加载速度快;(2)减少图片的请求的次数,加快网页的打开;(3)解决网页设计师在图片命名上的困扰,提高了网页制作效率。如图所示:左图中9张图片对服务器的请求次数为9次,右图CSS s...

2020-03-12 09:31:08

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。