- 博客(23)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 01 vue3.0注册全局组件
vue3.0注册全局组件import { createApp } from 'vue'import App from './App.vue'import HelloWorld from './components/HelloWorld.vue'const app = creatApp(App)// 第一个参数自定义即可app.component('helloworld', HelloWorld)vue3.0以下版本注册全局组件import Vue from 'vue'import Hel
2021-03-12 22:53:13
1112
2
原创 06 浏览器私有前缀
浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加私有前缀-moz-: 代表firefox浏览器私有属性-ms-: 代表ie浏览器私有属性-webkit-: 代表safari, chrome私有属性-o-: 代表Opera私有属性提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;...
2021-02-23 15:05:40
98
原创 05 CSS3 3D转换
3D转换有什么特点?近大远小物体后面遮挡不可见三维坐标系三维坐标系其实就是指立体空间, 立体空间是由3个轴共同组成的x轴: 水平向右 注意: x右边是正值, 左边是负值y轴: 垂直向下 注意: y下面是正值, 上面是负值z轴: 垂直屏幕 注意: 往外面是正值, 往里面是负值主要知识点3D位移: translate3d(x, y, z);3D旋转: rotate3d(x, y, z);透视: perspective3D呈现: transfrom-style3D移动tr
2021-02-23 15:04:59
168
原创 04 动画
动画动画(animation)是CSS3种具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果动画的基本使用制作动画分为两步先定义动画再使用(调用)动画用keyframes定义动画(类似定义器选择器)语法:@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px;
2021-02-23 15:02:23
89
原创 03 CSS3 2D
CSS3 2D转换**转换(transform)**是CSS3中具有颠覆性的特征之一, 可以实现元素的唯一, 旋转, 缩放等特效效果转换(transform)可以简单理解为变形移动: translate旋转: rotate缩放: scale1) 2D转换之移动translate2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位语法:transform: translate(x, y); 或者分开写 -> transform: translateX(n) t
2021-02-23 15:01:06
75
原创 02 CSS3新特性
CSS3的现状新增的CSS3特性有兼容性问题， ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性CSS3新增选择器属性选择器结构伪类选择器伪元素选择器注意：类选择器， 属性选择器， 伪类选择器， 权重为101. 属性选择器属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助类或者id选择器用中括号[]权重为10下面权重为11 标签选择器+属性选择器input[value] { color
2021-02-23 14:59:01
117
原创 01 CSS高级
精灵图为什么需要精灵图?一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这将大大降低页面的加载速度因此, 为了有效地减少服务器接收和发送请求次数, 提高页面的加载速度, 出现了CSS精灵技术(也称为CSS Sprites, CSS雪碧)精灵图(spriyes)的使用(重要)使用精灵图核心:精灵技术主要针对于背景图片使用. 就是把多个小背景图片整合到一张大图片中这个大图片也称为sprites精灵
2021-02-23 14:52:47
86
原创 12 css元素显示与隐藏
元素的显示与隐藏类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现本质: 让一个元素在页面中隐藏或者显示出来1. display显示隐藏display属性用于设置一个元素应如何显示display: none; 隐藏对象display: block; 除了转换为块级元素之外, 同时还有显示元素的意思display隐藏元素后, 不再占有原来的位置应用极为广泛, 搭配js可以做很多网页特效2. visibility显示隐藏visibility属性用于指定一个
2021-01-26 08:32:25
148
原创 11 网页布局-定位
定位为什么需要定位?提问: 以下情况使用标准流或者浮动能实现吗?某个元素可以自由的在一个盒子内移动位置, 并且压住其他盒子当我们滚动窗口时, 盒子是固定在屏幕某个位置的以上效果, 标准流或浮动都无法快速实现, 此时需要定位来实现所以:浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置, 并且可以压住其他盒子定位组成定位: 将盒子定在某一个位置. 所以定位也是在摆盒子, 按照定位的方式移动盒子定
2021-01-26 08:32:14
175
原创 10 网页布局-浮动
浮动传统网页布局的三种方式CSS提供了三种传统布局方式(简单说, 就是盒子如何进行排列顺序)普通流(标准流/文档流)所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行, 从上往下顺序排列常用元素: div hr p h1~h6 ul ol dl form table行内元素会按照顺序, 从左到右排列, 碰到父元素边界会自动换行常用元素: span a i em一. 标准流标准流是最基本的布局方式注意: 实际开发中, 一个页面基本都包含了这三种布局方式(后面移动端学
2021-01-25 16:26:09
368
原创 09 css盒子模型
页面布局要学习三大核心:盒子模型, 浮动 和 定位学好盒子模型能非常好的帮助我们布局页面网页布局过程先准备好相关网页元素, 网页元素基本都是盒子Box利用CSS设置好盒子样式, 然后摆放到相应位置往盒子里面装内容网页布局的核心: 就是利用CSS摆盒子盒子模型border边框边框粗细border-width: 5px;边框样式border-style: solid/dashed/dotted;边框颜色border-color: red;简写:- `borde
2021-01-25 16:13:02
70
原创 08 css特性
三大特性层叠性相同标签名, 标签内部标签样式冲突, 遵循就近原则样式不冲突, 不会层叠继承性子标签会继承父标签的某些样式恰当使用继承可以简化代码, 降低CSS样式的复杂性子元素可以继承父元素的样式(text-, font-, line-这些元素开头的 可以继承, 以及color属性行高可以跟单位也可以不跟单位优先级党同一个元素指定多个选择器, 就会有优先级的产生选择器相同, 则执行层叠性选择器不同, 则根据选择器权重执行[外链图片转存失败,源站可能有防盗链机制,建议将图
2021-01-25 16:10:31
57
原创 07 css背景
背景背景颜色一般情况下元素背景颜色默认值是transparent(透明的)background-color: red;背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片background-image: url();优点是非常便于控制位置(精灵图也是一种运用场景)背景平铺如果需要在HTML页面上对背景图像进行平铺, 可以是使用background-repeat属性background-repeat: repeat|no-repeat|repeat-x|repe
2021-01-25 16:09:40
71
原创 06 css元素的显示模式
什么是元素的显示模式元素显示模式的分类元素显示模式转换元素显示模式就是元素(标签)以什么方式进行显示HTML元素一般分为块元素和行内元素两种类型块元素常见块元素<h1>~<h6> <p> <div> <ul> <ol> <li>等块元素特点:比较霸道, 自己独占一行高度, 宽度, 外边距以及内边距都可以控制宽度默认是容器(父级宽度)的100%是一个容器及盒子, 里面可以放行内或者块级元素注.
2021-01-25 16:08:54
85
2
原创 05 css的复合选择器
后代选择器（常用重要）后代选择器又称为包含选择器， 可以选择父元素里面的子元素，中间用逗号分隔当标签发生嵌套时，内部标签就成为外部标签的后代元素1 元素2 { 样式声明 }上述语法表示选择元素1里面的所有元素2元素2可以是儿子， 也可以是孙子登， 只要是元素1的后代即可元素1和元素2可以是任意基础选择器子选择器（重要）子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素， 和孙子无关元素1>元素2 { 样式声明 }上述语法表示选择元素1里面左右直接后代（
2021-01-25 16:07:29
110
原创 04 css Emmet语法
Emmet语法Emmet语法前身是Zen coding, 它使用缩写, 来提高html/css的编写速度, VsCode内部已经集成该语法快速生成HTML结构语法快速生成CSS样式语法快速生成HTML结构语法生成标签,直接输入标签名 按tab键即可, 比如div 然后tab键,就可以生成<div></div>生成多个相同标签, 加上*数字即可生成有父子级关系的标签, 用> 比如 ul>li生成有兄弟关系的标签, 用+ 比如div+p生成带有.
2021-01-25 16:06:27
89
原创 03 css引入方式
CSS样式表CSS的三种样式表按照CSS样式书写的位置(或者音符的方式), CSS样式表可以分为三大类1. 行内样式表(行内式)在元素标签内部的style属性中设定CSS样式适合于修改简单样式 <div style="color: red; font-size: 12px;">小屁熊</div>2. 内部样式表(嵌入式)单独把所有CSS样式抽取出来, 单独放在一个<style>标签中<style> div {
2021-01-25 16:05:36
254
原创 02 css属性
1. 字体属性Fonts用于定义字体系列、大小、粗细、和文字样式（如斜体）字体系列font-family各字体之间用,隔开写多个字体,兼容性会好一些 body { /* font-family: '微软雅黑'; 中文名, 下面的是英文名,一样的效果,常用英文名*/ /* font-family: 'Microsoft YaHei'; */ font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif;}字体大小font
2021-01-25 16:04:30
243
原创 01 css语法
style通常写在head中样式格式书写紧凑模式展开模式（常用）样式大小写风格样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外样式空格风格h3 { color: pink;}属性值前面，冒号后面，保留一个空格选择器（标签）和大括号中间保留空格选择器1. 基础选择器：单个选择器，包括标签选择器、类选择器、id选择器和通配符选择器（*）标签选择器优点：能快速为页面中同类型的标签统一设置样式缺点：不能设计差异化样式，只能选择全部的
2021-01-25 16:03:00
74
原创 引用传递
引用传递在js中，只有基本类型是值传递（undefined null boolean number string），其他类型赋值时均为引用传递。今天写程序由于失误把ArrayBuffer类型数据赋值给一个变量，改变了变量内容，导致页面显示出问题，很基础的问题，挺深刻的教训，不过还好对引用传递有了更深的认识...
2020-03-04 16:58:50
99
原创 vue打包
vue:打包指令： npm run build打包过程：需修改三处。关键文件： config文件夹下index.js文件修改1：修改2、3：打包注意项：打包生成的dist文件中static文件夹下的js文件夹中的app.js文件每次打包名字都不重复，导致 => 传入服务器一段时间后，文件变的很大。建议：需要手动删除原dist文件夹，重新上传dist文件夹...
2020-02-26 15:07:23
278
原创 深拷贝 浅拷贝
拷贝：深拷贝 , 指的是二者毫无关系，但数据内容一样，类似值传递浅拷贝 ，里面存放的内容和以前的是同一个地址，修改内容会改变原来的值，类似引用传递（指针传递）...
2020-02-14 15:12:32
70
原创 去除VsCode代码前面的小点点
去除VsCode代码前面的小点点步骤：File ->Preferences -> Setting搜索RenderWhitespace将Text Editor下的Editor: Render Whitespace改为none或selection附图片
2020-01-14 09:55:30
3935
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人