前端学习笔记
关注
分享
扫一扫
学习笔记
芒果水蜜桃
找到兴趣，保持学习
展开
-
vscode设置默认浏览器为其他浏览器
直接在设置-应用-默认应用-点击选择浏览器选择你想要的就可以了。原创 2021-11-09 11:54:26 · 1516 阅读 · 0 评论 -
HTML5的新特性——多媒体标签
多媒体标签音频视频原创 2021-11-02 16:24:48 · 186 阅读 · 0 评论 -
HTML5的新特性——语义化标签
HTML5新特性都有兼容性问题，IE9+以上版本浏览器才支持，不考虑兼容性问题就可以大量使用。语义化标签header：头部标签nav：导航标签article：内容标签section：定义文档某个区域aside：侧边栏标签footer：尾部标签注意针对搜索引擎可以使用多次在IE9中，需要把这些元素转换为块级元素移动端更常用这些标签...原创 2021-11-02 12:00:03 · 197 阅读 · 0 评论 -
CSS初始化
/* 把我们所有标签内外边距清零 */* {margin: 0;padding: 0}/* 把斜体里的文字不倾斜 */em,i { font-style: normal}/* 去掉li的小圆点 */li { list-style: none}img { /* 照顾低版本浏览器 如果图片外边包含了链接会有边框问题 */ border: 0; /* 取消图片底测有空白缝隙的问题 */ vertical-align: middle}button { .原创 2021-11-02 10:23:51 · 173 阅读 · 0 评论 -
布局技巧——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"> <title>布局技巧——css.原创 2021-11-01 16:49:26 · 264 阅读 · 0 评论 -
布局技巧-行内块的巧妙运用（页码的布局案例）
<!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>Document&.原创 2021-11-01 16:38:22 · 159 阅读 · 0 评论 -
css高级技巧-文字围绕浮动元素
巧用浮动实现。float文字环绕效果<!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-01 16:04:59 · 196 阅读 · 0 评论 -
布局技巧-margin负值巧妙运用
设置边框为负值：解决边框合并1+1为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">原创 2021-11-01 15:29:19 · 154 阅读 · 0 评论 -
css之单行文字溢出省略号显示
单行文本溢出显示省略号——必须满足三条件//1.强制一行内显示文本white-space：nowrap;(默认自动换行)//2.超出部分隐藏overflow：hidden;//3.文字用省略号代替超出部分text-overflow：ellipsis；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.原创 2021-11-01 11:55:15 · 416 阅读 · 0 评论 -
图片低测空白缝隙解决方案
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法两种：1.给图片添加vertical-align：middle | top | bottom；等（提倡使用）2.把图片转换为块级元素。display：block；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"原创 2021-11-01 11:08:38 · 153 阅读 · 0 评论 -
vertical-align实现行内块和文字垂直对齐
vertical-align：baseline | top | middle | bottombaseline：默认。top：把元素的顶端与行中最高元素的顶端对齐middle：把此元素放置在父元素的中部bottom：把元素的顶端与行中最低的元素的顶端对齐 vetical-align实现行内块与文字对齐 我是中间...原创 2021-11-01 10:47:00 · 236 阅读 · 0 评论 -
css用户界面样式——鼠标样式和表单轮廓和防止拖拽样式
界面样式——更改用户操作样式，提高用户体验鼠标样式表单轮廓防止表单域拖拽鼠标样式：cursor<!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-wid原创 2021-11-01 10:32:19 · 240 阅读 · 0 评论 -
web前端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"> <title>三角形制作<.原创 2021-11-01 09:43:16 · 297 阅读 · 0 评论 -
web前端字体图标下载
icomoon字库icmoon字库阿里iconfont字库阿里iconfont字库使用方法https://www.bilibili.com/video/BV1pE411q7FU?p=256字体文件的追加原创 2021-11-01 09:24:01 · 363 阅读 · 0 评论 -
web前端开发的代码书写顺序
原创 2021-10-29 15:10:53 · 368 阅读 · 0 评论 -
元素的显示与隐藏
类似网址广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！**本质：让一个元素在页面中隐藏或显示出来**display：显示隐藏visibility：显示隐藏overflow：溢出显示隐藏displaydisplay：block | none ；display:none; 隐藏对象（用处更多更广泛）display：block；除了转换为块级元素之外，同时还有显示元素的意思。display隐藏元素后，不再占有原来位置visibilityvisibility：inherit原创 2021-10-29 11:25:03 · 238 阅读 · 0 评论 -
day06-定位
day06-定位position：static(静态定位)|relative（相对定位）|absolute（绝对定位）|fixed（固定定位）边偏移：top|bottom|left|rightposition：relativetop:100px;1)静态定位static（了解）（没有边偏移）2）相对定位relative（重要）（参照点：他原来的位置；不脱标，保留原来位置；配合相对定位使用，给绝对定位当爹）3）绝对定位：absolute（参照点：祖先元素；若无祖先元素，参考点是浏览器；若祖先原创 2021-10-28 11:09:25 · 97 阅读 · 0 评论 -
web开发代码规范和类的命名规范（pink老师笔记——品学优购项目）
代码规范1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代原创 2021-10-27 15:51:14 · 383 阅读 · 0 评论 -
web前端中的图片格式和用途
原创 2021-10-21 18:07:19 · 253 阅读 · 0 评论 -
web中的清除浮动方法
方法一：父类添加after伪元素法/* 样式法：清除浮动类似于结构中的隔墙法 */ css代码.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7专有 */ *zoom: 1; }...原创 2021-10-21 17:27:17 · 1291 阅读 · 0 评论 -
css标签优先级，背景标签总结
原创 2021-10-15 15:17:28 · 153 阅读 · 0 评论 -
Vue爬坑之imported multiple times
解决方案：放在同一个括号里导入：这样就可以了注意：ESLint语法比较严格，所以一定要在每个","后面加上空格，如上如蓝色框内所示原创 2021-06-22 11:29:37 · 270 阅读 · 0 评论 -
TypeError: this.getOptions is not a function at Object.lessLoader 在vue项目中less报错问题解决
TypeError: this.getOptions is not a function at Object.lessLoader 在vue项目中less报错问题解决less版本问题，卸载重新安装指定版本号npm install less@3.9.0 -snpm install less-loader@5.0.0 -s1、先把之前的高版本less和lessloader卸载掉2、需要进入到工作目录下，按下shift+鼠标右键，进入到shell运行窗口输入npm install less@3.9.0原创 2021-06-22 09:58:39 · 777 阅读 · 0 评论 -
Javascript保留字与关键字
原创 2021-06-19 17:39:03 · 221 阅读 · 0 评论 -
HTML中的JavaScript
原创 2021-06-19 16:52:16 · 177 阅读 · 0 评论 -
什么是Javascript？
原创 2021-06-19 16:39:38 · 145 阅读 · 0 评论 -
JSON.stringify 函数 (JavaScript)
JSON.stringify 函数 (JavaScript) 在bsrck项目中，使用jQuery.Form.js的ajaxSubmit时，遇到有文件上传的form提交，在firefox和chrome浏览器中测试，报Bad Request的错误，经查代码后发现是需要对form添加ENCTYPE="multipart/form-data"属性，在IE浏览器下正常，按正常使用规则是需要添加此属性。具体原因需要抓取字节流，确认技术细节；在寻找技术方案的时候，发现了此JSON.stringif方法，查些资料在原创 2021-06-11 17:35:49 · 610 阅读 · 1 评论