- 博客(46)
- 收藏
- 关注
RSS订阅原创 评论列表案例
此案例想要的就是我们在输入框中输入文本，可以显示或者可以删除评论。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vueApp</title> <s
2021-07-26 22:10:48
153
原创 vue.js
【一】Class属性绑定：1:对象语法我们可以传给v-bind:class 一个对象，以动态地切换class。比如如果这里isShow的值为true 则会被渲染成class='active' ,结果也会渲染变红；如果为false ,结果将不会被渲染。（如下所示）2：数组语法我们可以把一个数组传给v-bind:class，以应用一个class列表。<!DOCTYPE html><html lang="en"><head>...
2021-07-22 19:42:27
92
原创 Vue.js
【一】事件修饰符1：知识点2：结果：因黄色块在红色块内，当点击黄色块时就相当时点击了红色块，为避免这样的触发，可使用.stop来阻止事件冒泡。3：结果：当点击一次按钮时，就会一直触发增加，而我们需要的就是点击一次触发一次，就可以使用.once来进行触发。4：按键修饰符结果：在搜索框中搜入东西时，每当按键抬起时，就会触发，为防止这样，我们使用按键修饰符.enter来进行改进，当按回车才会触发。5：<!DOCTYPE html&...
2021-07-21 10:50:30
93
原创 vue实例
《一》Vue.js是：Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。《二》创建一个 Vue 实例每个Vue应用都是通过vue函数创建一个新的vue实例开始的。一个 Vue 应用由一个通过new Vue创建的根...
2021-07-20 14:14:12
656
1
原创 Vue基础
一：模板语法《1 插值：a ：文本 {{}}； b:纯Html《2指令此处为创建的的状态。当我们在编辑器中所写var vm =new Vue（{}）时，就可以在浏览器的控制页面进行操作等。《3 class与style绑定clss绑定：有三种绑定的方法：三目写法，对象写法，数组写法。style绑定：同样有三种绑定方法：三目写法，对象写法，数组写法。style绑定 <div :style="'background:'+(isActiv...
2020-10-25 18:39:00
112
原创 Vue-cli的使用
一：Vue-cli的简介与使用 (脚手架工具)需要安装脚手架工具，使用npm命令，去vue官网有教程。build目录下放置的是项目的webpack配置文件，可以不动 config是针对线上环境和开发环境的配置文件，也可以不动 node_modules 指的是项目的依赖 src 指的是源代码放置的目录二：使用vue-cli开发Todolist1：利用Vue-cli时，数据data的定义不是对象，而是一个函数形式，返回值为对象。 data : function() ...
2020-10-13 23:13:19
88
原创 vue入门
一：挂载点，模板，实例之间的关系挂载点：vue只会去处理挂载点上的数据模板：挂载点内部的内容即为模板内容，可以将模板放在vue实例里的template来编写实例：指定挂载点和模板就行二：Vue实例中的数据，事件和方法{{ }}差值表达式 v-text里的值是一个变量，他要显示的的值是变量的值（会发生转义）v-html:不会转义，如：<h1>123</h1> v-html会显示123，v-text会显示<h1>123</h1>绑.
2020-10-04 22:24:16
118
原创 花瓣网项目
今天所说的就是js中我所学的项目：一个花瓣网网页，将所学的js知识都运用在里面，、如上就是所做的效果图，它总共就这些板块来搭建此页面，将其样式都一笔带过。...
2020-09-25 21:22:36
874
原创 client家族
《1 client家族：clientWidth和clientHeight：1 网页可见区域：document.body.clientWidth; document.body.clientHeight.clientLeft和clientTop: 返回的元素边框的borderWidth。；；如果不指定一个边框或者不定位该元素，其值就为0.2 offset ，client ， scroll的区别分析：<!DOCTYPE html><html lang="en"&...
2020-09-04 18:58:15
294
原创 缓动动画
《 1 封装缓动动画函数：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} #box{ width: 100px; height: ..
2020-09-04 18:54:04
146
原创 scroll家族
1：概念网页正文文宽：document.body.scrollWidth.网页正文全高：document.body.scrollHeight.网页被卷去的高： document.body.scrollTop.网页被卷去的左：'document.body.scrollLeft.一般在开发中使用最多的是scrollTop.补充：严格模式和怪异模式使用：document.compatMode.值为BackCompat，则是怪异模式；值为Css1Compat，则为严格模式。.
2020-09-02 16:38:13
81
原创 JS三大家族
js中有三大家族，分别是offSet家族、scroll家族、client家族。一：offset家族：自己的，用于获取元素尺寸。《1 offseWidth和offsetHeight：获取对象自身的宽度和高度，包括内容，边框，边距和内边距。即：offsetWidth=width+border+padding；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">.
2020-09-02 16:37:01
948
原创 JS事件对象
事件对象----event=ev。常用的属性：1 screenX和screenY是以屏幕为基准进行测量；当前元素距离屏幕的尺寸。2 clientX和clientY是以当前文档（绝对定位）为基准，不合适用于IE6-8.3 pageX和pageY是以当前可视区域为基准，类似于固定定位。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.
2020-09-02 16:36:39
138
原创 JS特效---定时器的操作
了解定时器：1需求：js的程序的执行速度非常快，如果希望一段程序，可以每个一段时间执行一次，就可以使用定时器来调用。2 使用：循环执行：如上图中代码就是循环执行，后面的2000是秒数，随意更换。案例：《1定时器鲜花表白：设置倒计时与鲜花如下。然后就要设置定时器，然后再清除定时器（claerInterval）。<!DOCTYPE html><html lang="en"><head> <meta cha
2020-08-27 22:45:56
155
原创 js特效----实例
一：百度换肤如图就是需要将上边的小图换成下边大图。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0;list-style: none;vertical-align: top} b
2020-08-26 22:14:13
439
原创 js特效------实例
《1 js特效---图标切换我们要建这样的页面效果，就是在几张照片中切换不停，我们所需要用js来搭建切换效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 2000px; .
2020-08-25 21:49:39
780
原创 JS特效
一：DOM《1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。《2 DOM又称文档树模型。《3 DOM 常用操作：获取文档元素；对文档元素经行增删改查操作；事件操作。《4 window和document两者，document可以帮助我们拿到页面里面任何东西，比如它的常用属性： console.log(document===window.document); console.log(document); // console.log(doc...
2020-08-24 21:24:17
326
原创 内置对象
内置对象js中提供多个内置对象：String、Math、Array、Date。《1》Array：1 检测一个对象是否是数组： // <1检测一个对象是否是数组// instanceof var arr=['张三','李四']; console.log(arr instanceof Array);//true console.log(arr instanceof Object);//true console.log(arr instance
2020-08-24 13:45:50
122
原创 对象
对象 （object）《1》 为什么要用对象？函数的参数如果特别多，可以使用参数简化。《2》 js中对象的分类：1 内建对象；2 宿主对象：B0M对象，DoM对象；3 自定义对象：我们自己创建的对象。《3》常见创建对象方式：1 对象字面量，2 new object()创建新对象，3 工厂函数创建对象，4 自定义构造函数《更多都使用》。// 2 对象字面量 var x1={ //属性 name:'小撩', age:
2020-07-25 22:27:18
92
原创 函数
函数定义：函数也是一个对象；函数就是可以重复执行的代码块；函数就是完成特定功能的一段代码。《1》 用函数求1~100之间的和： function getSum(count) { var sum=0; for (var i=1; i<count;i++){ sum+=i; } console.log(sum); } getSum(100);《2.1》函数声明方式： // 3.1
2020-07-25 22:12:46
107
原创 数组
j中不可缺少的数组（Array），《1》数组就是数据类型，数据变量可以存放多个数据，好比一个军队·军队里有很多人。《2》数组是什么？1数组就是一种引用数据类型，属于对象。2数组的存储性能比普通对象更好，在开发中我们经常使用数组来存储一些数据。《3》创建数组方式：1使用Array构造函数：1使用Array构建函数 var arr1=new Array();// 空数组 console.log(arr1); var arr2=new Array.
2020-07-13 15:51:27
131
原创 JS——流程控制
《一》代码块：我们的程序是由一条一条的语句构成；语句是按照自上向下的顺序一条一条执行的； { var str = '撩课学院'; console.log("itlike.com"); document.write("喜欢IT，就上撩课"); } console.log("str=" + str);在JS中可以使用 {} 来为语句进行分组；同一个 {} 中的语句我们称是一组语句；它们要么都执行，要么都不执行；一个 {} 中的语
2020-07-13 15:50:50
95
原创 JS中数据类型的转化
小技巧：谷歌浏览器快速的查看数据类型，字符串颜色是黑色、数值类型颜色是蓝色、布尔类型也是蓝色、undefined和null是灰色的。《1》 转换字符串的类型：1：toString 1它的常规使用 var num1=123; var res1=num1;toString(); console.log(res1);// 123 console.log(typeof res1);//string var num2=false; var res2=nu..
2020-07-09 14:42:00
105
原创 JS基础运算符
运算符也叫操作符；一 加法运算符：1 格式：Number1+Number2 var res=1+1; console.log(res); var num1=10; var num2=20; var res2=num1+num2; console.log(res2);2 非Number类型的值进行运算时，会将这些值转化为Number然后再计算 var res=true+100 console.log(res); var .
2020-07-08 16:03:33
259
原创 JavaScript认知
1 JS是一门编程语言，属于高级语言；也是一门高级解释型语言。一：JS基础语法《1》字变量、变量、常量《2》数据类型：数据类型的划分：如下1简单数据类型有：Number、String、Boolean、Null和Undefined.2引用（复杂）数据类型：Object.先说Number： 第一在js中所有的数值都是Number类型（整数和小数）第二是由于内存限制，ECMASscript并不能保存世界所以东西第三 NaN非法数字下来说 Strin...
2020-07-08 16:01:41
141
原创 flex布局的小案例
今天所说就是利用flex布局做一个小案例。上边两张效果图，就是使用伸缩布局做成，只能是静态页面，它是可以随意拉伸，并且还不会让里面东西溢出来。再看下所写的代码，分了三个部分，再给其三部分的样式，就成效果图的了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>
2020-05-26 20:43:46
471
原创 常用css3属性
所说的就是transform属性,此属性应用2D或3D转换。接下来我们看看如何转换？1: 2D-变形-移动: transform：translateX（）如图：图片是可移动的，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div...
2020-05-21 21:57:49
114
原创 css常用布局
一：圣杯布局与双飞翼布局两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适的三栏布局两者遵循特点：1 两侧宽度固定，中间宽度自适应；2 中间部分在DOM结构上优先，以便先行渲染；3 允许三列的任意一列称为最高列；4 只需使用一个额外的<div>标签。二：圣杯布局：...
2020-05-19 19:32:21
120
原创 伸缩布局（Flex布局）
Flex布局：常用的属性:1：flex-direction: 控制主轴方向; 取值有：row（默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴）,row-reverse（与row相反）,column（表示垂直方向从上到下排列，此时垂直方向轴线为主轴）,column-reverse（与column相反）。2：justify-content:主轴子项的对齐方式； 取值有： flex-start（起始对齐）, flex-end（结束对齐）, center（居中对齐）, spac...
2020-05-17 22:32:20
160
原创 登录页面代码段
登录页面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>撩课-喜欢IT,就上撩课(itlike.com)</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="sty.
2020-05-14 16:06:38
386
原创 注册登录页面的呈现
说道登录 注册页面，大家都熟悉不过了，几乎每个使用的APP都会有的页面。而我也觉得这种页面很简单制作 ，于是就尝试的去做了。而我呈现的登录 注册页面就是下图： 一图是登录，二图是注册，其实两图的样式都很相似。所以只要做一个页面就可以。我们再看： 这是整个页面的头部，我们对头部的两个a标签进行样式处理。 接下来就是中间内容，我把它分成三个部分来做，各色箭头就代表了...
2020-05-14 16:01:40
505
原创 表单表格的小练习与rem的使用
一:remd的使用1:rem(font size of the element)是指相对于根元素的字体大小单位。一旦根节点 html定义的fine-size变化，那么整个网页用到rem的也会随之变化。 2:看上图用相同颜色的箭头和线段标记的.两个box调整它的大小位置，就用根节点html来定义的;我用的是1rem=10px,这样是为了好计算。3:黄色的箭头与线段就是对文本大小的改变。...
2020-05-10 22:38:32
168
原创 HTML-CSS 百度页面的搭建
今天所讲的的百度的页面搭建。可分为三部分来分析:【1】首先介绍头部的搭建：头部分为左边与右边，头左边主要有照片和文字搭建而成，也使用左浮，文字就简单使用margin-left来完成。头右边的样式都差不多，但右边的菜单框中【更多产品】样式繁多 更多产品就采用块级标签转成行内...
2020-03-01 22:11:16
866
原创 CSS中常见的属性
第一阶段的：<1> visibility 属性规定元素是否可见 ——visible(元素可见) ， hidden（元素不可见）<2> cursor 规定光标的类型——pointer(规定光标为一只手) ， move ，help.....<3> font属性的四种分类——font-fanily(默认字体，优先由第一个依次到第二个），font-siz...
2020-02-21 21:08:40
115
原创 HTML-CSS的相关内容
用河马牙医网页的制作来介绍下相关内容：河马牙医可以分为三个部分：（1）了解下它 的中间内容。中间有六个板块，就将其六个板块图片的大小垂直对齐，让它们的宽度都保持100%， body section{ margin:0;} section img{width:100%vertical-align:top}此代码就是把中间内容板块连接起来这个为效果图，可...
2020-02-19 22:55:26
85
原创 html+css 浮动标签
一：浮动浮动有两种方式：1]display:inline{这个知道就行} 2]就是 float {这就是css中最常用的浮动方式}二：CSS浮动1】float是CSS样式中的定位属性，用于设置标签的居左和居右浮动，2】浮动值:left{向左浮动} right：{向右浮动}例：&...
2020-02-15 21:23:12
4304
原创 css模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ background-color: skyblue; ...
2020-01-15 20:21:19
73
原创 HTML+CSS中标签的划分
**标签的划分:** 1块级元素：特点：自己独占一行，能随时设置高度和宽度。 常见块元素：**ul,li,form,hr,p,div** 2行内标签：特点：不会自己独占一行，就像一个单词，一直向后排序，但宽度高度等无法改变。 常见内联元素：**a,big,br,span,img,em**...
2020-01-13 21:17:14
146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人