- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端学习笔记：移动端布局之flex布局
flex布局flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。通过给父盒子添加flex属性，来控制子盒子的位置和排列方式当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效flex布局=伸缩布局=弹性布局=伸缩盒布局=弹性盒布局...
2022-02-17 15:49:04
297
原创 前端学习笔记：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。第一步：先删除vue项目下的node_modules文件第二步：将项目在集成终端中打开 输入：npm install 或者cnpm install然后重新运行项目，问题解决...
2022-02-17 15:46:38
402
原创 前端学习笔记：CSS3新增3D转换
3D转换transfrom目录前端开发中的三维坐标系位置一、透视(视距)和3D呈现1. 透视(视距) perspective2. 3D呈现transform-style二、3D位移(移动)：translate3d(x,y,z)1. translateZ2. translate3d(x,y,z)三、3D旋转：rotate3d(x,y,z,deg)前端开发中的三维坐标系位置x轴：水平向右 注意：x右边是正值，左边是负值y轴：垂直向下 注意：y下面是正值，上面是负值z轴：垂直屏幕 注意：往外面是正值.
2022-02-05 17:26:27
498
原创 前端学习笔记：动画的基本使用
一、制作动画分两步：先定义后调用<title>CSS3动画基本使用</title> <style> /* 我们想页面一打开，一个盒子就从左边走到右边 */ /* 1.定义动画 move是动画名称 */ @keyframes move { /* 开始状态 */ 0% { transform: translateX(0px);
2022-02-05 15:59:46
604
原创 前端学习笔记：meta视口标签及二倍精灵图用法
一、meta视口标签 <title>meta视口标签</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scalable=no">width=device-width,视图宽度和设备保持一致initial-scale=1.0, 视口的默认缩放比例1.0max
2022-01-31 16:12:56
830
原创 前端学习笔记：入门Vue，项目搭建，脚手架搭建
为什么需要搭建脚手架？vue脚手架可以帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥。第一步node.jsnode.js官网下载，官网地址为：http://nodejs.cn/download/Windows系统一般下载 Windows 安装包 (.msi)，下载直接安装配置node.js环境变量，新建系统环境变量，命名NODE_PATH添加安装路径
2022-01-31 15:41:44
695
原创 前端学习笔记：CSS属性书写顺序
CSS属性书写顺序1.布局定位属性：display / position / float / clear / visibility / overflow2.自身属性：width / height / margin / padding / border / background3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word4.其他属性(CSS3)：content
2022-01-25 15:12:46
154
原创 前端学习笔记：CSS3之2D转换transform
2D 转换transformtranslate(x, y) 移动（位移）rotate(度数) 旋转sacle(x, y) 缩放设置转换中心点 transform-origin: (x y);一、移动translate改变元素在页面中的位置，类似定位。1.语法transform: translate(x, y); 或者分开写transform: translateX(n);transform: translateY(n);2.重点定义2D转换中的移动，沿着X和Y轴移动元素t
2022-01-25 15:12:27
255
原创 前端学习笔记：CSS3新增--笔记来自B站黑马前端Pink老师学习视频（部分）
CSS3新增–笔记来自B站黑马前端Pink老师学习视频目录CSS3新增--笔记来自B站黑马前端Pink老师学习视频一、属性选择器二、结构伪类选择器1.nth-child选择器2.nth-of-type选择器3.nth-child和nth-of-type的区别三、伪元素选择器（重点）四、盒子模型border-box五、模糊处理六、计算盒子宽度calc函数七、属性过渡（重点）一、属性选择器属性选择器可以根据元素的特定属性来选择元素，这样就不用借助于类或者id选择器<title>CSS3新增属
2022-01-09 20:02:14
1276
原创 前端学习笔记：SEO优化-网站TDK三大标签及LOGO优化
网站TDK三大标签SEO优化一、Title网站标题title 具有不可替代性，是我们内页的第一卦重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）例如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站二、Description网站说明简要说明我们网站主要是做什么的，description 作为网站的总体业务和主题概括例如
2022-01-09 14:03:26
517
原创 前端学习笔记：HTML5新增
HTML5新增一、HTML5新增语义化标签<title>HTML5新增语义化标签</title> <style> header { width: 800px; height: 300px; background-color: pink; border-radius: 15px; margin: 0 auto;
2022-01-07 16:17:49
377
原创 前端学习笔记：字体图标的下载网址
字体图标的下载icomoon字库 http://icomoon.io阿里iconfont字库 http://www.iconfont.cn/选择字体图标后下载压缩包，解压后把fonts这个文件夹单独复制到根目录下，在< style>标签中添加@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?4ubngm'); src: url('fonts/icomoon.eot?4ubngm#iefix
2022-01-07 14:37:29
921
原创 前端学习笔记：溢出文字显示省略号方法（复制粘贴直接使用）
1、单行文字溢出显示省略号<style> div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; /* 如果文字显示不开，则默认自动换行 */ /* white-space: normal; */ /* 单行溢出文
2022-01-02 15:51:35
2981
原创 前端学习笔记：用户界面样式-鼠标样式
鼠标样式 cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状li { cursor: pointer; }<ul> <li style="cursor: default;">我是默认的小白鼠标样式</li> <li style="cursor: pointer;">我是鼠标小手样式</li> <li style="cursor: move;">我是鼠标移动样
2022-01-02 15:42:40
407
原创 前端学习笔记：取消表单轮廓和防止拖拽文本域
取消表单轮廓和防止拖拽文本域<style> input, textarea { /* 取消表单轮廓 */ outline: none; } textarea { /* 防止拖拽文本域 */ resize: none; }</style>...
2022-01-02 15:38:46
345
原创 前端学习笔记：使用vertical-align实现图片文字垂直居中对齐
vertical-align一、实现图片文字垂直居中对齐图片来自百度图片，侵删<style> /* vertical-align是行内元素或者行内块元素的专属 */ img { /* 1.默认是基线对齐 */ /* 2.底部对齐 */ /* vertical-align: bottom; */ /* 3.图片文字居中对齐 */ vertic
2022-01-02 15:36:25
919
原创 前端学习笔记：显示隐藏元素display、visibility及overflow的使用
显示隐藏元素的使用1、display 属性/* 元素隐藏 display隐藏元素后，不再占有原来的位置*/ display: none; /* 元素出现 */ display: block;2、visibility 属性/* 元素隐藏 visibility隐藏元素后，继续占有原来的位置*/ visibility: hidden; /* 元素可视 */ vi
2021-12-31 15:29:44
532
原创 前端学习笔记：定位特殊性
绝对定位和固定定位也和浮动类似行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小脱标的盒子不会触发外边距塌陷浮动元素、绝对定位和固定定位元素都不会触发外边距合并的问题绝对定位或者固定定位会完全压住盒子，浮动不会，浮动产生的最初目的是实现文字环绕效果文字环绕效果（即 图片不会压住文字）截图来自百度百科，侵删...
2021-12-30 20:06:18
161
原创 前端学习笔记：网页布局总结
网页布局总结一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局2.浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局3.定位定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局...
2021-12-30 19:50:15
219
原创 前端学习笔记：如何让绝对定位的盒子水平垂直居中
绝对定位的盒子水平垂直居中加了绝对定位的盒子不能通过 margin : 0 auto 水平居中，但是可以通过以下方法实现水平垂直居中① left : 50% ; 让盒子左侧移动到父级元素的水平中心位置② margin-left : -100px ; 让盒子向左移动自身宽度的一半...
2021-12-30 19:30:21
243
原创 前端学习笔记：定位叠放次序 z-index
定位叠放次序 z-index在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z轴）选择器 { z-index : 1; }数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性/* 加了定位的盒子，谁的z-index值大，谁就在上方 */ z-index: 1;...
2021-12-29 13:13:07
211
原创 前端学习笔记：定位
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。1.定位模式通过CSS的position属性来设置值语义static静态定位relative相对定位absolue绝对定位fixed固定定位1.1静态定位 static选择器 { position: static; }静态定位按照标准流特性摆放位置，它没有边
2021-12-29 12:48:57
76
原创 前端学习笔记：浮动知识点
浮动概念：可以让多个块级元素一行内排列一、浮动特性浮动元素会脱离标准流浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性浮动的盒子不再保留原先的位置 二、使用浮动布局注意事项浮动和标准流的父盒子搭配先用标准的父元素排列上下位置，之后内部元素采用浮动排列左右位置一个元素浮动了，理论上其余的兄弟元素也要浮动浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流三、清除浮动方法额外标签法也称为隔墙法，是W3C推荐的做法，额外标签法会在浮动元素末尾添加一个
2021-08-30 14:19:14
233
原创 前端学习笔记：盒子阴影和文字阴影
盒子阴影语法：box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow必需。水平阴影的位置，允许负值v-shadow必需。垂直阴影的位置，允许负值blur可选。模糊距离spread可选。阴影的尺寸color可选。阴影的颜色。参阅CSS颜色值inset可选。将外部阴影（outset）改为内部阴影注意：1.默认的是外阴影（outset），但是不可以写这个单词，
2021-08-27 20:11:00
135
1原创 前端学习笔记：盒子模型内边距padding复合属性
值的个数表达意思padding：5px;1个值，代表上下左右都有5像素内边距padding：5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素padding：5px 10px 20px;3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素padding：5px 10px 20px 30px;4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距是30像素 顺时针...
2021-08-20 15:27:39
427
原创 前端学习笔记：CSS选择器权重问题
选择器选择器权重继承 或者 *0，0，0，0元素选择器0，0，0，1类选择器，伪类选择器0，0，1，0ID选择器0，1，0，0行内样式 style=""1，0，0，0!important 重要的∞无穷大使用如下：<title>权重叠加</title> <!-- 权重叠加计算结果不进位，权重不参与继承 --> <style> /* 元素选择器 权重0，0，0，0...
2021-08-19 22:09:26
124
原创 前端学习笔记：background背景总结
属性作用值background-color背景颜色预定义的颜色值/十六进制/RGB代码background-image背景图片url(图片路径)background-repeat是否平铺repeat /no-repeat /repeat-x /repeat-ybackground-position背景位置length/position 分别是x和y坐标background-attachment背景附着scroll(背景滚动) / fixed(...
2021-08-19 16:00:08
135
原创 Git基础
一、Git使用前配置1.配置提交人姓名：git config --global user.name XXXX2.配置提交人邮箱：git config --global user.email XXXX@XX.XX3.查看git配置信息：git config --list注意1.如果要对配置信息进行修改，重复上述命令即可。2.配置只需要执行一次。二、提交步骤1.初始化git仓库：git init2.查看文件状态：git status3.追踪文件：git add XXX.
2021-08-19 15:46:43
58
原创 前端学习笔记：CSS的元素显示模式
元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签行内元素一行可以放多个行内元素不可以设置宽度高度它本身内容的宽度容纳文本或其他行内元素行内块元素一行放多个行内块元素可以设置宽度高度它本身内容的宽度...
2021-08-17 00:30:13
43
原创 前端学习笔记：Emmet语法
快速生成HTML结构语法生成标签 div*3父子级关系> ul>li兄弟关系+ div+p生成带有类名或者id名字的标签标签名.demo或标签名#two自增符号$ div.demo$5生成标签内部内容 标签名{内容}div{我喜欢你}快速生成CSS样式首字母然后Tab...
2021-08-14 11:32:43
80
原创 前端学习笔记：input标签及其属性
type属性的使用属性值描述button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）checkbox定义复选框file定义输入字段和“浏览”按钮，供文件上传hidden定义隐藏的输入字段image定义图像形式的提交按钮password定义密码字段。该字段中的字符被掩码radio定义单选按钮reset定义重置按钮，重置按钮会清除表单中的所有数据submit定义提交按钮，提交按钮会把表单数据发送到服务器
2021-08-07 14:12:48
474
原创 前端学习笔记：表格标签及其属性
<th>表头单元格，字体加粗居中显示<table align=“left(左对齐) center(居中对齐) right(右对齐)”><table border=1>
2021-08-05 20:23:42
92
原创 前端学习笔记：＜a＞＜/a＞超链接标签服用方式
属性：href是必需属性target=“目标窗口的弹出方式”，_self默认覆盖跳转，_blank打开新窗口外部链接：< a href=“http://www.”>文字文本或图像< /a>内部链接：html页面之间的跳转< a href=“gongshi.html”> < /a>空链接：如果没有确定好跳转对象< a href="#"> < /a>下载链接：如果href里面地址是一个文件或者压缩包，会下载文件 &n
2021-08-02 21:02:52
247
原创 前端学习笔记：相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础同一级：< img src=“img.jpg”/>下一级：< img src=“image/img.jpg”/>上一级：< img src=" . ./img.jpg"/>绝对路径：换台电脑就不起作用了，除非设置一样的文件位置< img src=“E:\项目测试\img.jpg” />...
2021-08-02 11:23:35
332
原创 前端学习笔记：关于img图像标签的属性使用
图像标签:<img src=“图片的路径” / >属性使用不分先后顺序src=“图片的路径”，src是必须属性alt=“替换文本，当图像不能正常显示时显示的文字”title=“提示文本，鼠标放到图像上时显示的文字”width=“设置图像的宽度”height=“设置图像的高度”宽度和高度一般只修改一个就可以了，另外没有设置的宽度或高度属性将会自动等比例改变，这样就不会导致图片失真border=“设置图像的边框粗细”...
2021-08-01 21:50:43
1498
原创 前端学习笔记：刚安装Visual Studio Code，怎么安装中文版插件
左侧打开扩展商店，搜索框输入“chinese”，点击安装即可问题解决
2021-07-31 20:06:36
139
原创 前端学习笔记：刚安装Visual Studio Code，鼠标右键打开没有Open in Browser
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-07-31 19:55:16
2307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人