自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 收藏
  • 关注

原创 iPhoneX 安全区域 safe-area-inset-*样式不生效

iPhoneX 安全区域 safe-area-inset-*样式不生效

2022-03-21 15:27:02 3842

原创 js之dom的整理

对于初学者来说呢,我们学习dom呢都要从选择器入手,因为只有先学会怎么取到元素,才能对后面的dom事件进行操作。接下来就是为各位初学的小伙伴整理的dom选择器,dom事件,和一些内置的API写的不是很全。dom的选择器 document.getElementById() document.getElementsByClassName() document....

2019-12-24 20:54:25 172

原创 js之dom的无缝轮播

在之前啊写过一篇简单的轮播的,但是在真正是业务处理中是不能用;这期博主又写了一个可以在处理业务中轮播图的,接下来让我们一起去看看吧!css样式* { margin: 0; padding: 0; } div { width: 500px; margin: 0 auto; } #view { ...

2019-12-24 19:49:15 221

原创 js关于this的《一》

JS this指向this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象示例1function a(){ var user = "Hello world"; console.log(this.user); //undefined console.log(this); //Window}...

2019-12-14 14:22:30 122

原创 js实现轮播图效果的案例

上期我们讲了如何用原生js去搭建html的框架,也跟大家说了后期是要做轮播图的案例的,那么,这期我们起看看,如何实现轮播图的。注意:轮播图写的很low,还请各位大神不喜勿喷。 好了废话不多说了,下面让我们一起去探讨一下吧。上期我已经把源码公布了一部分了,这期让我们来看看js部分的源码。//首先我们先获取每一个标签,var span = document.getElementsByTagNa...

2019-12-14 14:12:11 325

原创 js学习—常用的内置对象(API)

js学习—常用的内置对象(API)日期Date:getFullYear() 返回完整的4位的年份 如:2016getMonth() 返回月份,从0开始getDate() 返回当前月的第几天,当月的几号getHours() 返回0-23的小时数字getMinutes() 返回0-59的分钟数字getSeconds() 返回0-59的秒数字getTime() 返回毫秒数getMil...

2019-12-12 22:42:57 126

原创 JavaScript 到底是面向对象还是基于对象

JavaScript 到底是面向对象还是基于对象与其它的语言相比,JavaScript 中的“对象”总是显得不是那么合群。一些新人在学习 JavaScript 面向对象时,往往也会有疑惑:为什么 JavaScript(直到 ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢?为什么在 JavaScript 对象里可以自由添加属性,而其他的语言却不能呢?甚至一些争论中,有人强调,Ja...

2019-12-12 22:40:15 157

原创 如何使用原生js搭建html

在面试的时候,有可能会让用原生js去处理html搭建啊…等一些简单的业务处理,今天我就小小根据一段js代码来搭建了一个html的框架,下面就一起来学习一下吧!css的代码 html,body{ margin: 10% 10%; } .wraper { width: 500px; height: 300px; positio...

2019-12-12 22:29:59 1175

原创 js快速学习思维导图

Js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条“轻松学习Js之路”。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂(真的难懂),如:闭包、内置对象、DOM。B:本身内容很多,如函数库、对象库就一大堆。 (内容五花八门 )C:混合多种编程思想。它里面不但牵涉面向过程...

2019-12-10 23:19:19 431

原创 js的运算符二

1:运算符是指完成操作的一系列符号,也称为操作符。 符号分类:算数运算符 比较 逻辑 赋值 连接2:大运算符用于将一个或多个值进行运算井返回结果。3:使用运算符的值称为操作数。4:运算符和操作数的组合称为表达式。注意:范式表达式一定有返回结果自增<script> // 每行代码 赋值 只会赋值一次 // ++ 表示自增 每次增加...

2019-11-30 14:05:17 68

原创 js函数的定义

函数可以反复执行的代码片段函数分类有名函数和无名函数函数的编程:基本函数—>构造函数---->工厂函数----->函数柯理化---->设计模式函数的定义:function函数名字:fun参数:形参,实参形参:a b无上限作用:接受实参 一一对应的接收;供给给方法体使用实参:函数执行时参数函数执行 函数名() ()---->叫执行符函数可以执行无...

2019-11-30 14:03:12 88

原创 js的预编译

1:语言分析将js所有需要执行的代码全面检测一遍,目的是排除低级的语法错误检测到错误后一个一个的抛出错误;而不是一下子全部抛出2:预编译 函数声明提升,变量提升代码执行之前发生的、2.1 创建一个AO对象,2.2将函数体中所有声明的变量和形参提升到,作用域最顶端 并且赋值为undefined2.将实参与形参相统一2.4在函数体中找函数声明 ,赋值为函数本体2.5若函数名...

2019-11-30 14:00:15 77

原创 js的运算符的优先级

上期我们总结了,js的运算符,但是在运算符的使用的过程中会出现优先级的。所以我这期专门提了一下js运算符的优先级。运算符的优先级小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符 1:从左往右计算 () 里面最优先就可以运算的 2:全体单目排第二 ++ -- ! 【只有一个操作数和操作符】 3:乘法除法取余排第三;加减排第四 4:移位(&l...

2019-11-22 19:41:06 214

原创 js的运算符

js运算符入门运算符是指完成操作的一系列符号,也称为操作符。运算符用于将一个或多个值进行运算并**[返回结果]**。使用运算符的值称为操作数。运算符和操作数**(js数据)的组合称为[表达式]**。注意:凡是表达式一定有有返回[结果].运算符的分类算数运算符+、-、*、/、%、++、- - 比较运算符>、<、>=、<= 、==、===、!...

2019-11-22 19:32:03 162

原创 js的变量

变量var student='123'/*var是关键字 *var的作用是:声明变量student是变量名字//= 是赋值符号‘123’是数据————>数据代表页面中所有的信息。变量的作用:存储数据;可以存储任何的数据类型变量的使用读取数据。变量名一经声明就不可以改变,但是值可以改变。变量赋值1:找到需要重新赋值的变量名2:不要加var 直接变量名=新数据3...

2019-11-22 19:07:58 134

原创 Js数据类型

Js将变量中所存储的数据进行分类————>Js数据类型js数据类型一般分为两种,一种是:基本数据类型;另一种是引用数据类型。我们先简单的来了解一下。基本数据类型string(字符串)Numbar(数值型)Boolean(布尔类型)undefined(未定义)null(空)引用数据类型数组 [ ]对象 { }函数 funcion下面让我们先了解一下它们的基本...

2019-11-20 21:47:26 81

原创 使用伪类before和attr(class)配合使用,实现图标样式。

我们可以使用伪类beform和content中的attr(class)属性来完成,图标样式的实现。接下来让我们一起来看看的怎么实现的。我们先打个结构,写个div给class类名link2,在里面写几个a标签。<div class="link2"> <a href="#"></a> <a href="#"></a> ...

2019-11-16 10:00:34 1074

原创 οncοntextmenu的属性

οncοntextmenu的属性禁止鼠标右键:οncοntextmenu=“return false”;禁止选择:onselectstart=“return false”;禁止拖放:οndragstart=“return false”;禁止拷贝:οncοpy=document.selection.empty() 。禁止复制:oncopy = “return false”;禁止保存:,放...

2019-11-15 09:34:44 1947

原创 定位position

定位(position)staticstatic 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。relative(相对定位)相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom...

2019-11-11 20:38:49 145

原创 HTML的分类(二)

上期我们说了 HTML标签分类有两种,讲述了根据HTML的特点进行的分类,例如:块元素、行元素、行内块元素…这期我们进行HTML用途进行分类。HTML的用途分类可以分为根元素标签、文本标签、图像标签、视频音频标签、表格标签、表单标签、列表标签、布局标签…根元素标签:id属性: 以ID形式选取元素class属性:以class形式选取元素title属性:鼠标悬停的时候显示的描述文字st...

2019-11-11 14:50:25 216

原创 HTML的分类

HTML元素作用是构建页面的,而HTML是超文本链接;HTML标签 大多数是以标签对的形式出现而我们可以根据HTML的标签进行分类,一种是根据HTML的特点进行分类;另一种是根据它的用途进行分类html特点分类根据其特点分为三类:1.块元素(block)标签代表:body、main、div、nav、footer、header、p、ul、ol、li、dl、dd、dt、dt、aside、ta...

2019-11-11 14:04:48 1309 1

原创 盒子模型

盒模型原理:对所有盒子在浏览器中所占据的【空间】进行计算盒子:只要在浏览器中所【占据位置】的html元素 都是我们计算的盒子——>inline inline-block block盒模型是作用什么计算盒子在浏览器中占据的位置:width height padding border-width margin盒子分类:边框盒子(IE)和内容盒子(谷歌)边框盒子在浏览器占据空间 = ...

2019-11-11 11:03:31 88

原创 Flex布局

一、什么是Flexbox?Flexbox,又叫弹性盒子布局。简单来说,它是一种CSS快速布局方式,相比于传统文档流布局方式,具有简洁、高效和响应式等优点。二、为什么要使用Flexbox?1、超简洁语法就说元素水平垂直居中布局这个经典难题吧! 这个问题其实在我之前的纯CSS七大居中方法这篇文章中已经总结过,其中最后两个方法就是用的Flexbox,尤其是最后一个,就两句代码,相比于传统布局,简...

2019-11-09 17:48:46 544

原创 css线性渐变

CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。首先看看今天的主角: linear-gradient()。它,实际上不是颜色,而是背景图片。也就是说,它并不是color的属性值,而是background的属性值。我们接下来看看linear-gradient()的具体用法。语法:<linear-gradient> = line...

2019-11-09 17:15:27 503

原创 HTML中的常用单位

单位分为绝对单位和相对单位绝对单位 是固定值 不可变绝对单位有: px、 cm、 mm、inpx:是像素单位 也是常用单位cm:厘米mm:毫米in:英寸 ;(1英寸 = 2.54厘米)相对单位 可实现响应式布局,会随着屏幕尺寸变大或缩小(都是子元素相对父元素进行的)相对单位:%、rem、vw、vh、em、vnim、vaxm、clac()%:百分比在HTML中经常使用rem:相...

2019-11-09 17:04:03 2096

转载 CSS基础篇

Web相关概念:1、W3C制定的结构和表现的标准W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。(制定了结构和表现的标准,非赢利性的。)2、WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些...

2019-10-24 21:03:01 75

转载 web大前端布局

web大前端布局web大前端布局常用的布局常用的布局一般分为一下几大类:文档布局(text)文档流本质是 nomal flow (普通流、常规流)元素在文档中的特点 块级元素,和内联元素。块级元素:是自带有这行效果,在文档中独占一行的效果,块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。内联元素:内联元素在文档流中只占自身的大小,会默认从左向右排列,如果...

2019-10-24 20:55:18 201 1

原创 Flex 布局:语法篇

Flex 布局:语法篇语法display:flexFlex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{display: flex;}行内元素也可以使用 Flex 布局。.box{display: inline-flex;}Webkit 内核的浏览器,必...

2019-10-23 20:09:25 223

原创 css中box-shadow盒子阴影

box-shadow盒子阴影语法外阴影:box-shadow: X轴 Y轴 Rpx color;属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色内阴影:box-shadow: X轴 Y轴 Rpx color inset;默认是外阴影 内阴影:inset 可以设置成内部阴注意...

2019-10-23 19:53:04 326

原创 前端html页面中的命名规范

项目中文件名字1:符合应用场景2:一律使用小写英文字母,统一要求;英文,禁止中文拼音。5:命名原则:使团队成员可以看懂自己代码;自己也方便查找并修改xxx.html文件的命名1:主页面 index.html2: 子页面:首页:homme.html 我的 mine.html 关于我们:aboutus.html 信息反馈 feedback产品 product 购物 sh...

2019-10-23 19:14:31 8726 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除