自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 定时器

在网页上我们有相关需求在我们使用定时器时,我们想要带代码去执行,需要放在一个函数中。定时器(function () {}, 延迟时间)js执行代码,优先执行同步代码,然后才执行异步代码。延迟时间单位为毫秒。1000 是 1s。

2023-03-14 21:00:00 192

原创 数组和字符串方法

在JS中内置了很多的方法,不同的对象有不同的方法(方法其实就是对象中的函数)方法名: function () {}obj.方法名()

2023-03-14 20:30:00 193

原创 作用域

什么是作用域,通俗讲,作用域内部的变量无法被外部获取。用来产生一个封闭的空间,防止外部的变量污染内部的变量。作用域中的变量名允许和外部或者其他作用域中的变量重名,不会受到任何影响。比如,一个班级有两个叫张三的,是会影响到提问问题的。但是两个张三如果分散在不同的组里,就不会影响了。

2023-03-14 20:15:00 169

原创 函数的使用

函数的作用是为了封装代码,让代码多次执行的更容易。函数中有参数和返回值。

2023-03-14 20:00:00 133

原创 事件

DOM中的事件是一个很中要的东西,它可以让用户和浏览器之间进行交互,以此来实现人机交互效果。

2023-03-14 15:58:59 61

原创 js元素常见的尺寸

我们在网页上通常要获取到元素的尺寸,可以从样式入手,用getComputedStyle获取。但是因为带的有单位,并且获取时不方便。所以我们可以使用其他操作。

2023-03-14 15:57:47 88

原创 DOM

变量名.innerText = "值" // 设置DOM对象上的内容,因为这个DOM对象和网页有关联,所以网页上对应的内容改变。document.querySelectorAll("选择器") // 得到符合条件的所有的DOM对象的集合。我们把一个网页抽象为DOM树,在DOM树上的元素我们成为DOM元素,都是有互相之间的关系。input.value = "新的value值" // 将input中的内容设置成新的值。我们css可以设置HTML的样式,我们可以用js来设置CSS,依靠js对样式的抽象的对象。

2023-03-14 15:55:22 118

原创 内置对象及方法

let 变量 = Math.floor(Math.random() * (n - m + 1) + m)我们可以通过 new Date().getTime() 获取到距离1970年1月1日0点0分0秒的毫秒数.Math.floor(Math.random() * 100 + 1) // 0 - 100 包含100。Math.floor(Math.random() * 100) // 0 - 100 不包含100。获取到的值从0开始,到11结束,0-11分别代表 1-12月.在进行月份的计算时,要+1。

2023-03-11 09:44:49 61

原创 数组和对象

arr[10] = "新的值" // 当我们强行添加一个不存在的下标时,会再本身的长度之后到对应的下标之间添加空的值。数组和字符串都有下标的概念,所谓下标就是我们对应的值的顺序,从0开始->length-1结束,下标我们一般称其为。let 变量名 = new Array(值, 值2, 值3, 值n) // [值, 值2, 值3, 值n]let 变量名 = new Array(非number类型) // 直接生成一个数组,中间有对应的值。[[值, 值2, [值, 值2]], [值, 值2, 值3]]

2023-03-11 09:44:11 389

原创 对象的本质

为什么数字字符串布尔值不是对象,却可以调用一些方法,使用一些属性呢?因为我们JS中提供很多对象。就像数组,我们可以直接通过[]声明数组,也可以通过我们的字符串数字布尔值等,他们再调用方法时,js会帮助我们。通过new Number new String new Boolean来把对应的原始值,转换为对象,然后再调用相关的属性或方法// 本质上。

2023-03-11 09:43:38 56

原创 JavaScript背景

截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。JavaScript出现的目的是为了解决网速过慢导致提交表单时,如果遇到填错的信息来回跳转影响效率,所以推出JavaScript来做表单的提交前验证。现在的JS,可以应用于网页、服务端、桌面端。

2023-03-11 09:42:22 85

原创 JavaScript流程控制语句

代码的执行方向是可以有多个的,而这些方向都是由我们人为进行控制的。因为我们要学习两类语句:条件判断语句、循环语句。

2023-03-11 09:41:54 46

原创 Sass使用

