前端基础
个人自学的笔记包含CSS和HTML
渴望看海的少年
好命靠努力
展开
-
在uni-app中封装请求
上代码//使用修改域名,默认是get,需要post则要改动一部分const BASE_URL="https://api-hmugo-web.itheima.net/"; //在主文件入口main.js中引入,然后绑定到全局对象上,例如 uni.$myRequest=myRequest,使用的时候直接uni.$myRequest()export const myRequest=(options)=>{ //传入的options是一个json对象 // 让这个方法返回一个promise对原创 2022-03-22 16:55:55 · 348 阅读 · 0 评论 -
webpack版本及less等版本的查看方式(持续添加)
1.查看webpack的版本npm view webpack versions得到如下2.查看less-loader版本npm view less-loader versions得到如下原创 2022-02-23 16:59:13 · 501 阅读 · 0 评论 -
学习vue笔记(1)
一、初识1.开发版本体积较大,未被压缩;生产版本,已被压缩的文件2.解决两个提示第一个提示是推荐安装devtools调试工具第二个是“目前使用的是开发者的vue,生产版本不要这样做”解决第一个提示: 安装调试工具到谷歌浏览器的扩展解决第二个提示:config对象包含vue的所有配置Vue.config修改值为false成功3.图标请求的问题按住shift点击刷新,进行强制刷新,可以在network中看到一个请求...原创 2021-11-04 15:34:09 · 97 阅读 · 0 评论 -
记录我配置Vue的过程
1.安装node ,下载后直接根据提示安装2.打开dos窗口,验证是否安装成功3.修改默认的下载路径,使用淘宝镜像的方式第一种方式npm config set registry https://registry.npm.taobao.org 配置后可以根据npm config get registry或npm config list命令查看npm下载源是否配置成功或者换一种第二种方式更改npm install -g cnpm --registry=...原创 2021-11-03 22:11:06 · 123 阅读 · 0 评论 -
VScode插件(自用)
一、Material Icon Theme 图标插件它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面。二、 颜色主题插件Themes(代码颜色)中的 Monokai Dimmed三、css peek使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代..原创 2021-09-03 13:00:13 · 5171 阅读 · 0 评论 -
前端基础CSS3-(3D动画)
一、透视属性;定义虚拟眼睛,perspective: ; 1.透视写到被观察元素的父盒子上面 2.当透视值小于z值的时候,是什么都看不见的, 3. z值就是物体到屏幕的距离, 4. 而透视,就是虚拟眼睛到屏幕的距离 body { perspective: 500px; } 二、3D移动 transform: translateX(100p...原创 2021-09-02 13:11:34 · 492 阅读 · 0 评论 -
前端基础CSS3-(动画)
一、动画属性animationanimation:name(动画名称-必选) duration(持续时间-必选) timing-function(运动曲线-可选) delay (何时开始可选) iteration-count(播放次数-可选) direction(是否反方向-可) fill-mode; (动画位置起始或者结束;-可选)二、定义动画除了0和100%,还可以用from和to来表示序列动画序列1.可以做多个状态...原创 2021-09-02 11:30:07 · 160 阅读 · 0 评论 -
前端笔记CSS3-(2D移动、旋转、缩放)
三种效果都可以配合过渡属性使用一、2D移动transform:translateX();括号内可以是数值,也可以是百分比,代表两种不同的意义;如果是数值,则代表相对于父元素偏移的距离;如果是百分比则是,里面元素的偏移距离就是元素自身的高或宽乘以百分比的值;transform:translateY(50%);transform:translateX(50%);也可以合在一起书写:transform:translate(-50%,-50%);二、旋转transfo...原创 2021-09-01 17:56:28 · 375 阅读 · 0 评论 -
前端笔记css3-(过渡属性transition)
过渡属性transitiontransition:要过渡的属性 花费时间单位秒 运动曲线默认ease 何时开始;后面两个可以省略;谁需要过渡就给谁添加过渡,而不是在hover和动画中,可以写多个属性,写的同时可以用逗号分割,也可直接用all .box1 { width: 200px; height: 100px; background-color: skyblue; /* transition: heig...原创 2021-09-01 17:32:47 · 147 阅读 · 0 评论 -
前端笔记基础-(去掉图片底部的空白缝隙,添加文字尾部的省略号)
一、去掉底部白色空隙1.使用vertical-align:middle;属性可以去掉底部空隙2.也可以使用转为块级元素也可完成,不推荐二、添加文字尾部的省略号代码及注释如下/* 单行文字省略号 */ .box2 { /*表示文字自动换行*/ /* white-space: normal; */ /*表示文字无法自动换行,强制显示在一行溢出*/ white-space: nowrap; /* ..原创 2021-09-01 17:10:48 · 354 阅读 · 0 评论 -
自学前端-(鼠标样式、文本域拉大禁用、行内元素垂直对齐、取消表单轮廓)
一、鼠标样式cursor属性值的作用:default白色箭头;pointer白色小手;move移动十字;text文本;not-allowed禁止二、行内元素垂直对齐vertical-align: ;属性可以使行内元素以及行内块元素垂直对齐;属性值有baseline基线对齐;top顶线对齐;middle中线对齐;bottom底线对齐textarea { /* 即可取消拖拽功能 */ resize: none; v...原创 2021-09-01 16:58:36 · 127 阅读 · 0 评论 -
自学前端-(css三角制作和箭头制作)
一、三角制作原理:定义一个盒子,将盒子的宽高为0,将盒子的表框线条变粗,然后将所有的边框设置为透明,而后设置其中一条边为一种颜色,即可完成border: 10px solid transparent; border-bottom-color: tomato;高级三角:原理:定义一个盒子,将盒子的宽高为0,通过修改四个边框的大小,来调整三角形box1 { width: 0; height: 0; /* 将原创 2021-09-01 16:48:41 · 440 阅读 · 0 评论 -
自学前端-(字体图标的操作方法)
一,字体图标的下载icomoon字体库点击Add Icons From.....可以看到=更多的图标点击Gener Font 打包选好的字体图标然后弹出的界面点击右下角的Download的选框下载后可以获得一个压缩包,解压后获得一个名为icomoon的文件夹,打开这个文件夹,再打开fonts文件夹,可以看到四个字体文件,四个字体文件是由于兼容不同浏览器的原因。复制fonts的文件夹,粘贴到网页页面文件的根目录下而后复制icomoon文件夹下的st...原创 2021-09-01 15:43:01 · 872 阅读 · 0 评论 -
自学前端-(定位相关)
1.绝对定位会脱标,不占有原来的位置2.无父级元素的定位情况,将会以document为准3.只要父元素有定位,就会一最近一级的父元素定位为准4.子绝父相,子盒子需要在父盒子内排列多个布局,不能占有位置,而父盒子相对页面进行排版,则需要占有位置,所以父元素使用相对定位会更合适5.定位叠放z-index:;使用这个属性值越大,层次越高,越处于上层6.盒子上下居中算法:使用top值50%,再使用盒子自身高度的-50%,即可达到相对父元素上下居中的效果7.脱标的元素不会触发元素外边距塌陷原创 2021-09-01 14:47:24 · 64 阅读 · 0 评论 -
自学前端-HTML/css-(隐藏和显示元素,el精灵图)
1.dispay显示隐藏元素,但是不保留位置visibility显示隐藏元素但是保留原来位置overflow溢出显示隐藏,但是只对于溢出的部分处理2.精灵图el.elf-1 { width: 100px; height: 230px; margin: 100px auto; /* 定义一个盒子,借助 background-position: ;来实现, 一般情况下为负值,即x y;x往右是正值,往左是负值,y.原创 2021-09-01 14:30:55 · 91 阅读 · 0 评论 -
自学前端-盒子相关属性(嵌套块级元素塌陷、设置阴影、清除浮动)
1.面对嵌套块级元素塌陷的问题,例如div1在里面有一个div2,给div2设置一个外边距100px,使父盒子不动。而子盒子往下移动100像素;而实际效果却是,子盒子还是贴在父盒子边缘,大盒子整体往下移动了100px,这就是元素塌陷(子盒子添加margin属性会出现的问题),可以给父元素添加一个透明边框,或者父元素定义内边距,可以使用第三种,给父元素添加overflow:hidden(推荐)2.清除内外边距,使用通配符清除内外边距。*{}3.添加盒子阴影box-shadow,依次代表:水平参数...原创 2021-09-01 14:17:50 · 213 阅读 · 0 评论 -
自学前端总结5-css背景,css链接
background属性的复合写法;以及超链接文字上下居中和文字首行缩进.div1 { width: 500px; height: 500px; background-color: #000000; /* background-image: url("../HTML/demo04-1.jpg"); */ /* 设置背景图片是否平铺 */ background-repeat: no-repeat; /*控制背景图片在盒子中的显示位置,如果以数字,x在前,y在后;原创 2021-09-01 14:06:56 · 67 阅读 · 0 评论 -
【记录知识点】节流阀,逻辑中断
JS代码// 定义节流阀开关 let flag=true;arrow_l.addEventListener('click',function(){ if(flag){ //开始执行,把开关定义为false,等到点击事件完全结束,利用回调函数设置为false flag=false; //添加一个判断如果num=最后一张,就利用视觉差异替换到第一张图片,并把索引改为第一张的原创 2021-08-29 17:34:33 · 132 阅读 · 0 评论 -
【记录问题】自己在写代码中遇到的问题(this)
1、制作轮播图中遇到className属性不生效的问题(实则是this的问题)HTML代码段 <div class="focus "> <ol class="circle"> </ol> </div>css代码段.circle { position: absolute; bottom: 10px; left: 50原创 2021-08-27 21:42:20 · 165 阅读 · 0 评论 -
自学前端-css盒子相关属性(部分)
/* 这是css第一行固定代码,使用通配符清除内外边距 */* { margin: 0; padding: 0;}/* 行内元素尽量只设置左右内外边距,上下不设。一定要设置就转换为块级元素 */.box2 { height: 40px; background-color: #00ffff; border-top: 3px solid #ff7f00; border-bottom: 2px solid #ffbd4c; /* 外边距:垂直外边距合并,尽量只设置一个marg.原创 2021-08-24 22:09:36 · 165 阅读 · 0 评论 -
自学前端总结4-权重知识点
<!--选择器的权重,从大到小依次为:!important/行内式/ID选择器/类选择器/元素选择器/继承-*--> <!-- 权重叠加,ul和li一起的权重是0,0,0,2,单独的li的权重是0,0,0,1。重点提高权重可以使用权重叠加 --> <body> <div class="div2"> <div class="div1"> <a href="#">文字1</a> .原创 2021-08-24 22:06:26 · 445 阅读 · 0 评论 -
自学前端总结3(自用)-css选择器
<!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" /> <tit.原创 2021-07-22 21:29:58 · 135 阅读 · 0 评论 -
自学前端总结2(自用)
<!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" /> <tit.原创 2021-07-22 21:28:57 · 66 阅读 · 0 评论