2020年08月_柚子·小哥哥

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月

原创判断网页是PC端或者是移动端

这个 if 判断要放在项目的全局组件，app.js 组件内 mounted() { this.isMobile(); }, methods: { // 添加判断方法 isMobile() { this.flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|F.

2020-08-31 10:18:45 321

原创清除浮动的五中的方法：

1、给浮动元素的父元素添加高度（扩展性不好）如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多2、 clear:both;在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元.

2020-08-30 20:46:59 194

原创 H5新增的特性：

一、html5什么是 HTML5H5 新增语义化标签H5 新增多媒体标签H5 新增 input 表单、表单属性1、什么是html5定义：html是万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次修改，用于取代html4于Xhtml的新一代标准版本，所以教html5Xhtml 可扩展超文本标记语言XHTML是一种增强了的HTML，他的扩展新和灵活性将适应未来网络应用的更多需求2、语义化标签： > 1、 <header

2020-08-30 19:49:54 350

原创 css3动画

什么是css 3 动画：动画是使元素从一种样式逐渐变化为另一种样式的效果。可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。Transitions其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。transf

2020-08-30 18:49:57 191

原创 css3 实现点赞动画

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 规定动画，改变y轴偏移

2020-08-29 14:28:36 1700

原创 github的基本【推送，分支，协同开发】的用法（图解）

1、使用github托管代码：1、第一步会创建仓库：在桌面上创建一个文件夹里面有一个记事本，用来测试时候可以把记事本推送仓库上；2、推送代码的详细步骤：在执行 git push origin -u master 会弹出一个弹框，让你输入你的github的账号和密码效果2、使用github共同开发项目的详细步骤：3、创建分支总结：托管仓库的详细步骤总结：1、 git init 【初始化仓库

2020-08-29 10:39:44 345

原创实现垂直水平居中的方法：

html 代码：<div class='box'></div>css <style> .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; backgrou..

2020-08-27 23:47:11 103

原创盒子模型：

什么是盒子模型：1、根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。2、标准盒模型、IE盒模型的区别如何使用盒子模型：每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。盒子模型对应的CSS属性为:width，hei

2020-08-26 00:14:54 334

原创 flex 布局：

弹性盒子的概念：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;

2020-08-25 22:30:32 113

原创代码必要的注我释

vue 文件方法声明的顺序：-components - props - data - computed - created - mounted - activited - update - beforeRouteUpdate - methods - watch;vue.js组件注释:/*! * Vue.js v2.6.10 * (c) 2014-2019 Evan You * Released under the MIT License. */JQ

2020-08-25 11:42:47 218

原创 github的基本用法和生成密钥（图解）:

git 使用前的配置:配置姓名的指令是: git config --global user.name配置邮箱的指令是： git config --global user.email查看 git 的配置信息: git config --listgit 推送代码的步骤:git init (初始化本地仓库)git status （查看提交的内容）git add （添加文件的名称，这里可以写成空格一个点）git commit -m “本次提交的信息” (可以注释本地提交的了什么)git re

2020-08-24 20:25:08 577

原创用vue自定义指令实现图片懒加载：

功能实现的核心思维：我是用的IntersectionObserver API去实现的；IntersectionObserver 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根，但是可以监视多个目标元素，以查看这些目标元素可见区域的变化；链接地址: IntersectionObserver API 封装的图片懒加载的核心代码；// 这个是引入的一张logon图片import img from "@/as

2020-08-09 20:15:14 1082

原创 element ui 组件的库的Backtop用法，以及没有效果的问题

Backtop组件的基本用法：js代码// 这个div标签叫作用是，滚动的到顶部的距离是以他基准，最好放到顶部<div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop>css代码：.container { width: 100%; /

2020-08-05 22:55:16 1196

原创了解BFC，看着一篇就够了

BFC 定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。Box：css布局的基本单位Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，

2020-08-01 21:35:22 146