前端
文章平均质量分 59
sinat_37138973
这个作者很懒,什么都没留下…
展开
-
HTML5学习笔记(五)
CSS3新增了一种布局方式——多列布局。使用多列布局,可以轻松实现类似报纸那样的布局。多列布局的应用非常广泛,像各大电商网站、素材网站中常见的“瀑布流效果”。column-count属性来定义多列布局的列数。 column-width属性来定义多列布局中每一列的宽度。 column-gap属性来定义列与列之间的间距。column-rule属性来定义列与列之间的边框样式。column-span属性来实现多列布局的跨列效果。这个属性跟表格中的colspan属性类似。 所有的滤镜效果都是使用filter属原创 2022-11-28 10:02:47 · 944 阅读 · 0 评论 -
CSS3 动画
在CSS3中,动画效果包括3个部分:变形(transform)、过渡(transition)、动画(animation)原创 2022-11-25 12:14:33 · 676 阅读 · 1 评论 -
HTML5学习笔记(四)
在CSS3中,增加了大量定义颜色方面样式的属性,主要包括以下3种。▶ opacity透明度▶ RGBA颜色▶ CSS3渐变。原创 2022-11-25 12:03:38 · 1351 阅读 · 0 评论 -
HTML5学习笔记(三)
HTML5新增了一个离线存储的API,用于实现本地数据的缓存,从而使得开发离线应用成为可能。所谓“离线存储”,指的是建立一个URL列表,该列表可以包含HTML文件、CSS文件、JavaScript文件和图片等。当与服务器建立连接时,浏览器会在本地缓存URL列表中的文件;当与服务器断开连接时,浏览器将调用缓存的文件来支持页面展示。想要实现离线存储,我们一般需要以下3步。① 配置httpd.conf文件。原创 2022-11-25 10:59:46 · 724 阅读 · 0 评论 -
HTML5学习笔记(二)
HTML5新增了很多公共属性。▶ hidden▶ data-*我们可以使用hidden属性来显示或隐藏某一个元素。在HTML5中,我们可以使用draggable属性来定义某一个元素是否可以被拖动。draggable有两个属性值:true和false。默认值为false。其实draggable="true"只能定义元素可以被拖动这一个行为,拖动后并不会改变元素的位置。在HTML5中,我们可以使用contenteditable属性来定义某个元素的内容是否可以被编辑。原创 2022-11-23 22:55:32 · 2007 阅读 · 0 评论 -
HTML5学习笔记(一)
XHTML,全称“EXtensible HyperText Mark-up Language(扩展的超文本标记语言)”,它是XML风格的HTML4.01,我们可以称之为更严格、更纯净的HTML4.01。HTML语法书写比较松散,比较利于开发者编写。但是对于机器如电脑、手机等来说,语法越松散,处理起来越困难。因此,为了让机器更好地处理HTML,才在HTML的基础上引入了XHTML。HTML指的是HTML4.01,XHTML是XML风格的HTML4.01,它是HTML的过渡版本。原创 2022-11-23 22:09:49 · 765 阅读 · 0 评论 -
常用PS网站及工具
BgRemover去除背景色BgRemover-在线图片去底工具-背景变透明|图片底色去除去掉改图宝修改图片尺寸改图宝 - 在线修改照片大小尺寸工具度度网修改图片颜色、加水印、调大小。https://imagecompressor.com/zh/https://www.yasuotu.com/editor图片压缩在线工具:在线图片优化器windows版本软件:ceasium。在线PS去水印(污点修复)修改颜色(ctrl+U 色相和饱原创 2022-02-21 12:23:12 · 540 阅读 · 0 评论 -
Vue传参
1、子组件传参给父组件子组件调用父组件相应方法:this.$emit('get-dzz-node', id)父组件:<org @get-dzz-node="getDzzNode"/>getDzzNode(nodeId) { this.dzzId = nodeId // console.log('dzzId:' + this.dzzId)}2、父组件值变化,子组件监控值的变化下面是子组件部分代码:export defaul..原创 2022-01-10 18:01:05 · 300 阅读 · 0 评论 -
Vue页面进入根据分辨率宽高比调整可视区域
1、vue基础dom:<template> <div class="visu-body"> <div class="visu-container" id="visu-container"> </div> </div></template>2、在mouted中加载方法:mounted() { const that = this that.$nextTick(() => {原创 2022-01-10 17:46:53 · 753 阅读 · 0 评论 -
ElementUI 引入Jquery
1、安装jquerynpm install jquery --save2、vue.config.js添加配置: configureWebpack: { plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', 'window.jQuery': 'jquery' }) ] },3、在vue页面中引用:impor原创 2022-01-10 17:40:32 · 1935 阅读 · 0 评论 -
Echarts Map 连接线
效果图:实现代码:var geoCoordMap = { 上海: [121.4648, 31.2891], 东莞: [113.8953, 22.901], 东营: [118.7073, 37.5513], 中山: [113.4229, 22.478], 临汾: [111.4783, 36.1615], 临沂: [118.3118, 35.2936], 丹东: [124.541, 40.4242], 丽水: [119.5642, 28.1854], 乌鲁木齐: [87.9.原创 2021-09-06 17:14:08 · 2602 阅读 · 1 评论 -
CSS3
基础参考:https://www.runoob.com/css3/css3-tutorial.html动画参考:https://www.cnblogs.com/shenjie0507/p/9019306.html原创 2021-08-29 15:30:42 · 71 阅读 · 0 评论 -
Echarts Option
图表动画animation: true, // 默认是true 是否开启动画animationDuration: 4000, // 动画时长 msanimationEasing: 'quarticInOut', // 缓动动画animationThreshold: 10, // 动画阈值 单种动画超过10 就会关闭动画图例legend: { orient: 'vertical', x: 'right', y: 'center', textStyle: { fontSiz原创 2021-08-29 11:12:57 · 1032 阅读 · 0 评论 -
Vue使用总结
公用css创建scss文件:$menuHover:#DCEDFF;$menuHoverText:#56595D;在vue文件中引入:<style lang="scss" scoped>@import "~@/styles/variables.scss";.img{ color: $visuColorWhite;}</style>vue文件中scss中引入图片background-image: url('~@/assets/module_ima原创 2021-08-28 22:12:21 · 558 阅读 · 0 评论 -
Echarts使用总结(一)
Vue中引入Echarts安装:npm install echarts -Svue页面中,如果是V5.0之前的版本,引入的方式:import echarts from 'echarts'如果是V5.0之后的版本,页面中的引入方式:import * as echarts from 'echarts'引入echarts的theme:require('echarts/theme/macarons') // echarts theme具体使用:const chart原创 2021-08-28 22:00:56 · 3105 阅读 · 0 评论 -
vue插件使用(一)
wowjs 动画安装:npm install wowjs --save -devmain.js中安装animate.css:import 'wowjs/css/libs/animate.css'在需要使用的文件中局部引入wowjs,并在mounted实例化wow这个对象:<script> import { WOW } from 'wowjs'export default { name: 'Vue', data() { return {} }原创 2021-08-28 20:39:21 · 417 阅读 · 0 评论 -
CSS使用总结
阴影效果box-shadow: #aaa 0 0 10px;实现hover的动画效果一般通过:.class :before{}.class :after{}和div:hover:before{}div:hover:after{}实现hover的元素显示隐藏Hover到父元素显示父元素中的隐藏子元素:子元素css:.sub{ width: 100%; height: 100%; top: 0; left: 0;原创 2021-08-28 20:18:02 · 265 阅读 · 0 评论 -
JS 变量提升
Javascript 是一种弱类型、动态的、解释型的脚本语言。弱类型:类型检查不严格,偏向于容忍隐式类型转换。强类型:类型检查严格,偏向于不容忍隐式类型转换。动态类型:运行的时候执行类型检查。静态类型:编译的时候就知道每个变量的类型。解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好。编译型:程序在执行之前需要一个专门的翻...转载 2018-10-09 10:41:50 · 108 阅读 · 0 评论 -
Note.js的前世今生
在Netscape设计出JavaScript后的短短几个月,JavaScript事实上已经是前端开发的唯一标准。后来,微软通过IE击败了Netscape后一统桌面,结果几年时间,浏览器毫无进步。(2001年推出的古老的IE 6到今天仍然有人在使用!)没有竞争就没有发展。微软认为IE6浏览器已经非常完善,几乎没有可改进之处,然后解散了IE6开发团队!而Google却认为支持现代Web应用的新一代浏览...转载 2018-05-28 17:47:45 · 3408 阅读 · 0 评论 -
IOS微信浏览器返回事件popstate监听
问题:通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微信,是会立即触发popstate事件,导致直接从C页面跳转到A页面,其他的支付宝(安卓、IOS)、微信(安卓)都是可以,就是微信IOS版不行。经过查找相关资料,选择了一个方法,不过有点弊端,但是并不影响操作,转载 2018-01-18 17:28:37 · 6247 阅读 · 2 评论 -
如何构建前端代码
基本认识开发环境和线上环境的区别在很久以前,前端的部署其实比较简单,开发环境下,静态资源往服务器上面一扔就ok了,如果考虑下优化或者代码保护,也只是加一个代码压缩和混淆。没错,刚入行的时候我就是这么干的。。。但是随着前端复杂度的发展,上面的做法已经无法满足需求了,特别是AMD,CMD概念的引入,打包合并就变成一项基本工作了。举一个requirejs的例子,在一个复杂点的前端系统中,你能想象不打包直接转载 2017-06-03 17:16:36 · 716 阅读 · 0 评论