- 博客(29)
- 收藏
- 关注
原创 META Tag详解
meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。一、meta标签的组成meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。1、name属性name属性主要用于描述网页,与之对应的属性值为
2022-02-14 13:49:19
886
原创 HTML 中 META tag
meta是用来在HTML文档中模拟HTTP协议的响应头报文。 meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。 name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。 这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键...
2022-02-14 10:34:58
246
原创 jq轮播图实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝滑动轮播案例</title> <script src="./js/jquery-2.1.4.min.js"></script> <style type="text/css"> *{ paddi
2021-12-03 09:55:47
75
原创 移动端网页通过css或js判断手机横屏还是竖屏
如何区分横屏和竖屏, 在CSS中?//竖屏@media screen and (orientation:portrait) { div { background-color:red; }}//横屏@media screen and (orientation:landscape) { div { background-color:red; }}如何区分横屏和竖屏, 在JS中?...
2021-11-25 17:12:14
314
原创 链接分享的图片的修改
当我们钉钉分享或是FaceBook分享我们的资源链接的时候,经常会被默认展示页面中第一张可见图片,于是就会有需要更改这张展示图片的需求,解决办法如下:<meta property="og:image" content="https://scontent-sea1-1.xx.fbcdn.net/hphotos-xap1/t39.2178-6/851565_496755187057665_544240989_n.jpg" />将这段代码插入到你页面的head标签内,content内的图片链接地
2021-11-18 12:26:59
535
原创 如何运行vue打包后的dist文件夹下的项目
1.需要安装http-server通过npm install -g http-server 进行全局安装2. 通过命令行进入到dist文件夹运行http-server,这样就可简单的本地启动一个服务了。
2021-11-11 11:25:46
671
原创 js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了.解决方法:首先,在head标签里面先引用一个通用的CSS文件,如下: <link href="Styles/Style.css" id="css" rel="stylesheet" type="text/css" />这时候,你会发现,这个和平常引用的CSS文件有些许不同,那就是,多加了一个ID,这里面就增加了一个i
2021-11-08 11:02:13
367
原创 VUE显示消息提示框功能
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .toast { position: fixed; z-index: 2000; left: 50%; top: 45%; transition: all .5s;.
2021-10-14 15:12:12
2137
1
原创 Duplicate keys detected: ‘gggggg‘. This may cause an update error.的解决办法
vue项目中报了一个这样的错:Duplicate keys detected: ‘gggggg’. This may cause an update error.虽然不影响使用吧,但是一直冒红也不太好吧,还是要解决一下的。通过科学上网,说是v-for循环里,key值可能重复了,所以会报这个错。查看了下自己的代码,页面果然有v-for循环因为里面的name有重复的,所以。。。。。。。。。key值是必须唯一的,如果重复就会报错可以把key值改为index(其实就是用索引做key值),就可以避免这个
2021-09-17 15:51:16
252
原创 position:sticky实现粘性布局
生效规则position:sticky 的生效是有一定的限制的,总结如下:须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:如果
2021-09-07 09:52:33
145
原创 谷歌浏览器截长图
使用浏览器浏览页面的时候,有时候会想把网页截取下来,但是使用平常的截图工具只能截取一小部分,此处来告诉打下如何利用谷歌浏览器截长图。步骤:(1): 在浏览器的右上角处找到三个竖着的小黑点按钮,点击选择该按钮。(2):在弹出来的下拉菜单中选择“更多工具”功能按钮,将鼠标放置于该按钮处会弹出一个二级菜单。(3):在二级菜单中找到“开发者工具”,鼠标左键单击选择该功能按钮,进入开发者工具操作中。(另外也可以按F12进入开发者工具)( 4)在该页面中按快捷键“Ctrl+Shift+P”,开发者工具的窗
2021-09-03 11:04:37
470
原创 elementui中的el-input回显成功后input框不能进行编辑的问题
通过接口拿到数据后,input框无法进行编辑 <el-dialog v-dialogDrag title="RPA" :visible.sync="accountVisible" width="30%"> <el-form ref="accountForm" :model="accountForm" :rules="rules" label-width="200px"> <el-form-item label="Channel" prop=
2021-08-28 10:20:29
3937
1
原创 用javascript获得地址栏的各个部分
内容扩展对于像下面这样的网址http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere我们可以用javascript获得其中的各个部分1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏)本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.locati
2021-08-25 17:33:34
245
原创 解决H5移动端点击输入框时,弹起的输入法会将底部的固定按钮顶起来
在写一个H5页面的时候,中间有输入框,底部有固定按钮。但是在点击输入框时,你就会看到一个奇怪的事情,我fixed固定在底部的部分被输入法顶起来了(图片先欠着)。下面给大家提供一种解决的办法,仅供参考。//navigator.userAgent.indexOf用来判断浏览器类型var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;if (i
2021-08-25 10:07:08
2394
原创 overflow的属性介绍
关于overflow的其他属性的介绍:overflow 一共有5个属性。1、overflow:auto ;内容会被修剪,超出设置的宽高后会出现滚动条2、overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置3、overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。4、overflow:hidden;内容被修剪,多余的内容被隐藏5、overflow:inherit;从父元素那里继承overflow的值。...
2021-08-25 09:50:36
12342
原创 vue倒计时组件(时分秒)
<template> <span>{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span></template><script> export default { data () { return { hour: '', minute: '',
2021-08-24 16:04:43
1527
原创 Uncaught SyntaxError: Unexpected token ‘<‘的解决办法
Uncaught SyntaxError: Unexpected token ‘<‘的解决办法
2021-08-13 10:54:28
465
原创 js中的splice的三种用法(删除,替换,插入)
splice有3个参数, splice(index,len,[item])其中,index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空splice作用:删除元素/插入元素/替换元素,该方法会改变原始数组el:arr = [‘1’,‘2’,‘3’,‘4’]作用1:删除元素 — [item]为0arr.splice(1,1) //[‘1’,‘3’,‘4’]arr.splice(1,0) //[‘1’,‘2’,‘3’,‘4
2021-08-05 17:31:30
25738
原创 vue3对开发环境,测试环境以及生产环境的相关配置
vue3对开发环境,测试环境以及生产环境的相关配置前言一、设置全局变量1.在根目录下新建以下三个文件二、在package.json中设置相应的代码3.统一设置接口总结前言我们在开发vue项目的时候,会分为开发环境,测试环境以及生产环境。为了方便项目日后的开发,我们要对不同环境进行相应的设置。一、设置全局变量1.在根目录下新建以下三个文件文件内的代码如下(示例):VUE_APP_CURRENTMODE='xxxxxxx' //不同环境的标识VUE_APP_URL='http://xxx
2021-08-03 16:12:46
617
原创 移动端1px解决方案border.css
@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft { position: relative;}.border::before,.border-top:.
2021-07-30 10:15:47
89
原创 JS获取屏幕的高度
1,获取屏幕的宽度: window.screen.width //整个屏幕的宽度2,获取屏幕的高度: window.screen.height //整个屏幕的高度3,获取网页的宽高(不含边框)。3,1 获取整个网页的宽度:document.body.scrollWidth3,2 获取整个网页的高度:document.body.scrollHeight4,获取body的宽高(不含边框)。4,1 获取整个body的宽度:document.body.clientWidth4,2 获取整
2021-07-29 10:17:51
11179
原创 12个有用的JavaScript数组技巧
12个有用的JavaScript数组技巧1、数组去重1、from()叠加new Set()方法字符串或数值型数组的去重可以直接使用from方法。var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];var uniquePlants = Array.from(new Set(plants)); console.log(uniquePlants); // [ 'Saturn
2021-07-12 10:41:05
99
原创 了解Git和GitHub
git首次安装的配置1)打开Git bash,你要哪个目录下面打开,无所谓2)输入一个命令,叫git config --list3)配置全局邮箱 打开Git bash,你要哪个目录下面打开,无所谓 输入一个命令:git config --global user.email “你的邮箱” 这个邮箱,理论上,你可以随便写一个,最好使用真实邮箱 最好使用你注册github的邮箱 没有任何提示,就表示配置OK4)配置全局用户名打开Git bash,你要哪个目录下面打开,无所谓输入一个命令:gi
2021-01-28 21:44:25
79
原创 正则表达式
正则表达式:作用: 1)验证某个字符串是否符合某个规则 验证 2)从一个字符串中获取符合某个规则的子串 捕获语法: 正则也是表达式,在这个表达式使用了特定的符号,我们需要学习一堆的符号创建正则有两种方式: 1)字面量创建 let reg = /abc/; 不能进行拼接 写元字符时 \x 2)使用new的形式创建正则 let reg = new RegExp("hello"); 能进行拼接
2021-01-28 20:18:53
210
原创 前端路由的两种模式: hash 模式和 history 模式
前端路由的两种模式: hash 模式和 history 模式随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行。从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下):1,记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态);2,可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态);作为开发者,要实现这两个
2021-01-12 20:15:43
122
原创 react中使用redux
现在我们如果在react中使用redux,有什么不足之处:1)不管是哪一个组件中使用仓库,都需要引入,不方便2)在组件中派发一个action时,需要引入store,还需要引入action理想情况下:1)把store在根组件中提供 所有的子组件都可以使用之2)如果把仓库中的状态映射成组件的属性 this.props.xxx3)如果把派发动作的操作映射成组件的方法下面介绍一下react-redux:介绍:这是一个独立的模块,这个模块,可以让我们非常方便的在react中使用redux安装:np
2021-01-09 16:08:17
212
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人