是CSS的预处理语言,它可以转换成CSS供HTML使用。市面上主流的CSS的预处理语言,有不管是哪种,语法类似,思路相通,在我们的课程中学习的Sass。

2023-03-11 09:41:49 338

原创 JavaScript基础

推荐两个编程游戏。

2023-03-11 09:41:22 121

原创 BootStrap

核心的样式是和,这两个css是一样的东西,后者是压缩后的样式。bootstrap.min.css.map可以告知我们对应的样式出现在第几行bootstrap.theme.*这些文件是bootstrap为了满足喜欢boostrap2的用户提供的主题样式。一般不用。BootStrap中内置了一个收费的字体图标Glyphicons。GlyphiconsHalflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。

2023-03-11 09:39:48 375

原创 响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个是为解决移动互联网浏览而诞生的。因为当初是移动互联发展的初期,但是现在移动互联已经发展的特别好了,然后PC端网站慢慢被削弱。因此现在大部分的产品优先移动端,PC端被削弱,然后响应式就没有以前那么火了。现在诸如小米,淘宝,京东等一些网站都是既实现了PC端,又实现了移动端,是两套代码。像少数派,就是一套代码,可以在任意的设备中进行使用。

2023-03-11 09:39:00 183

原创 字体图标原理

在CSS3中有一个@font-face属性,这个属性可以用来实现服务器字体:让所有的用户都能使用相同的字体效果。

2023-03-11 09:34:51 94

原创 CSS3中背景图的新变化

因为在移动端,我们比较多的用我们的多倍图,如果不设置尺寸,则背景图过大,没法直接完整显示在元素里。background-image: url(地址), url(地址), url(地址);不会出现空白区域,当宽度占满时,缩小高度,则裁切高度,当高度占满,缩小宽度,则裁切宽度。不压缩图片,不裁切图片,保证图片的完整性,至少保证一边百分百,另外一边留空白。设置宽高时,只设置一个,另一个等比缩放,如果都设置比例不对则变形。background-origin用来控制背景图的绘制开始的区域。

2022-09-09 09:56:47 654 1

原创 浏览器内核以及CSS3属性前缀

浏览器内核(Rendering Engine),是指浏览器最核心的部分,负责对网页语法的解释(如下的一个应用、)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器所采用的,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

2022-09-09 09:55:59 497 1

原创 移动端网站开发

rem单位 是相对于HTML字体大小的单位,把HTML字体大小作为我们网页的统一参照尺寸,当我们按照这个大小进行布局时,最终改变对应的HTML字体大小,我们的所有元素都会等比缩放。

2022-09-09 09:55:00 1392 1

原创 BFC的应用

是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域BFC 是一个,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

2022-09-09 09:51:18 128 1

原创 3D转换效果的使用

3d的坐标系长什么样子,x轴 y轴以及z轴3D场景和场景中的元素。所谓的3D场景就是3D元素的父元素。3d转化的属性,只是多了空间的3d效果,属性基本不变。想要产生3D效果,至少需要两个属性给3D场景加上去舞台 {perspective: 视距;}当我们添加了这样的属性后,舞台内的元素有3d效果,舞台没有3d效果。想要让舞台有3D效果,需要舞台的父元素再加对应的属性。注意!!!!!在网页上所有的3d属性,都会触发GPU渲染,过渡和动画效果的性能更好。

2022-09-09 08:41:05 149 2

原创 转换效果的使用

transform属性可以实现网页元素的平移、旋转、变形、缩放。包含2D空间和3D空间的转换效果。选择器 {transform: 属性值;}未来平移和放大是特别重要的,经常会使用,旋转也会使用,变形不太常使用。transform所有的属性都不会影响到布局,而且性能会比margin定位这些位置改变要更好一些。...

2022-08-26 10:43:43 223 1

原创 动画效果的使用

和过渡不同,动画是需要定义规则的,并且可以有多个关键帧,而且动画可以实现自动播放,多次播放的效果。选择器 {animation: 动画规则名 动画时长 动画曲线 动画延迟时间 动画次数 动画方向 动画填充模式 动画的状态;}想要实现一个动画,我们必须先创建动画的规则@keyframs 自定义名字 {}在规则中,有对应的写法@keyframs 自定义名字 {0% {}n% {}100% {}}n代表的是数字,可以有很多个。在百分比后面的大括号中,我们需要写对应的样式。...

