- 博客(42)
- 收藏
- 关注
RSS订阅原创 Vue报错解决方案(1)[Vue warn]: Property or method “id“ is not defined on the instance but referenced
问题记录：在修改信息时，将获取的信息重新填充到表单，控制台能输出所获取的信息，但无法将信息添加到表单上报错：vue.js:597 [Vue warn]: Property or method “id” is not defined on the instance but referenced during解决办法：Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，即需要声明即使是一个空值。 data: { flag:
2020-09-08 21:01:20
6181
原创 ES6中的类和对象
1. 对象再JavaScript中，对象是一组无序相关属性和方法的集合，所有事物都是对象，例如，字符串、数值、数组、函数等。对象是由属性和方法组成的：属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）2. 类在ES6中新增了类的概念，可以使用class关键字声明一个类，之后这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类对象特指某一个，通过类实例化一个具体的对象。3. 面向对象的思维特点：抽取（抽象）对象共用的属性
2020-08-03 22:05:07
225
原创 面向对象编程、面向过程编程
1. 面向过程编程 POP(Process-oriented programming)面向过程 就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。把大象装进冰箱，面向过程的做法：打开冰箱门把大象装进去关上冰箱门即面向过程就是按照我们分析好的步骤，按步骤解决问题。优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单机片就采用的面向过程编程。缺点：没有面向对象易维护、易复用、易扩展。2. 面向对象编程 OOP(Objec
2020-08-02 12:10:51
299
原创 溢出的文字如何省略号显示
溢出的文字用省略号显示： <style> div { width: 150px; height: 25px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body> <div> 前不见古人后不见来者念天地之悠悠独怆然而涕下.
2020-07-28 22:05:52
134
原创 vertical-align(文字与图片、表单垂直对齐，清除图片底侧空白间隙)
1. vertical-align 垂直对齐vertical-align设置或检索对象内容垂直对齐的方式。垂直对齐:vertical-align：baseline | middle | top | bottom 选择器 { /* 默认的是基线对齐 */ vertical-align: baseline; /* 图片的中线 与 文字的中线对齐 垂直对齐 */ vertical-align: middle; /* 让图片的顶线 与 文字的顶线对齐 */ vertic
2020-07-27 22:12:42
390
原创 鼠标样式cursor、取消轮廓线、防止拖拽文本域
鼠标样式：设置或检索在对象上移动的鼠标指针采用何种系统定义的光标形状。属性含义default小白 默认pointer小手move移动text文本not-allowed禁止取消轮廓线：outline: none;防止拖拽文本域：resize: none;...
2020-07-27 20:21:27
429
原创 CSS电影海报特效（当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮）
当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { position: relative; width: 212px; height: 120px; margin: 100px a
2020-07-27 19:02:10
746
2
原创 CSS将元素隐藏/显示
1. display隐藏/显示display设置或检索对象是否显示及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素之外，同时还有显示元素的意思特点：隐藏之后，不再保留原来的位置2. visibility可见性visibility设置或检索是否显示对象 visibility: visible; 对象可视 visibility： hidden; 对象隐藏特点：隐藏之后，继续保留原有位置。3. overflo
2020-07-27 12:06:15
194
原创 改变display属性（CSS）
可以改变显示模式有以下方式：可以用inline-block转换为行内块可以用浮动float默认转换为行内块（并不完全一样，因为浮动的元素是脱离标准流的）绝对定位、固定定位也和浮动类似，默认转换为行内块。注意：所以一个行内盒子，如果加了浮动、绝对定位、固定定位，不用主动添加display属性去转换了，就可以给这个盒子直接设置宽高。并且，浮动、绝对定位、固定定位的元素都不会触发外边距合并的问题。...
2020-07-26 10:41:50
783
原创 堆叠顺序（z-index）
在使用定位布局时，可能出现盒子重叠的情况，如下图所示：通过定位盒子实现的，默认后来者居上，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆砌顺序。z-index的语法如下： 1. 属性值： 正整数、负整数、0，数值越大，盒子越靠上； 2. 如果属性值相同，则按照书写顺序，后来者居上。 3. 属性值无单位。注意：z-index只能应用于相对定位、绝对定位、和固定定位的元素，其他标准流、浮动和静态定位无效。例如，原来的粉色盒子调到最上边来：代码如下：
2020-07-26 00:06:25
633
原创 绝对定位的盒子如何水平/垂直居中显示
绝对定位的盒子水平居中绝对定位/固定定位的盒子，是不能通过设置margin：auto；来实现水平居中的。在使用绝对定位时实现水平居中，可以使用如下图所示的方法：left：50%；：先让盒子左侧移动到父级元素的水平中心位置；margin-left：-100px;:再让盒子向左移动自身宽度的一半。绝对定位的盒子垂直居中top: 50%;：先让盒子上侧移动到父级元素的垂直中心位置margin-top: -50px;：再让盒子向上移动自身高度的一半...
2020-07-25 22:40:51
402
原创 清除浮动
1. 为什么要清除浮动因为父级盒子很多情况下是不方便给高度的，但是子盒子浮动就不占有位置，浮动的盒子就不会撑开父级盒子，最后父级盒子高度就为0，因此就会影响下面的标准流盒子。2. 清除浮动的本质清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面标准流的盒子了。3. 清除浮动的方法1） 额外标签法 是W3C推荐的做法，通过在浮动元素末尾添加一个空的标签。例如：<div style="clear: b
2020-07-25 00:04:53
171
原创 CSS 布局的三种机制
一. CSS布局的三种机制CSS提供了3中机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流）◾ 块级元素独占一行，从上向下顺序排列（比如：div、p、h1~h6、ul、ol、from、table）；◾ 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行（比如：如：span、a、i、em等）。浮动◾ 概念：元素的浮动是指设置了浮动属性的元素会浮起来，脱离标准流的控制，移动到指定位置。◾ 作用：可以让多个盒子水平排列成一行，使得浮动
2020-07-23 22:31:34
307
原创 圆角边框、盒子阴影
1. 圆角边框（CSS3）语法border-radius:length;/* 其中每一个值可以为数值，也可以是百分比*/要让一个正方形变成圆：border-raduis:50%;矩形圆角边框， 这个就不能用百分比了，因为百分比表示高度和宽度的一半。而矩形圆角边框只需设置高度的一半即可。上图矩形圆角边框代码如下： <style type="text/css"> input { width: 200px; height: 20px; border
2020-07-23 19:23:29
122
原创 新闻列表综合案列
要点：盒子box有宽度，padding值会撑开盒子,为保证盒子实际大小不变，宽就要改变宽高，即减去padding值去掉列表的默认样式：list-style: none;去掉a的默认下划线：text-decoration: none;一般情况下li 没有宽度 所有padding不会撑开盒子块级盒子水平居中：margin：0 auto；单行文本垂直居中：行高等于高；背景图片移动位置：background-position： 5px center;(水平：5px 垂直：居中)；鼠标移动到 li.
2020-07-22 22:07:50
192
原创 块级盒子水平居中
让块级盒子居中必须：盒子必须指定了宽度(width)左右外边距设置为auto示例代码如下：.div { width:300px; margin: 0 auto;}插入图片和背景图片的区别：插入图片是我们用到的最多的，比如商品展示类，它移动的位置只能靠盒子模型的padding、margin值来改变。背景图片我们一般用于小图标或者大背景图片，它只能通过 background-position属性来改变。 <style type="text/css"> .pic{
2020-07-21 22:17:42
314
原创 盒子模型
1. 盒子模型标准的盒子模型：盒子模型有元素的内容、边框（border）、内边距（padding）以及外边距（margin）组成。盒子里面的文字和图片等元素是内容区域盒子的厚度称为盒子的边框盒子内容与边框的距离称为内边距盒子与盒子之间的距离称为外边距2. 盒子边框语法border: border-width || border-style || border-color属性作用border-width定义边框粗细，单位是pxborder-style
2020-07-20 21:33:26
217
原创 CSS三大特性（层叠性、继承性、优先级）
1. CSS层叠性概念所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候有一个属性就会将另一个属性层叠掉。原则样式冲突遵循的原则是就近原则。将执行离结构最近的样式。样式不冲突，就不会层叠。2. 继承性概念子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。即子承父业。注意：恰当地使用继承可以简化代码，降低CSS 样式的复杂性。子元素可以继承父
2020-07-19 21:39:25
393
原创 标签显示模式
1. 标签显示模式什么是标签显示模式？ 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个。作用网页的标签非常多，在不同地方使用不同类型的标签，可以更好的完成我们的网页需求。标签的分类HTML标签一般分为块标签和行内标签两种类型，也称块元素和行内元素。2. 块级元素块级元素特点 （1）块级元素独占一行 （2）宽度、高度、边距都是可控的 （3）宽度默认是浏览器的100% （4）是一个容器及盒子，里面可以放行内或者块级元素注意 （1）只要文字才
2020-07-18 15:44:16
374
原创 复合器选择器
后代选择器 <style type="text/css"> .nav a { color:red; } </style></head><body> <div class="nav"> <a href="#">我是链接</a> <a href="#">我是链接</a> <a href="#">我是链接</a> </div>
2020-07-17 21:29:11
190
1
原创 使用layui的左侧nav导航，element模块功能无法起作用
最近在使用layui 做一个后台管理系统是，使用element.on监听导航点击，却无任何点击效果，包括管理列表也无任何点击效果查阅官方文档后发现：跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代，第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一
2020-05-29 21:52:24
2470
原创 layui select选项无法显示
代码如下： <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <select id="sex_" name="interest" lay-filter="aihao"> <option value="男" selected="">
2020-05-29 21:35:10
832
原创 Error:(84, 24) java: -source 1.5 中不支持 switch 中存在字符串 (请使用 -source 7 或更高版本以允许 switch 中存在字符串)
在idea 导入项目，运行时报错如下：Error:(84, 24) java: -source 1.5 中不支持 switch 中存在字符串 (请使用 -source 7 或更高版本以允许 switch 中存在字符串)解决办法：方法一：在编辑器里双击报错信息，定位到错误的地方，将鼠标光标放到报错语句上，当出现红色灯泡是，选择升级到source 7 或更高版本以允许 ；方法二：...
2020-05-29 21:13:45
1299
原创 计算机网络随堂测验
[多选题]计算机网络从逻辑上可以被抽象为哪些基本构件？A.终端B.设备C.节点D.主机E.链路F.介质正确答案：CE构建计算机网络时，主机之间的互联方式有？A.直接连接B.网络云C.网络云的网络云D.点对点E.多点访问F.同构互联G.异构互联正确答案：ABC网络操作系统中定义的网络编程开发接口有A.socketB.JDBCC.NDISD.API正确答案：A、D以下有关端到端原则的描述正确的是( )。A.边缘简单、核心智能B.边缘智能、核心简单C.如果在
2020-05-18 11:39:07
2857
原创 了解CSS精灵技术
1. 什么是CSS精灵技术CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然后通过定位到不同位置而得到我们需要的某个小图.使用CSS精灵,需要使用CSS的:background-imagebackground-repeatbackground-position属性进行背景定位，其中最关键的是使用background-position 属性精确地定位。2. 为什么需要精灵技术图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要
2020-05-14 22:26:34
586
原创 实践练习03——制作nav部分（快捷导航）
制作快捷导航部分，这部分呢主要就是左右两部分，一个左边的全部商品分类区域，一个右边热门分类区域首先我们看见在在nav的底线处是有一条红线作为分割线下的，这里我们就直接给nav的底部边框一个颜色和高度就可以了。.nav { height: 45px; border-bottom: 2px solid #b1191a;}将左边的盒子简称为1号盒子，右边的就叫2号盒子吧。nav部分整体时左右结构的，首先先给出HTML骨架：<!-- nav start --> <div cla
2020-05-08 21:43:20
619
原创 实践练习02——制作header部分（图标、搜索框、热词、购物车）
header部分包含了图标、搜索框、热词、购物车等。如上图所示，如此便可给出HTML的框架如下：<!-- header制作 --> <div class="header w"> <!-- logo --> <div class="logo"> </div> <!-- search --> <d...
2020-05-06 21:19:20
938
原创 字体图标的使用
字体图标图片是有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，也增加了很多额外的"http请求"，这些都会大大降低网页的性能的。更重要的是图片不能很好的进行”缩放“，因为图片的放大和缩小会存在失真的问题。在移动端响应式开发下，很多情况下我们是希望图标可以缩放的，所以此时，一个重要的技术便被我get到了，它就是字体图标（iconfont）。1. 字体图标的优点（1） 可以做和...
2020-04-27 22:17:56
334
原创 第三方模块gulp
前段时间了解了gulp工具，现在总结记录一下：一.Gulp是什么第三方模块gulp是基于node平台的前端构建工具；工作：将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了。优点：用机器代替手工，提高开发效率。二.Gulp 的使用使用npm install gulp下载gulp库文件在项目的根目录下建立gulpfile.js文件重构项目的文件夹...
2020-04-22 00:36:53
194
原创 jQuery实现当鼠标移动到当前行时当前行高亮显示
效果图如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src = "jquery.min.js"></script> <style type...
2020-03-10 19:59:47
960
原创 PowerShell中出现因为在此系统中禁止执行脚本解决方法
在运行powershell时提示“无法加载文件ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 “get-help about_signing”。问题原因： 主要是由于没有权限执行脚本。解决方法：管理员身份运行 powershell，运行命令 get-executionpolicy，显示 Restricted ，即不允许执行任何脚本。set-executionpolic...
2020-02-18 19:47:32
270
原创 nvm的安装及使用
nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下载地址：https://github.com/coreybutler/nvm-windows/releases根据自己的运行环境下载合适的版本，我下载安装的是windows版本。打开网址选择nvm-setup.zip安装包下载好后便可以进行安...
2020-02-18 19:33:16
416
原创 node环境安装及配置
node环境安装可以直接在官网上下载最新的node安装包进行安装，下载地址：https://nodejs.org/en/进入下载页面后，如果是Windows系统便选着Windows的安装包，Linux或者是macOS便选择相应的就OK了，下载的时候注意下操作系统是32位的还是64位的就好了下载好了后就可以双击安装包进入安装界面，点击Next按钮进行下一步同意用户协议，进行下一步选择...
2020-02-18 18:07:02
144
原创 动态创建表格
动态创建表格（学习JavaScript的一个实践小记录）动态创建表格，将数据填充到表格中去，表格的行列大小根据数据大小变化，对于此处动态创建表格的数据并未从数据库中取数据，所以我们需要先模拟数据：模拟数据var datas = [ {name: 'zs', subject: '语文', score: 90}, {name: 'ls', subject: '数学'...
2020-02-10 19:01:28
703
原创 搜索文本框
设置搜索文本框的样式如下图所示为搜索文本框的默认样式，当文本框获得焦点时，清空文本框，并且让字体变为黑色；当文本框失去焦点时，如果文本框里的内容为空，则还原文本框里的文字，并且让字体颜色变为灰色完成以上要求，我新掌握了2个事件：onblur 事件会在对象失去焦点时发生onfocus 事件在对象获得焦点时发生代码如下：在这里插入代码片...
2020-02-06 22:44:43
331
原创 Wbe API
学习目标掌握API和Web API 的概念掌握常见浏览器提供的API的调用方式能通过Web API开发常见的页面交互功能能够利用搜索引擎解决问题Web APIAPI 的概念API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内...
2020-02-06 16:46:16
303
原创 JS内置对象
JS内置对象JavaScript中的三种对象：自定义对象、内置对象、浏览器对象ECMAScript中的对象：自定义对象、内置对象内置对象：内置对象就是系统提供的对象，已经存在的对象，例如Math、Array、Data…Math对象Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供跟数学相关的运算来找Math中的成员（求绝对值、取整）Data对象D...
2020-02-03 15:20:35
139
原创 JS对象
对象的概念什么是对象？现实世界：万物皆对象，一切事物都是对象，对象是一个具体的事物。例如手机、汽车他们都代表一类事物，而不是对象，若某人的手机、某人的汽车便是一个对象。对象具有特征和行为。程序中的对象：是对现实世界中事物的抽象。JavaScript中的对象其实就是生活中对象的一个抽象JavaScript的对象是无序属性的集合属性可以包含基本值、对象或函数。对象就是一组没有顺序的值，我...
2020-02-01 17:35:54
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人