曾经,在那个 IE6 还是主流浏览器的时代,为了实现稍微复杂一点的功能,也需要很多代码。如果要做到兼容主流浏览器,更需大费周章。当 jQuery 出现后,使用 jQuery 实现同样的功能,我们只需写很少的代码,并且兼容主流浏览器。于是,大部分网站都会使用 jQuery。
很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理呢?
一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 (Eelement + Sibling) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 通用兄弟选择器
在项目开发中,接口请求是必不可少的,为了方便使用和维护,大家都会将接口请求的方法二次封装。下面小编将我项目中接口封装使用的方法分享给大家,希望可以帮到大家。喜欢的给个三连击再走哟。
如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。
一、前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE,但jser们也不能完全信任它,因为它只是提供尽可能的文档模式模拟而已。 本篇大部分内容来源于官方解说:http://msdn.microsoft.com/library/cc288
一、前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器探测后另一利器处理上述问题。 二、何为特征嗅探 从前我们都是通过对navigator.userAgent或navigator.appVersion两个属性值进行特定字符串匹配和萃取来
Tetris Game / 俄罗斯方块 浏览器兼容 ie8+, chrome, firefox ... 小时候穷,买不起游戏机,现在用js写一个来弥补一下童年 →_→ 源码地址:https:/
源码地址:https://github.com/capricorncd/tetris
常见的支持markdown编辑器的有typora,vs code,atom,sublime等。这些也都是十分好用的应用程序。今天来分享一个开源的markdown编辑器。editor.md
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。
想必做前端开发的都应该听说过Bootstrap, 一款优秀的前端开发框架。前段时间博主做的一个项目便尝试着用了boostrap来搭建,确定非常快,而且响应式做的特别好,省去了许多麻烦。不过由于我用的是Bootstrap 3.0,结果发现在ie8下崩掉了,心塞啊!又翻出bootstrap官方API,细读之……这才明白由于bootstrap做响应式所用的栅格布局在ie8下不被支持,而且也不支持html5的新标签和css3的一些效果,如圆角、阴影、一些过渡效果等……翻了好多教程,总结出以下方法,与大家分享!
*了解常见的浏览器问题兼容性 * 了解常见的浏览器问题兼容性的解决方案 * 了解css hack * 了解针对主流浏览器的css hack怎么写
* 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的图片名称引用。
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标,
但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。
NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展,让Web开发更迅速、简单。能解决60%重复工作。 NFine项目简介 使用时请务必保留来源,请勿用于违反我国法律的web平台、如诈骗等非法平台网站。版权最终解释权归《NFine团队》所有。 NFine是一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架,源代码完全开源,可以帮助你解决C#.NET项目68%的重复工作,让开发人员远离加班! 使用 Apac
一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下:
1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。
阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。 什么是跨域 在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。 JavaScript这个安全策
一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况,因为比较难
本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。
https://www.imooc.com/t/197450 float float的设计初衷/原本作用-是为了实现文字环绕效果 如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了。 浮动的包裹与破坏 包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?) display: inline-block、table-cell... position: absolute(近亲)、fixed、sticky overflow: hi
localStroages是HMTL5新型客户端数据存取新方式IE 欢迎收看饿了么系列 之 localStroage封装 window.localStorage 读取: localStroage.getItem(‘key’) 储存: localStroage.setItem(‘key’,’value’) 兼容性: IE8+ 大小: 5M 数据类型: String 有效期: 永久 在浏览器的隐私模式下面是不可读取且无法给爬虫抓取数据 封装localStroage getter saveToLo
行内或者行内块元素居中 1.单行竖直居中 给行内元素添加上下相同大小的padding值即可 设置元素的line-height等于父容器的高度,也可以竖直居中 使用弹性盒子Flex后,设置align-items为center 涉及到图片文字混排竖直居中使用vertical-align,可以使用伪元素加入以下代码 container::after{ content:''; display:inline; vertical-align:middle; } 2.多行文字竖直居中 设置padd
1、Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见。 hidden:超出部分隐藏。 scroll:超出可滚动。 auto:若超出才出现滚动条。 inherit:继承。(IE8+) 注:overflow-x与overflow-y值不同,其中一个属性值被赋予visible,而另一个被赋值为hidden/scroll/auto,则visible会被重置为auto。 兼容性:
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目
localStroages是HMTL5新型客户端数据存取新方式IE 欢迎收看饿了么系列 之 localStroage封装 window.localStorage 读取: localStroage.getItem(‘key’) 储存: localStroage.setItem(‘key’,’value’) 兼容性: IE8+ 大小: 5M 数据类型: String 有效期: 永久 在浏览器的隐私模式下面是不可读取且无法给爬虫抓取数据 封装localStroage getter saveToLocal(
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
推荐理由:可以将阿里图标库的icon、svg、unicode渲染到html的小工具 render.iconfont,可以将阿里图标库的 icon、svg、unicode 渲染到 html 的小工具,为什么要用这个组件,可以利用这个小工具快速、优雅的选择自己的想要的类型来添加自己喜欢的图标。怎么使用这个小工具,1.我们可以直接点击阿里的「iconfont」的下载代码,2.找到你下载好的代码,添加到你的项目中,3.记住你的路径,在你的 html 上,引入小工具,4.将需要图标化的容器,添加,并且定义类名或者 id,5.实例化小工具,配置项,path,描述:读取图标文件夹的路径,类型,默认值:`./icon/`,selector,描述:图标的容器,默认值,type,描述
前端开发离不开图标,会有一部分直接使用图片引进,但是在性能上来说对用户体验不是很好。
fullpage.js是一款切换效果插件,支持主流浏览器与ie8+,网上的示例多是纵向切换,但是横向切换示例较少,翻看了一下api文档,调用moveTo方法,即可切换至任意纵向任意横向的分屏中,先看下效果
本文主要介绍了CSS布局的基本知识、常见布局技巧、CSS3新特性及浏览器兼容性问题。
上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。
“无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《开经偈》
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/53996012
好啦, 今天的分享就到这里啦, 如果你有好用的库推荐, 欢迎在评论区反馈~ 后续会在 趣谈前端 中持续总结复盘, 让技术工作更高效
给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现
什么是跨域? 概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。 URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js htt
跨域详解 1. 概念 协议、域名、端口有一个不同即被当作不同的域 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不允许 http://www.a.com/a.js http://70
前言 每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不可选的空白符,于是想尽办法修复这个bug。 直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟,原来我错了。那不是bug,是我不懂而已。 先行者——IE5.5中的inline-block 当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*zoom:1
这种方式实现的自适应布局,元素宽度无需定值,且margin(浮动部分)与padding自由设置,支持百分比宽度(table-cell内),且可以无限制嵌套,兼容性不错,在我看来是最佳自适应布局方式。
2.如果两个绝对定位,控制DOM流的前后顺序达到需要的覆盖效果,依然无z-index;
字体:实际上是长得像图标的字体,占用的空间小,消耗的带宽小,能够更快的显示页面。字体是矢量的,所以不会失真,可以按照字体一样设置字体颜色和大小。
最近在项目中遇到一个问题,同事在IE浏览器下测试时出现底部大块空白的问题。如下图:
八款不可错过的热门 Markdown 开发包 1码云项目推荐 项目名称:Markdown 编辑器 Editor.md 项目简介:Editor.md 是一个可嵌入的开源 Markdown 在线编辑器组件
一、前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; console.log(el.getAttribute('hello')); // IE67下输出test,其他浏览器输出null “搞毛啊?”,苦逼的Jser对着浏览器大呼一声。然后就用下面蹩脚的方式草草处理掉了。 function getAttr(el, pro
跨域详解 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 跨域详解 1. 概念 2. 跨域资源共享(CORS) 3. jsonp跨域 3.1 概念 3.2 实现 3.3 jQuery封装操作 3.4 JSONP优缺点 CORS 与 J
领取专属 10元无门槛券
手把手带您无忧上云