- 博客(55)
- 收藏
- 关注
RSS订阅原创 CSS写一个实心小圆点的样式
设个类point在style标签里加上.point { width: 12rpx; height: 12rpx; border: 1rpx solid #ff6c04; border-radius: 100px; background-color: #ff6c04; }
2022-02-18 16:41:01
4193
原创 小程序底部导航栏的实现
1、小程序底部导航栏就是这个底部的东西2、这个需要在app.json处设置“tabBar”例子如下：{ "pages": [ "pages/index/index", "pages/pages1/pages1", "pages/pages2/pages2" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ffffff", "na
2022-02-11 18:05:10
1337
原创 从GitLab拉取项目到本地
1、创建一个文件夹，用来放你要拉取的项目。2、然后在文件夹空白处右击，点击Gti Bash Here，进入终端。注意！（第二步的前提是要下载了下面这个Git Bash）3、打开终端后，输入命令git clone 你的项目地址，项目地址可以直接点紫色框框那里的复制拿下来。【这里项目地址是http的形式，可以在gitlab里切换的，用SSH的形式也是一样的命令】4、然后看你的那个文件夹，项目就已经下载下来了。...
2022-02-11 17:59:51
13053
原创 Vue中:value的易错
今天写项目才发现自己还没完全掌握好理解这个:value，很容易混淆，于是自己捋一捋：下面有4种情况：①value=“abc”这样写是直接让value等于abc，其实与③的写法表达的意思一样⭐下面是有：冒号的情况，有冒号：的都是动态绑定② :value=“abc”这样写是让value绑定变量abc，这个变量要写在data里定义，这样可以在data里动态地改变abc的值。③ :value=" ‘abc’ "这样写，是让value绑定字符串abc④ :value=“true”这样写，是让val
2022-02-10 11:54:23
5967
1
原创 vue中的动态绑定CSS
一、简介通过事件改变css样式，有两种方式，属性绑定和计算属性绑定。二、案例①、index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
2022-02-09 21:52:17
3743
原创 vue中的计算属性computed
一、简介computed与methods和watch最大的区别在于只有在当前属性发生变化后它才会被触发，大大提升优化程度。如果项目中有的数据常常要发生变化的，可以用computed来实现，比如搜索。二、案例①index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
2022-02-09 21:41:27
3345
原创 vue中ref和watch的使用
一、ref简介ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件.二、watch简介一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。简而言之watch是数据监听作用。注意：不建议使用watch,它会持续监听属性的状态，会耗费项目
2022-02-09 21:24:41
2118
原创 Vue中的v-model
一、v-model的用法简介在表单控件或者组件上创建双向绑定，其实就是给表单控件或者组件绑定数据。二、案例①index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me
2022-02-09 20:54:39
469
原创 Vue键盘事件
一 、键盘事件简介键盘事件顺序keydown → keypress → keyup二、案例①index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
2022-02-09 20:24:12
187
原创 vue中的事件修饰符，以v-on的prevent阻止默认事件修饰符为例
一、简介事件修饰符处理了许多DOM事件的细节，帮助我们快速的完成一些事件动作。例如v-on的修饰符有以下：.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根
2022-02-07 01:11:24
2249
原创 vue中的v-on
一、简介v-on可以简写成@ 它是绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。二、案例①index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="v
2022-02-07 00:26:06
611
原创 vue中的v-bind属性绑定
一、简介带有v-的都是指令，v-bind可以缩写成： 用于动态地绑定一个或多个 属性，或一个组件 prop 到表达式。二、案例（案例集合了el+data+methods+v-bind的知识点）①index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
2022-02-07 00:16:19
888
原创 vue中的methods方法
一、对methods的理解methods:{ } 里是写各种不同的方法函数，这些方法可以理解为是一个属性，因为调用这个方法的时候，最终返回的是一个值二、①index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal
2022-02-07 00:08:19
11476
原创 vue中的el和data(){}简介及综合案例
一、el简介el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。二、el用法案例如下:①index.html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,
2022-02-06 23:30:15
1007
原创 trigger的blur与change的区别
1、blur失去焦点，比如输入框里。校验文本框是否为空trigger: 'blur'2、change数据改变trigger: 'change'下图这些，需要手动选择的东西，用change，而活动名称这种用blur
2022-01-19 21:38:00
5594
原创 rbga()的写法与易错
今天写代码的时候，对于运用rbga（）函数有了进一步的理解。发现自己简单函数的用法都用错，因为自己之前都是写的对的，今天突然不在状态，写错了，过了会才反应过来为啥报错，自己没有重视简单函数的使用，今后改正~rgba() 函数使用红( R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。在我使用rgba函数的时候，我有了:header-cell-style="{ background :’#fafafa’, color:’#000’}"这个background若写成：backgroun
2022-01-19 21:20:00
1161
原创 elemen-ui表格默认样式的修改
方法一：通过element-ui里给的属性值修改查找element-ui的官方文档，找到组件的表属性，其他组件也一样。比如要改表头行：利用header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。例子如下：<el-table :header-cell-style="tableHeaderColor"></el-table>方法二：通过在style标签里修改如果不生效，可能是你全局定义了e
2022-01-19 20:20:52
3834
原创 Git的基础知识及操作命令——以vscode做示范
1、Git三大区分别为工作区，缓存区和远端仓库例如我们在vscode的终端执行的时候，就是在工作区，执行了commit提交命令的时候，是提交去了缓存区，最后git push才是提交到了远端仓库。2、基本的命令3、另外，还以不使用命令就可以提交代码到缓存区的方法。以vscode做示范：①例如我修改一处代码，右边会显示②③④...
2021-12-14 20:53:26
586
原创 CSS综合案例——学成在线网站
做的是一个学成在线网站，比较基础~效果图如下，运用的是html和CSS基本语法和核心知识点1.源代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-
2021-12-10 13:16:51
1053
原创 用vscode运行js文件代码
一、新建js文件/打开js文件如果有的不需要新建，直接跳到第二步方法1：新建一个txt文件，改后缀名为.js，并用记事本打开在里面写入代码；方法2：打开vscode，左上角-文件-新建文件-选择编程语言（选择JavaScript）-保存文件-保存文件（选择也是JavaScript）如我们输入个简单的console.log("哈哈哈哈");二、运行js文件点击终端，输入命令： node 文件名.js ，按回车即可运行...
2021-12-10 00:59:46
36097
原创 HTML的注释与JavaScript注释及快捷键
1、单行注释：在代码前输入两个反斜杠 // ，或用快捷键ctrl+/2、多行注释： 使用/* */ 把要注释的代码块包起来，或用快捷键shift+alt+a3、若觉得2、的快捷键用着不方便，可以按自己喜欢可以在vscode中修改注释快捷键。...
2021-11-20 11:12:56
10962
原创 CSS3综合案例——进度条/CSS3的过渡练习
这个是做一个进度条案例，涉及CSS3的过渡练习1、进度条如何布局2、过渡的使用显示效果如图：鼠标移到进度条的时候，进度条变满代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
2021-11-20 00:22:39
300
原创 CSS综合案例——仿土豆网显示隐藏遮罩案例/鼠标经过显示遮罩
案例：鼠标经过时显示灰色遮罩，移走后恢复原样。核心原理：原先的半透明黑色遮罩看不见，鼠标经过大盒子就显示出来。注意：遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。涉及的相关知识：元素的隐藏与显示、元素的定位。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
2021-11-17 23:15:02
458
原创 CSS综合案例——三角形的制作/带三角的下拉框背景
如图所示：做了几个三角形案例：网页中的三角形，可以直接画出来就可以，不必做成图片或字体图标。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-
2021-11-17 23:03:20
322
原创 CSS综合案例——用精灵图拼单词
要学会用fireworkes软件，精确测量给的图片里每个图案的大小和位置。例子拼 pink 这个单词，在盒子里放这个图片的特定图案字母P。那么需要设置好盒子，并设定好到底要显示这个精灵图的哪个部位（靠坐标定位）。以此类推设置每一个字母的盒子。最终显示效果如图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
2021-11-17 21:37:53
438
原创 CSS综合案例——淘宝轮播图/焦点图布局的制作
轮播图如下：图片素材可在淘宝下，记得在代码中设定为相应的图片像素大小。思路：大盒子可以设置类名为： tb-promo 淘宝广告里面先放一张图片。左右两个按钮用链接就可以。 左箭头 prev 右箭头 next底侧小圆点ul 继续做。 类名为 promo-nav需要注意的是：相对定位不脱离标准流，可以通过margin： auto实现居中。但绝对定位和固定定位不可以，所以他们有相应的算法。代码如下：<!DOCTYPE html><html lang="en">&
2021-11-17 20:17:36
971
1
原创 CSS综合案例——制作新闻快报模块
效果如下：这里特惠内容我用的是li，但是li会有小圆点，因此需要去掉小圆点。所需注意：要去掉li前面的项目符号（小圆点），语法是：list-style:none;这个新闻快报小模块的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021-11-14 22:54:25
868
原创 CSS综合案例——产品模块
效果图如图所示：所需注意的：padding和margind的运用代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c
2021-11-11 18:44:46
344
原创 CSS综合案例——网页常见布局1
常见网页布局之一如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-11-10 21:59:36
977
1
原创 CSS案例——padding应用-新浪导航
效果图如下：鼠标移动到对于模块时，背景色变暗灰色，文字变成橙色。各个模块之间的大小由字数决定，利用padding撑开距离。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e
2021-10-23 17:11:52
122
原创 CSS综合案例——五彩导航条
案例效果如下：鼠标经过会变色这个案例的练习价值:链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换。里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码。链接里面需要设置背景图片.因此需要用到背景的相关属性设置。鼠标经过变化背景图片,因此需要用到链接伪类选择器。（若需要素材图片，请私聊我，我会马上发给你~）<!DOCTYPE html><html lang="en"><head> <meta charset="U
2021-10-21 17:34:44
597
原创 CSS综合案例——超大背景图片的显示案例
超大背景图的显示，如下图王者荣耀的背景图：先下载这个王者荣耀背景图，按F12，就会显示如下，然后按如下步骤下载图片：如下代码，图片路径改成你自己下载保存的路径~要让图片水平居中显示最核心的部分，就给它设定：background-position: center top水平居中+垂直方向上靠上，这样就能水平居中显示图片，就能显示图片最核心的部分<!DOCTYPE html><html lang="en"><head> <meta char
2021-10-21 12:18:37
353
原创 CSS综合案例——背景位置方位名词应用案例1——背景图片位置+文字位置的调整—图片和文字在一条水平线上
案例是：做王者荣耀官网页面上的一块。让图片和文字一起在恰当的地方居中显示，图片和文字在一条水平线上！方法：让背景图片在左+中心，文字缩进1.5em<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
2021-10-21 11:58:08
662
原创 CSS综合案例——简洁版小米侧边栏
案例的核心思路分为两步:把链接a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度，鼠标经过a 给 链接设置背景颜色提示：1.通过display设置a标签的显示模式，让其能设置宽高2.通过text-align设置文本水平居中3.通过设置line-height让文本垂直居中4.通过:hover设置鼠标经过的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g
2021-10-20 17:51:15
191
原创 CSS综合案例——新闻页面
制作页面整体可以分为两步:搭建html结构页面.（就是把所有段落标题加上标签，先生成个大概骨架）修改CSS样式（在骨架基础上添加CSS样式美化）效果图如下：案例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
2021-10-18 18:22:03
615
原创 软件测试工作面试的74个常见问题
软件测试工作的74个常见问题1、你在测试中发现了一个bug，但是开发经理认为这不是一个bug，你应该怎样解决？2、给你一个网站，你如何测试？3、在搜索引擎中输入汉字就可以解析到对应的域名，请问如何LoadRunner进行测试。4、一台客户端有三百个客户与三百个客户端有三百个客户对服务器施压，有什么区别?5、试述软件的概念和特点？软件复用的含义？构件包括哪些？6、软件生存周期及其模型是什么？7、什么是软件测试？软件测试的目的与原则8、软件配置管理的作用？软件配置包括什么？9、什么是软件质量？
2021-09-30 12:28:03
11497
原创 HTML表单综合案例———注册页面
综合案例主要练习:表格标签, 可以让内容排列整齐.列表标签表单标签效果图如下：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
2021-09-29 23:19:12
827
原创 HTML通俗易懂—表单标签+表单元素（input输入表单元素+select下拉列表+textarea文本域元素）+相应案例
现实中的表单：1、表单的组成在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。（1）表单域表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>基础
2021-09-29 18:40:53
1423
原创 HTML详细浅显易懂！——列表标签+相应案例
表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。...
2021-09-29 17:16:40
305
原创 HTML超详细--表格标签+相应案例（小说排行榜+三样表格合并）
一、表格标签表格不是用来布局页面的,而是用来展示数据的。1.1.表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>1.<table> </table> 是用于定义表格的标签。2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <tab
2021-09-29 16:56:41
1380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人