前端技术
关注
分享
扫一扫
彩舒
愿意尝试一切新鲜事物。
github: https://github.com/caishu1995
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
html-svg动画-1.1
首先感谢 https://segmentfault.com/a/1190000009378881，要不是看了他的介绍，我想我还很懵呢。 首先，根据基础篇我们可以知道svg里面有很多元素，如果我们需要让他们动起来，我们可以用svg里面的animate元素。<line x1="0" y1="0" x2="100" y2="200" style="stroke:rg...原创 2018-10-09 10:05:09 · 261 阅读 · 0 评论 -
html-svg基础-1.1
使用 XML 来描述二维图形和绘图程序的语言 SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG使用方法：///外部文件 svg文件内部的结构如下<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&...原创 2018-05-10 17:55:07 · 391 阅读 · 0 评论 -
html-details标签-1.1
定义元素的细节，用户可进行查看，或通过点击进行隐藏。 看起来这个功能有点类似折叠打开哦。不过更好使了耶。 不过注意哦，目前只有chrome、safari6支持此标签<!DOCTYPE HTML><html><body> <details open="open"> <summary&g...原创 2018-05-10 17:48:58 · 1251 阅读 · 0 评论 -
html-Canvas-1.1
创建画布要想让咱们的东西展示出来，那肯定要有个画布哦，就是咱们作画的地方哦。那我们就要创建canvas画布。<canvas id="myCanvas" width="200" height="250" style="border:1px solid #c3c3c3;"></canvas>这里有东西需要咱们注意一下哦，width height，咱们可以直接写在c原创 2018-01-10 16:09:58 · 354 阅读 · 0 评论 -
html-Canvas备注-1.1
1、如果要修改画布的内容，记得加context.save();/* 修改内容 */context.restore();2、如果划线，记得加context.beginPath();/* 划线的方式 */context.stroke();原创 2018-08-31 10:06:50 · 241 阅读 · 0 评论 -
html-IndexedDB-1.1
概念 1、键值对的形式，值可以是复杂类型 2、简历在事务数据库模型上 3、清除浏览器缓存的时候，可能会被清除相关的数据哦 ------------------------------------------------------------------------------------------------------------------1、数据...原创 2018-05-10 18:49:40 · 196 阅读 · 0 评论 -
html-表单-1.1
今天在看html5的时候，看到了表单API,试验了一下，觉得很智能啊，有木有( • ̀ω•́ )✧。哎，之所以已经很久没有使用表单的方式提交内容，就是因为他提交表单后会刷新页面。但如果忽略这个问题，那么他真的很好用耶(･ω<)☆ --------------------------------------------------------------------------...原创 2018-05-10 18:23:53 · 569 阅读 · 0 评论 -
html- 拖动-1.2
问题来源： 需要做一个拖动的效果，要将本地的内容，拖到一个div中，然后进行上传。知识补充： 首先先来认识一下最简单的拖拽的思想。 开始拖拽 = 鼠标按下 + 移动 停止拖拽 = 鼠标弹起 然后我们来看看有什么简单的方法，毕竟时代在更新嘛，程序猿正在变懒嘛。结果真的让我找到了，H5的标准里面就有拖动的属性。 Drag ...原创 2018-01-11 10:08:54 · 323 阅读 · 0 评论 -
html-文件-1.1
目前只支持google浏览器 是<input type="file">的api，必须先由用户主动选取文件之后，才能获取这个文件的信息。 -------------------------------------------------------------------硬盘 申请硬盘空间目录 创建/打开目录 ...原创 2018-05-10 18:08:48 · 200 阅读 · 0 评论 -
html-历史-1.1
操作浏览器的会话历史。 【他有什么实际情况下能用到？】不知道啊，先记着怕忘了！【|ミﾟДﾟ彡|】 属性window.history.length;//历史列表中的总数window.history.state; //当前URL的状态方法window.history.go(step); //后退或前进几步。负数为后退window.history.back...原创 2018-05-10 17:58:27 · 234 阅读 · 0 评论 -
css-px em rem vm vh vmin vmax-1.1
1、px 相对显示器屏幕分辨率而言2、em 相对对象内文本的字体尺寸 如果当前未设置，则相对浏览器默认字体尺寸<div class="div1">div1 <div class="div2">div2 <div class="div3">div3</div> &原创 2018-01-11 10:10:52 · 328 阅读 · 0 评论 -
css-表格去相邻间隔-1.2
border-collapse 默认的表格是中间有空隙的。是border-collapse:separate; 但有时候我们不需要空隙border-collapse: collapse; 另外一个就是继承父级的inherit。...原创 2018-12-22 10:46:36 · 258 阅读 · 0 评论 -
css-带尖角的框-1.1
最后我需要一个如上图的框，这就需要用到css的:before :after这两个，首先画一个框<div class="baseStyle"></div>.baseStyle{ border: 1px solid #cccccc; border-radius: 10px; height: 25px; position: relative; widt...原创 2018-01-11 10:16:16 · 512 阅读 · 0 评论 -
css-逗号 text-shadow-1.1
text-shadow: 0 0 0.25em blue, 0 0 0.35em blue, 0 0 0.45em blue, 0 0 0.55em blue, 0 0 0.65em blue; text-shadow：向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度...原创 2018-12-22 10:54:02 · 297 阅读 · 0 评论 -
css-可伸缩框属性（Box）-1.1
下面是按照盒子模型展示后的一些属性。在使用以下代码前不要忘了加这个哦display: -moz-box; /* Firefox */display: -ms-flexbox; /* IE10 */display: -webkit-box;/* Safari、Opera 以及 Chrome */display: box; /* W3C */ IE不支持box哦！...原创 2018-06-13 18:15:35 · 890 阅读 · 0 评论 -
css-换行-1.1
pre { white-space: pre-wrap; /*css-3*/ white-space: -moz-pre-wrap; /*Mozilla,since1999*/ white-space: -pre-wrap; /*Opera4-6*/ white-space: -o-pre-wrap; /*Opera7*/ word-wrap:...原创 2018-12-22 11:01:08 · 350 阅读 · 1 评论 -
css-渐变色-1.1
线性渐变background: -webkit-linear-gradient(center, rgb(253, 183, 10),rgb(242, 121, 40));/* Safari 5.1 - 6.0 */background: -o-linear-gradient(center, rgb(253, 183, 10),rgb(242, 121, 40));/* Opera 1...原创 2018-12-22 11:07:43 · 181 阅读 · 0 评论 -
css-可伸缩框属性（Flexible）-1.1
在使用以下代码前不要忘了加这个哦display: flex;display: inline-flex;//行内布局1、flex-direction 主轴方向 2、flex-wrap 换行方式3、flex-flow 缩写 4、justify...原创 2018-08-31 10:20:09 · 395 阅读 · 0 评论 -
css-手机端自适应-1.1
昨天改了个网站，今天老大说让手机端的话字体太小咯。找了半天都感觉很费劲的样子。啦啦啦，最后找到了个这个，这个虽然当时学的时候知道是手机端的，但没用过。没想到这么好用٩(❛ᴗ❛)//width 设置宽度，12 / "width-device"//initial-scale 设置页面的初始缩放值，1.1//minimum-scale 允许用户的最小缩放值，1.1//maxi...原创 2018-06-13 18:17:54 · 401 阅读 · 0 评论 -
css-transform-1.1
向元素应用 2D 或 3D 转换：none | transform-functions（自己去查吧，嘻嘻） 我就看几个我用得到的，嘻嘻。 translate3d设置开始和结束的位置/*设置原来的位置经过3D转换*/-ms-transform: translate3d(40px,0,0); /* IE 9 */-moz-transform: translate...原创 2018-08-31 10:38:50 · 289 阅读 · 0 评论 -
css-transform skew-1.1
首先创建外部结构<div class="list"><a href="#" class=""><span>Aa</span></a></div>.list { cursor: pointer; height: 125px; left: 300px; positio原创 2018-11-10 16:12:55 · 782 阅读 · 0 评论 -
css-animation-1.1
animation 属性是一个简写属性，用于设置六个过渡属性：animation-duration animation-timing-functionanimation-delay （这三个应该能猜出来吧，同上）animation-name（绑定的 keyframe 名称）animation-iteration-count（播放次数。 次数（n） | infinite无限）...原创 2018-08-31 10:33:24 · 344 阅读 · 0 评论 -
css-transition-1.1
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property transition-durationtransition-timing-function transition-delay文档中还赠送了一句重要的话：请始终设置transition-duration，否则时长为0，就不会产生效果哦。 下面来挨个认识下...原创 2018-06-13 18:22:53 · 810 阅读 · 0 评论 -
css-transform-origin perspective-origin-1.1
transform-origin 属性允许您改变被转换元素的位置。/*如果变形的过程中，希望设置变形的原点，则设置origin*/transform-origin: 0 0;-ms-transform-origin: 0 0; /* IE 9 */-webkit-transform-origin: 0 0; /* Safari 和 Chrome */-moz-transfor...原创 2018-08-31 10:34:35 · 324 阅读 · 0 评论 -
css-perspective-1.2
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。perspective: number|none;-webkit-perspective: number|none; /* Safari and Chrome */ 这个属性定义3D元素距离视图的距离。他的备注里面还有个这个元素：perspective 属性只影响 3D 转换元素。...原创 2018-10-09 10:08:12 · 233 阅读 · 0 评论 -
css-贝塞尔曲线 cubicBezier-1.1
http://blog.youkuaiyun.com/qq_25600055/article/details/51045163 看完以后受益匪浅啊。抄了一部分内容过来，以便查看。贝塞尔曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋...转载 2018-08-31 10:27:37 · 296 阅读 · 0 评论 -
css-动画 注意-1.1
今天遇到一个神奇的问题，就是我设置动画是transition: all 1s;这时候我设置他动的属性是left，结果没有动画效果。我才注意到如果是left改变，那么就是相对位置改变是没有动画，如果想要动画，就要加margin-left，这样改变margin-left的值才会有动画。.section9{ left: calc(50% - 640px); margin-left: ...原创 2018-10-09 10:11:04 · 157 阅读 · 0 评论 -
css-动画入门-1.1
http://www.html5tricks.com/css3-image-mouse-hover.htmlhttp://www.html5tricks.com/demo/css3-image-mouse-hover/index.html 看到上面两个网站的内容后，我才发现css原来可以这么厉害，做这么好看的东西。好多看起来很炫的东西，只要认真想过理解过，很多都是同根生。 ...原创 2018-08-31 10:21:43 · 326 阅读 · 0 评论 -
css-变量-1.1
声明(--开头)大小写敏感哦body{ --a:#c5c5c5; --b:#ccc;}使用color: var(--a);全局变量:root{ --c:#fff;}兼容性@supports ( (--a: 0)) { /* supported */ }@supports ( not (--a: 0)) { /* no...原创 2018-08-31 10:11:42 · 175 阅读 · 0 评论 -
入门-1.1
<html><head> <style> *{ float:left; width: 200px; } .aa { background-color: red; } p { margin: 0; padding: 0; } p[name^="My"] { background-color...原创 2018-06-13 18:08:57 · 154 阅读 · 0 评论 -
html-link disabled问题-1.1
今天查看一些源码的时候，发现了一个神奇的问题。什么问题呢？（就不告诉你，来打我啊ヾ(◍°∇°◍)ﾉﾞ）// var skinList = [{name:'default'},{name:'AA'}];for (var i = 0; i < skinList.length; i++) { document.write('<link rel="stylesheet"...原创 2018-10-09 10:13:28 · 650 阅读 · 0 评论 -
css-rotate-1.1
一直没认真思考旋转是怎么旋转，但今天发现rotateZ跟我预想的不一样啊，那我们来分析一下，他们到底是怎么转的吧。 现在有个框。transform: rotate(180deg);这个就相当于垂直屏幕有个轴。沿着这个轴旋转了180度。其实这个效果跟transform: rotateZ(180deg);效果是一样的。 transform: rota...原创 2019-01-05 15:22:12 · 436 阅读 · 0 评论 -
css-穿透-1.1
我现在设置了一个框是position，给框加透明度的。但是另外一个输入框，我不想设置position:absolute。怎么办呢，我想起css有一个属性，是pointer-events。pointer-events: none; 加了这个属性的框，就是能看见但无法点击，这样就实现css的穿透了。是不是很厉害啊。...原创 2019-01-05 15:23:13 · 913 阅读 · 0 评论 -
AngularJs-入门-1.1
一、定义angular所处的区域<div ng-app="fkApp"></div>var app = angular.module("fkApp", []);【如果有多个区域，这需要手动启动angular.bootstrap(document.getElementByID(""), ["myApp"]);注意这句要放在最后】 二原创 2019-01-11 14:17:17 · 200 阅读 · 0 评论 -
google控件-入门-1.1
这个东西要是自己研究起来，真的是。。。神了个奇了，根本搞不懂哪跟哪啊。 真的要感谢 http://www.itzhai.com/chrome-plugin-development-example-switch-lights-browser-action.html 。要不然我还是懵懵的了。 还要感谢郑朋桥给的讲解思路。不然我就给大家讲不清楚了。 一、配置文...原创 2019-01-11 14:19:10 · 561 阅读 · 0 评论 -
google控件-错误：tabs.onUpdated 重复调用-1.1
先说下是在哪的。在background.js里面chrome.tabs.onUpdated.addListener(initialize);function initialize(tabId, changeInfo, tab){} 不过很郁闷的是，这个页面是在后台自行运行的。所以我无法通过console.log输出任何东西。。。幸好我们还有alert能弹出一点东西。。。...原创 2019-01-11 14:34:23 · 638 阅读 · 0 评论 -
google控件-manifest.json-1.1
我们虽然粗略的会使用了一个，但是我们也要了解到底这个文件都有什么。 manifest_version 这个是必须要写的，而且一般是2，除非你是老版的代码name 这个是这个自定义控件的名称version 版本号background 后台是使用哪个页面 这两个选一种方式browser_action、page_action 展示我们...原创 2019-01-11 14:36:36 · 320 阅读 · 0 评论 -
google控件-chrome.tabs-1.1
chrome.tabs.executeScript 注入脚本///tabId 运行脚本的选项卡的id///obj 对象/// code 要执行的js代码/// file 要执行的js代码/// allFrames true为将脚本注入所有帧，默认为false///callback 回调函数chrome.tabs.execu...原创 2019-01-11 14:40:27 · 1543 阅读 · 0 评论 -
百度Map-0、入门-1.1
有时候我们需要展示我们的地点，那肿么办呢？我们可以用到百度地图。有它在手，说走就走，啦啦啦。 怎么能有我们自己的地图呢。你可以直接找百度地图开放平台。要不然你就慢慢看我嘚瑟。(́ಢ.◞౪◟ಢ‵)哟哟哟。 首先你要有个百度的密钥。账号和获取密钥。自己去申请哦。然后开始我们的操作。 1、创建页面<!DOCTYPE html><html l...原创 2019-01-11 14:50:02 · 214 阅读 · 0 评论 -
百度Map-1、平滑移动到新中心点、开启滚动缩放-1.1
平滑移动到新中心点处//如果新中心点在展示范围内，实现平滑移动到新中心点处。否则会直接跳至该点window.setTimeout(function() { mp.panTo(new BMap.Point(114.224443, 22.731518));}, 2000); 开启鼠标滚轮缩放mp.enableScrollWheelZoom(true); //开启...原创 2019-01-11 14:51:11 · 2238 阅读 · 0 评论