- 博客(41)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 小激动！！！van-grid最后一行居中显示
事情是这样的，有一个小需求，在van-grid的基础上，对每一行的小格子进行居中处理。所以可以直接使用justify-content: center;对于和column-num成倍数关系的item，是不受影响的。由于van-grid内部是display: flex;这样，最后就会空出一小格子。问了指导老师，新知识get。
2022-12-08 16:06:58
419
原创 文字描边渐变
写页面需要一个文字的渐变色和描边于是乎，开始从font上打主意，但是发现，font似乎只能单色，并不能发展渐变。然后我就发现了一个神奇的小操作。
2022-12-01 14:21:37
165
原创 yarn build 来打包项目，报错：You may need an additional loader to handle the result of these loaders.
You may need an additional loader to handle the result of these loaders.
2022-11-28 17:06:48
1515
原创 用router尝试页面与页面的信息传输踩坑
实习，写一个小功能，遇到页面与页面需要传输一个信息，单个信息。查询资料后，进行编写，发现如果传输单一数据，就会造成信息被切割。例如下面的test，如果没有id行,传输到第二个页面之后，就会变成。如果有id行,传输到第二个页面之后，就会变成。
2022-11-28 16:53:06
83
原创 报错：“Love Swiper? Support Vladimir‘s work by donating or pledging on patreon:
报错
2022-11-15 16:33:47
2849
2
原创 实习小收获：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
报错内容：Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.实习过程中，需要引用Echarts的图表，所有格式均进行了检查，运行之后效果却无法显示。
2022-11-11 15:35:54
1198
1
原创 项目小get20211210
el-breadcrumbel-breadcrumb1el-breadcrumb2breadcrumb 用于显示当前页所在位置，方便返回Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠 /templatetemplateHTML内容模板（template）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。将模板视为一
2021-12-11 08:29:08
124
原创 项目小get20211208
$route和 $ route$ route和$route1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等router.push（）router.push（）创建 a 标
2021-12-10 10:06:53
558
原创 项目小get20211205
:class:class我们可以传给 v-bind:class 一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。!important!importantCSS中的!important一般都是用来做hack的，后面缀上了!important的css语句，让
2021-12-05 21:43:54
125
原创 项目小get20211204
close-on-click-modal属性为falseclose-on-click-modalelement组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。slotslot插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制Dialog 对话框Dialo
2021-12-05 19:17:59
84
原创 项目小get20211128-29
_.camelCase匹配连字符 ‘-’ 和其后的第一个字母或数字，如果是字母，则替换为大写，如果是数字，则保留数字匹配 IE 中的 ‘-ms-’，替换为 ‘ms-’，这是因为 IE 中，‘-ms-’ 对应小写的 ‘ms’，而不是驼峰式的 ’Ms‘camelcase...
2021-11-29 22:31:00
504
原创 vue项目制作小get20211127
const token = res.result.token; // 获取 token，里面包含用户信息，涉及到需要用户权限的接口会校验token是否存在，是否已经过期tokenpassword: encryptPwd(password),//md5加密密码md5资料介绍 router.push({ name: 'platform' });//router.push参数可以是一个字符串路径，或者一个描述地址的对象。补充：v-model和ref的区别：v-model获取的是对象，只跟值
2021-11-27 20:40:06
286
原创 vue:TodoList 1.0案例总结
总结组件化编码流程：拆分静态组件：组件要按照功能点拆分，命名不要与HTML元素冲突实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用一个组件在用：放在组件自身即可一些组件在用：放在他们共同的父组件上（状态提升）实现交互：从绑定事件开始props适用于：父组件==》子组件 通信子组件==》父组件 通信（要求父先给子一个函数）使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的props传过来的若
2021-11-21 18:56:19
346
原创 Html+Css小tips: less
lessless变量lessless 是一门css的预处理语言less 是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性：像对变量的支持、对mixin的支持less的语法大体上和css语法一致，但是less中增添了许多对css的扩展所以浏览器无法执行less的代码，要执行必须将less转化成css，然后再由浏览器执行//less中的单行注释，注释中的内容不会被解析到css中/*css中的注释会被解析到css文件中*/变量在变量中可
2021-10-23 19:48:44
127
原创 Html+Css小tips:缩放
缩放变形的原点 默认值使centertransform-origin: 20px 20px;对元素进行缩放的函数：scaleX()水平方向scaleY()竖直方向scale()双方向scaleZ()前后方向.box1:hover{ transform: scale(2); }
2021-10-23 16:44:46
107
原创 Html+Css小tips：立体旋转小方块（练习）
<!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"> <title>Doc
2021-10-23 16:06:24
184
原创 Html+Css小tips:钟表（练习）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟原理练习</title> <style> *{ ma
2021-10-23 14:26:55
68
原创 Html+Css小tips：旋转
通过旋转可以使元素沿着x、y、z轴旋转指定角度.box1{ width: 300px; height: 300px; }body:hover .box1{ transform: rotateX(.25turn); transform: rotateY(180deg) translate(400px); transform: rotateZ(.
2021-10-23 14:00:07
74
原创 Html+Css小tips:变形
变形就是指通过css来改变元素的形状或者位置变形不会影响到页面的布局transform 用来设置元素的变形效果平移：translateX() 沿着X轴方向平移translateY() 沿着Y轴方向平移translateZ() 沿着Z轴方向平移平移元素，百分比是相对于自身计算的 transform: translateY(-100px);z轴平移z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素越高，离人越近z轴平移属于立体效果（近大远小），
2021-10-15 20:23:08
71
原创 Html+Css小tips:关键帧（小球练习）
<!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"> <title>Do.
2021-10-15 19:25:23
84
原创 Html+Css小tips:奔跑的少年（练习）
<!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"> <title>Doc
2021-10-15 19:02:56
107
原创 Html+Css小tips:动画
动画动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性的发生变化时触发动画可以自动出发动态效果设置动画效果，必须要先设置一个关键帧，关键帧就设置了动画执行的每一个步骤...
2021-10-15 18:57:43
111
原创 Html+Css小tips:米兔动画
<!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"> <title>Doc
2021-10-15 10:53:16
166
原创 Html+Css小tips: 过渡
过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验transition-property: 指定要执行过渡的属性多个属性使用 ’ , ’ 隔开。如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是一个有效数值向另外一个有效值进行过渡。...
2021-10-09 21:20:24
54
原创 Vue小学僧之初识Vue
刚开始走代码，不知道为什么一直出不了效果。赶紧一个字一个字对拍，生怕是英语中文弄混，结果都没问题。找了网上的例子CV之后，运行正常，找了20+分钟，才发现单词错误，导致效果无法显现，哇，头皮发麻。<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../vu
2021-09-18 20:19:12
37
原创 Html+Css小tips：电影小卡片练习
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>电影卡片</title> <link rel="stylesheet" href="./css/reset.css"> <!-- 导入图标字体 --> <link rel="stylesheet" href="./fontawesome/css/all.css">
2021-09-16 11:03:06
275
原创 Html+Css小tips:背景渐变
渐变线性渐变径向渐变线性渐变通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过滤的效果。渐变是图片，需要通过background-image来设置。线性渐变颜色沿着一条直线发生变化linear-gradient（）linear-gradient(red,yellow);红色在开头，黄色在结尾，中间是过渡区域线性渐变的开头，我们可以指定一个渐变的方向to leftto rightto bottomto topdeg deg 表示度数turn 表示圈渐变可以同时指定
2021-09-16 10:37:34
158
原创 Html+Css小tips:雪碧图练习
解决图片加载闪烁问题.btn{ display: block; width: 93px; height: 29px; background-image: url(./1.png); } .btn:hover{ background-position: -93px 0; } .btn:active{ background-position: -186px 0; }
2021-09-15 15:54:02
202
原创 Html+Css小tips:背景
背景背景颜色背景图片背景图片的重复方式背景图片的位置背景范围背景图片大小图片跟随属性简写背景颜色background-color: white;背景图片background-image: url(./1.jpg);background-image 设置图片背景可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片背景色如果背景的图片小于元素，则背景图片会自动在元素中平铺，将元素铺满如果背景的图片大于元素，将会显示部分的图片如果背景的图片和元素一样大，则会正常显示背景图片的重复方
2021-09-15 15:23:20
55
原创 Html+Css小tips:京东灰色上端导航条
跟着视频做练习，发现还是有一些指向问题不太清楚。后来有一个细节上，出现错误，显示效果一直不太理想。后来重新跟着视频代码对拍，发现了错误。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c.
2021-09-15 13:41:19
224
原创 Html+Css小tips:字体
字体字体族图标字体字体族字体相关样式color 用于设置字体颜色font - size 字体大小单位：em相当于当前元素的一个font-sizerem 相当于根元素的一个font-sizefont-family 字体族（字体格式）可选值：serif 衬线字体sans-serif 非衬线字体monospace 等宽字体（指定字体的类别，浏览器会自动使用该类别下的字体）可以同时指定多个字体，多个字体间使用‘，’进行隔开。字体生效时优先使用第一个，第一个无法使用之后第二个补
2021-09-11 20:29:52
84
原创 Html+Css小tips:京东轮播图练习（HTML+CSS）
整个布局练习了之前的定位的学习内容，一开始因为css文件未导入导致了一些错误，后来发现了问题，之后顺利许多。附上我的代码，嘿嘿。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
2021-09-11 14:37:39
371
原创 Html+Css小tips:定位（position）
定位相对定位偏移量（offset）绝对定位包含块（contation block）固定定位定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位position:static;可选值：static：默认值，元素是静止的没有开启定位relative：开启元素相对定位absolute：开启元素绝对定位fixed：开启元素固定定位sticky：开启元素粘滞定位相对定位当元素的position属性设置为relative时，则开启了元素
2021-09-09 19:57:08
183
原创 Html+Css小tips:clear
clear如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响clear- 作用：清除浮动元素对当前元素所产生的影响- 可选值：left 清除左侧浮动元素对当前元素的影响right 清除右侧浮动元素对当前元素的影响both 清除两侧中最大影响的那侧 原理： 设置清除浮动以后，浏览器会自动为元素添加一个上外边距， 以使其位置不受其他元
2021-08-18 20:48:25
80
原创 Html+Css小tips:高度坍陷问题BFC
BFC解决高度坍陷问题高度塌陷的问题：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱BFC(Block Formatting Context) 块级格式化环境：BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC开启BFC该元素会变成一个独立的布局区域元素开启BFC后的特点：1.开启BFC的元素不会被浮动元素所覆盖
2021-08-18 20:12:23
58
原创 Html+Css小tips:导航条练习
<!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" content="ie=edge"> <title>导航
2021-08-18 19:26:18
81
原创 Html+Css小tips:浮动
float通过浮动可以使一个元素向其父元素的左侧和右侧移动可选值：none（默认）rightleft注意：元素设置浮动以后，水平布局的等式，不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不在占用文档流的位置所以元素下边的还在文档流中的元素会自动上升（理解：整个内容就像是水环境，元素浮在水面，其他元素沉在水底）特点：1.浮动元素会完全脱离文档流，不在占据文档流中的位置，元素其性质也会发生一定改变块元素不在独占一行块元素的长和宽由内容决定行内元素特点与块元素相同2.设置
2021-08-17 20:17:05
87
原创 Html+Css小tips:轮廓阴影和圆角
轮廓：boder和outlineoutline 用来设置元素的轮廓线，用法和border一模一样。特殊点：outline的轮廓线不会影响到可见框的大小。例如：如果框的下面有文字outline不会使文字下移，border会。阴影：box-shadow<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
2021-08-17 19:56:30
109
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人