【HTML5+CSS3点滴知识 】
文章平均质量分 62
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
教你发布你npm包
前言npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这个简单的例子开始,逐步对它进行封装-发布-更新-扩展-使用,进而到得一个相对完整的npm包,下面开始。一、一个最简单的npm包1.1 新建文件夹可以找个地方直接建个文件夹,最好语义化一点...转载 2020-01-05 15:34:52 · 831 阅读 · 0 评论 -
service worker的基本知识
Service Worker是什么service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截和处理网络请求。这个 API 会让人兴奋的原因是,它可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能(一般称之为 Offline Fir...转载 2019-12-23 20:51:36 · 1060 阅读 · 0 评论 -
常见的跨域解决方案(全)
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:资源跳转: A链接、重定向、表单提交 资源嵌入: link、script、img、frame等dom标签,还有样式中background:url()、@font-face()等文件外链 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的,是...转载 2019-12-15 11:41:12 · 372 阅读 · 0 评论 -
css垂直水平居中的几种常用方案
绝对定位实现垂直水平居中优点:兼容性好缺点:需要知道宽高,不够灵活.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -转载 2016-09-20 10:04:40 · 499 阅读 · 0 评论 -
React Native之原理浅析
一、JavaScriptCore讲React Native之前,了解JavaScriptCore会有帮助,也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与,你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上,默认的就是JavaScriptCore, iOS 7之...转载 2019-10-12 10:48:45 · 694 阅读 · 0 评论 -
IE6兼容性问题及解决办法汇总
1、IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明 2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距) 解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字的上面转载 2017-03-01 10:07:18 · 555 阅读 · 0 评论 -
CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并。个人建议全新实现使用 HTML标签即可一、CSS原创 2017-02-21 15:46:19 · 20980 阅读 · 0 评论 -
:after伪类的用法,checkbox,radio,content
.cross{ margin: 100px; width: 40px; height: 40px; background-color: #F3F9FF; border-radius: 20px; border: 1px solid #DBE6EF; display: inline-block;原创 2017-02-21 11:08:49 · 965 阅读 · 0 评论 -
垂直外边距合并--CSS的Margin属性:详解margin属性
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打转载 2017-02-20 22:00:01 · 598 阅读 · 0 评论 -
地图map开放平台总集:百度地图,腾讯地图,高德地图
1:百度地图:http://lbsyun.baidu.com/index.php?title=wxjsapi2:腾讯地图:http://lbs.qq.com/qqmap_wx_jssdk/index.html3:高德地图:http://lbs.amap.com/api/wx/summary/原创 2017-02-06 10:11:03 · 2974 阅读 · 0 评论 -
sublime text 你所不知道的12个秘密
package control安装:第一种方法是在控制台中复制粘贴代码按回车,https://sublime.wbond.NET/installation第二种办法下载pc文件,百度一下很多方案,这里不详说了emmet安装:1、按Ctrl+Shift+P命令板2、输入PCIC,回车进入Package Control:install3、输入Emmet和Emmet转载 2016-12-13 11:50:36 · 2244 阅读 · 0 评论 -
css3中的content字图片处理background
#div1{width: 100px;height: 30px;background: #ccc;position: relative;}#div1:after{position: absolute;right: -40px;font-size: 20px;background: red;content: '\2748';}#div2{position: relat原创 2016-08-31 14:44:37 · 7986 阅读 · 0 评论 -
css3中的content字符编码
content有5中属性 content:""; // 为空 content:attr(title); // 可以获取标签属性值 也可以获取自定义属性值 比如css是 div:after{content:attr(gaga)}则可以获取到了123 content:"我是谁"; // 填写字符串比如// css是div:after{conte转载 2016-08-31 14:23:48 · 16558 阅读 · 2 评论 -
html特殊字符 编码css3 content:"我是特殊符号"
项目中用到的一些特殊字符和图标html代码div class="cross">div>css代码.cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF转载 2016-08-31 14:15:08 · 6834 阅读 · 0 评论 -
Google地图开发总结
我们经常使用地图查位置、看公交、看街景,同时地图还开放第三方的API给开发者。利用这些API进行地图的个性化的展示和控制,例如北京被水淹了,开发一个网页显示北京被淹的地图,地图上面标志被水淹的位置、严重程度,或者我是交警,想要在地图上标志发生车祸、被交通管制的路段,甚至是利用地图的街景,控制街景的位置变化做一个tour show动画。因为地图本身就是一个比较好玩的东西,再加上一些个性化的控制会更加转载 2016-08-23 22:33:13 · 4627 阅读 · 0 评论 -
22个必备的CSS小技巧
http://jrainlau.github.io/2016/07/03/%E3%80%90%E8%AF%91%E3%80%9122%E4%B8%AA%E5%BF%85%E5%A4%87%E7%9A%84CSS%E5%B0%8F%E6%8A%80%E5%B7%A7/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io混转载 2016-08-21 22:57:43 · 445 阅读 · 0 评论 -
HTML5 手势检测原理和实现
前言http://qianduan.guru/2016/08/13/gesture_detection_in_html5/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生转载 2016-08-21 22:54:20 · 2428 阅读 · 0 评论 -
移动端HTML5音频与视频问题及解决方案
移动端HTML5音频与视频问题及解决方案最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频。传统的精灵动画:磁盘空间大,下载慢,尤其是在线播放,会更慢文件太多,在线播放的时候,太多http请求,会导致响应慢,或者行为失常因此,急需开发了一套技术,用视频代替精灵动画。我们称这种视频叫做交互视频 传统视频的问题:传统视频,只能在转载 2016-08-19 10:05:09 · 4320 阅读 · 0 评论 -
高德地图API
(慕课网)如何使用高德JS-API进行基于LBS的开发http://files.cnblogs.com/vczero/JS-API%281%29.ziphttp://files.cnblogs.com/vczero/JS-API%282%29.zip原创 2016-08-05 09:20:38 · 489 阅读 · 0 评论 -
基于HTML5的视频播放器
之前在上网去搜索播放器的时候,很多都要收费的,不收费的感觉看起来很费劲,所以自己简单些了一下,前几天有共享过一个简单的H5视频播放器,但是存在一些BUG,最近修复了一下,再次共享,提供给一些H5和CSS3学习的朋友学习一下。拥有播放器正常功能:单击播放暂停,双击全屏,调节播放进度/声音进度,目前支持moz、webkit及IE10+这些浏览器。IE9以下只能用支持flash播放。转载 2016-09-01 13:50:36 · 928 阅读 · 0 评论 -
HTML5摄像头拍照组件的封装
摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。在这里,我使用了一个隐藏起来的canvas转载 2017-02-28 23:01:20 · 1101 阅读 · 0 评论 -
canvas转base64/jpeg时,透明区域变成黑色背景的解决方案
问题:png图片转jpeg时,透明区域被填充成黑色在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。代码如下:p>Canvas:p>canvas id="canvas" style="border: 1px solid #ccc;">canvas>br>p>Base64转码后的图片:p>div id="base64Img">div>script type=转载 2017-02-28 23:04:20 · 25858 阅读 · 0 评论 -
H5 调用摄像头
WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API。 1、getUserMedia要播放摄像头的影像,首先需要一个video标签: 1video id="video">video>获取摄像头转载 2017-02-11 20:03:07 · 6019 阅读 · 0 评论 -
canvas学习之API汇总
http://luckykun.com/archives/转载 2017-02-03 14:57:43 · 501 阅读 · 0 评论 -
手机端rem布局详解(淘宝无限适配)
从网易与淘宝的font-size思考前端设计稿与工作流http://www.cnblogs.com/well-nice/p/5509589.html本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:)。这是淘宝的git转载 2017-03-03 08:56:53 · 1560 阅读 · 0 评论 -
关于移动端rem 布局的一些总结
1.rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位2.为什么web app要使用rem?实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同第一个例子:html{转载 2017-03-03 09:00:17 · 2917 阅读 · 0 评论 -
移动端 rem 布局的一些总结
【资源一】基础知识恕不回顾基础知识参考以下两篇博客:http://isux.tencent.com/web-a...http://www.w3cplus.com/css3/d...【资源二】淘宝m站首页的动态实现学习http://m.taobao.com 首页的实现。最近读到@大漠 的新文章《使用Flexible实现手淘H5页面的终端适配》,和本部分转载 2017-03-03 09:00:57 · 1434 阅读 · 0 评论 -
手机端页面自适应解决方案—rem布局
该方案目前已过时,这里是更加完美的替代方案——rem布局(进阶版)相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem(什么是rem)布局rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了转载 2017-03-03 09:14:27 · 2752 阅读 · 0 评论 -
移动端布局之REM,以及实际使用总结
整理代码的时候发现以前公司内部分享写的ppt题记:html的font-size:num rem 可以等比改变所有以 rem 为单位的元素1.以rem 为单位,前端切图,以640尺寸(保证放大的图片质量), width,height,padding,marging 等切距离,以320的尺寸,也可以以640的尺寸。配合以下媒体查询ht转载 2017-03-03 09:17:46 · 600 阅读 · 0 评论 -
Atom编辑器
http://blog.csdn.net/u010494080/article/details/50605654在本节中我们会学习如果安装和使用插件 插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的.查看已安装的插件打开设置窗口(Cmd+,),再切换到”Packages”标签页转载 2017-03-03 11:04:22 · 562 阅读 · 0 评论 -
酷酷的CSS3三角形运用
酷酷的CSS3三角形运用概述在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!本文的Demo和源转载 2016-09-15 11:19:12 · 773 阅读 · 0 评论 -
移动端前端适配方案对比
最近抽空看了看移动端适配的一些文章,也结合自己的经验做一下总结以及对比。那么,开始正题,首先说说到目前位置出现的一些关于移动端适配的技术方案:通过媒体查询的方式即CSS3的meida queries以天猫首页为代表的 flex 弹性布局以淘宝首页为代表的 rem+viewport缩放rem 方式Meida Queriesmeida queries 的方式可以说是转载 2017-03-16 09:15:24 · 5648 阅读 · 0 评论 -
手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:)。这是淘宝的github网址,里面有适配所需的js还有说明文档 地址:https://github.com/amfe/lib转载 2017-06-29 12:12:19 · 708 阅读 · 0 评论 -
关于移动端rem 布局的一些总结
1.rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位2.为什么web app要使用rem?实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同第一个例子:html{转载 2017-08-17 16:15:39 · 598 阅读 · 0 评论 -
React 常用面试题目与分析
调用 setState 之后发生了什么?https://zhuanlan.zhihu.com/p/24856035在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元转载 2017-07-28 09:36:57 · 3020 阅读 · 0 评论 -
CSS盒子模型以及CSS3中的box-sizing
css中的盒模型一般分为标准W3C盒模型和IE盒模型。css盒模型定义css盒模型(Box Model)规定了元素框处理元素内容、内边距、边框、和外边距的方式。 下图说明了盒子模型 元素框的最内部分是实际的内容(content),直接包围内容的是内边距(padding),内边距呈现了元素的背景。内边距的边缘是边框(border),边框以外是外边距(margin),外边转载 2017-08-31 11:12:50 · 778 阅读 · 0 评论 -
面试专题
腾讯一面1.浏览器工作原理浏览器的主要组件包括:用户界面- 包括地址栏、后退/前进按钮、书签目录浏览器引擎- 用来查询及操作渲染引擎的接口渲染引擎- 渲染界面:Firefox、Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safari和Chrome都使用webkit.网络- 用来完成网络转载 2017-08-31 11:35:41 · 717 阅读 · 0 评论 -
有趣的HTML5:离线存储
最近由于找工作一直没时间也没有精力更新博客,找工作真是一件苦逼的事情啊。。。不抱怨了,我们来看看HTML5的新特性---离线存储吧。随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分转载 2017-09-18 09:02:27 · 608 阅读 · 1 评论 -
平时自己项目中用到的 CSS
https://juejin.im/post/58da53b7ac502e0058e70abfcss有些属性容易忘记,半天不写就要去查api,有时候api还不好使,于是还是记下来以后方便用,后续会慢慢补充进来的。Github: github.com/aototo/blog博客长期更新,喜欢的朋友star一下outline 移除当选中input元素的时候会出现状态线转载 2017-09-18 09:23:23 · 829 阅读 · 1 评论 -
History API 使用指北
https://yeaseonzhang.github.io/2017/03/03/History-API-%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8C%97/#moreHTML5 History API,基本上是为了SPA(单页应用)而生。History API能够在不刷新页面的情况下,通过和url匹配历史堆栈中的数据取出来,这样就能大大减少数据请求,提转载 2017-09-18 10:38:36 · 1225 阅读 · 0 评论