2022-08-26 10:43:08 580 1

原创 过渡效果的使用

当一个元素从一个样式(关键帧)到另外一个样式(关键帧)变化时,我们可以使用过渡效果。纯CSS中,通常我们可以使用hover来作为样式变化的操作。元素的样式能发生变化我们才有机会添加对应的过渡属性,过渡属性要加给元素全程生效的样式上。选择器 {transition: 要过渡的属性名 过渡时间 过渡曲线 过渡延迟时间;}一个过渡效果的产生必定需要两个值:要过渡的属性名 过渡时间。...

2022-08-26 10:42:30 247 1

原创 CSS3中的属性介绍

定义一个值是普通圆角,两个值是椭圆圆角。

2022-08-26 10:41:10 123 1

原创 弹性盒子的使用

这个是CSS3中新增的一种布局的方案,用来代替传统的布局方案的。弹性盒子可以更标准的进行网页的布局。布局中无非就是横平竖直我们称我们设置了弹性盒子属性的元素为容器。如何才能把一个元素变成弹性盒子 ?选择器 { display: flex;}只要我们添加了该属性,那么这个元素就是一个弹性盒子,弹性盒子是在块元素和行内元素之外的一种新的元素形式。可以设置宽高,并且没有任何的之前我们会出现的问题。主副轴在容器中,会有两类轴,主轴和副轴。主轴默认为横轴(横着的线),副轴默认为纵轴(竖着的线)主副轴可以进

2022-08-26 10:38:21 902 1

原创 盒模型概念

如果右多个元素浮动,那么我们就是多个元素的左margin + 左padding + 左border + 总宽度 + 右padding + 右border + 右margin = 总的占据空。当我们进行布局时,整个一行所占的空间由左margin + 左border + 左padding + width + 右padding + 右border + 右margin 分配。IE5/6盒模型:设置宽高设置的是border-box区域,如果添加了boder和padding则会像内压缩content-box区域。...

2022-08-26 10:37:11 135 1

原创 背景图的使用

背景图是一个装饰,作为替代背景色的一种装饰,一般我们把图标用背景图展示背景图使用background或者background-image进行定义因为一般情况下CSS是单独存放在CSS文件夹中的,所以默认情况下 如果背景图比较大,元素小,则会裁切图片。如果背景图小,元素大,则会重复图片重复剪切使用属性background-repeat可以控制图片是否重复...

2022-08-26 10:36:42 426 2

原创 选择器优先级

在我们进行布局的过程中,选择器的层级越来越多,经常会导致我们写的样式,不生效。就是在f12工具里选中后,样式有,但是被划了横线。

2022-08-26 10:35:48 4250 1

原创 伪类的使用

在我们进行相关的操作时,例如:鼠标移入,鼠标按下,获取焦点,禁用,选中,链接访问后,等,都代表着同一个元素的不同状态。选择器:伪类状态 {}选择器:hover { }选择器:active { }选择器:focus { }...

2022-08-26 10:35:02 380 1

原创 字体图标的使用

字体图标的使用

2022-08-19 16:02:57 135 1

原创 定位属性的使用

定位属性的使用

2022-08-19 16:01:33 224 1

原创 浮动的使用

浮动的使用

2022-08-19 15:59:53 544 1

原创 前端项目的基本结构

前端项目的基本结构

2022-08-19 15:57:07 719 1

原创 CSS样式-盒模型样式2

CSS样式-盒模型样式2

2022-08-19 15:56:31 126 1

原创 蓝湖的使用

蓝湖的使用

2022-08-19 15:55:24 12634 1

原创 CSS样式-盒模型样式

CSS样式-盒模型样式

2022-08-19 15:51:45 127 1

原创 CSS样式

CSS样式

2022-08-19 15:50:56 1797 1

原创 CSS选择器

CSS选择器

2022-08-19 15:49:56 99 1

HTML背景及网页的新建操作

新手学习html,零基础学习web。没读过书的都能看得懂,手把手教你,重电脑快捷键教你

2022-08-13

空空如也

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

TA关注的人

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