最新统计:5462853 名前端工程师,270204 篇优秀笔记,23327 个前端问题被解决,1292 家高端企业入驻,1 个网站,1 个共同的家园!

90%的人都不会的简历技巧

前端网友最新动态:

加关注有惊喜:新浪微博腾讯微博

加载中,请稍后

  • 睡在向日葵HTML页面加载和解析流程

    HTML页面加载和解析流程

    浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的。 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。 3.如果

  • 旅行の者REM+SVG Sprite,构建新时代web app

    REM+SVG Sprite,构建新时代web app

    移动WEB变革的REM,使用之后伴随而来的是不能使用csssprite,小的项目姑且不说,大项目图片如牛毛,N多请求这.......一张一张的图片情何以堪呐~~~ 各种寻找方法,font-face?CSS画图标?麻烦.....且有各种弊端,不灵活也在其中,绕啊绕啊绕啊…………突然....撞到了S

  • 拎壶充基于jQuery动画二级下拉导航菜单

    基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单。鼠标经过的时候以动画的形式出现二级导航。效果图如下:在线预览源码下载实现的代码。html代码:<divid="nav_main"> <divclass="inner1"> <divclass="inner2"> <divid="nav_main_ba

  • Xuecheng_Albert贪吃蛇小游戏即兴练习

    贪吃蛇小游戏即兴练习

    即兴写了一个贪吃蛇的小游戏,算法很简单,无非就是构造一个链表结构。注释很详细,适合js初学者体会面向对象编程。 游戏玩法:键盘上下左右任意键开始游戏,上下左右控制方向,长按可以加速。 简单说一下设计思路: 蛇身本身是一个链表结构,每一个结点保存自身

  • traveling-wxy正则表达式一些基础知识

    正则表达式一些基础知识

    duang~开学前留下第一篇笔记~ 关于我熟悉又陌生的正则表达式~ 一个正则表达式包含一个模式和三个标志(i、g、m) 一、RegExp实例方法 使用:pattern.test(str) 功能:目标字符串中是否包含了与模式匹配的内容 1.test() 返回值:true/false; 2.exec() 返

  • hugeannex圆珠笔伸缩原理

    圆珠笔伸缩原理

    以前研究过很多汽车的开关,一按开,再按就关,里面的原理总觉得比不过圆珠笔的,个人觉得圆珠笔这技术堪称神技。 下午用canvas瞎画了一下原理,尺寸是手工凑的,不是很准,主要是觉得这原理太牛了,分享一下。 <!DOCTYPEhtml> <htmllang="en"> <head

  • wocacaca使用canvas实现刮奖刮开效果

    使用canvas实现刮奖刮开效果

    目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果。 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。 DEM

  • 花开一季整理笔记--css 文本段落设计

    整理笔记--css 文本段落设计

    1.line-height行高 2.letter-spacing设置对象中字的间距 3.word-spacing设置对象中单词的间距 4.text-indent首行文字的缩进 5.text-overflow当对象中文本超出行宽时,可以对文本末端增加省略标记(…),只有当对象设为不换行显示时有效,属性值为clip时,直接截取

  • 前端有点辣网站优化:天下武功,唯快不破

    网站优化:天下武功,唯快不破

    不知道从什么时候开始,不管是写独立博客,还是网络应用,甚至写托管博客的人都会朝着“大”网站看齐,去追求网站的响应速度,通俗点说,就是白屏时间,因为据各种报告说,网站打开速度更快一些,带来的用户体验就更好一些,从而带来更多的附加利益。但是对于用户来说,

  • 寻问者JavaScript基础术语概念总结之函数(更新中)

    JavaScript基础术语概念总结之函数(更新中)

    在学习的过程中发现编程是一种很抽象的东东有木有。。。那么先弄懂基本术语概念,可能会轻松一些,望各位批评指正不对之处,给我一个学习进步的机会^_^ 术语总结 1、函数的作用是:定义一次但却可以调用多次或执行任意多次的代码,换句话说,需要重复执行的东西我

  • W3CfunsFans移动web页面前端开发总结(转)

    移动web页面前端开发总结(转)

    移动web页面前端开发总结 转自:http://www.bubuko.com/infodetail-282777.html(文章的截图请直接看链接的吧,我这里就不再转过来了) 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结。

  • Mr._Fu表单验证常用正则(强烈推荐大家收藏下)

    表单验证常用正则(强烈推荐大家收藏下)

    表单验证常用正则,非常不错,收集的相对比较完整,大家可以看看。 1。^\d+$  //匹配非负整数(正整数+0) 2。^[0-9]*[1-9][0-9]*$  //匹配正整数 3。^((-\d+)|(0+))$  //匹配非正整数(负整数+0) 4。^-[0-9]*[1-9][0-9]*$  //匹配负整数 5。^-?\d+$ 

  • long702CSS之少用继承,多用组合

    CSS之少用继承,多用组合

    继承是css中经常要用到的技术,好处是可以尽量让页面的代码减少重复利用,但是随时项目越来越大,需求的不断变化,css代码就会变得越来越臃肿,后期难以控制和维护。其实,css代码和普通程序代码在编写的时候有很多的相似之处,下面我们就用试试用组合的方式是不是能更

  • long702很全base全局样式

    很全base全局样式

    @charset"utf-8"; /*CSSDocument*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,filedset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0} address,caption,c

  • 迷途的羔羊CSS书写规范及顺序

    CSS书写规范及顺序

    CSS书写规范及顺序 CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列(font,line-height,letter-spacing,color-text-align等) 4.背景(background,border等) 5.其他(animation,transition等)

  • cullen我的前端迷茫之路

    我的前端迷茫之路

    最近感觉到有点迷茫,有点彷惶,14年过去了,回顾1年以来,好像看不到自己有什么大的进步,而且从接触HTML,CSS来算,都有3,4年了,技术也不见得好得哪里去,也是低落,也是无奈。 我每过一段时间都会思考一下自己(可能是因为闲了),这次赶上年尾就写一篇比较长的笔

  • 小玛丽打怪兽写一本自己的书吧~

    写一本自己的书吧~

    <!DOCTYPEhtml> <htmlclass=''> <head> <metacharset='UTF-8'><metaname="robots"content="noindex"> <linkrel='stylesheet'href='http://s.codepen.io/assets/reset/normalize.css'> <styleclass="cp-pen-styles"> .boo

  • sunny120js练习(简单日历、选项卡)

    js练习(简单日历、选项卡)

    1.简单日历 <!doctypehtml> <html> <head> <style> .calendar{ } .calendarulli{ width:150px; height:150px; list-style:none; float:left; background:#ddd; margin:5px; } .calendarulli:hover{ cursor:pointer; } .calendar.act

  • CodeLovercanvas随笔之贪吃蛇

    canvas随笔之贪吃蛇

    思路:蛇的移动无非就是不停地画蛇头,不停地擦除蛇尾,蛇身中间不管。 注意:1方向变更2蛇咬到自己时3蛇咬到边界时 <!DOCTYPEhtml> <html> <head> <title>snakeGame.html</title> <metahttp-equiv="keywords"content="keyword1,k

  • 小玛丽打怪兽可能是你想要的按钮效果

    可能是你想要的按钮效果

    <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> </head> <style> html,body{ height:100%; font-family:'ShareTech',sans-serif; background:#ffa84c; background:-moz-radial-gradient(

  • c690554125小白第二记

    小白第二记

    HTML事件处理,DOM0级事件处理,DOM2级事件处理 HTML事件处理: <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <linkhref="mycss.css"rel="stylesheet"type="text/css"> </h

  • chenjsh36li如何确定自己是第几个元素(同时引出关于each的思考)

    li如何确定自己是第几个元素(同时引出关于each的思考)

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;c

  • chenjsh36document.documentElement和document.body的区别(浏览器兼容问题)

    document.documentElement和document.body的区别(浏览器兼容问题)

    网页中获取滚动条卷去部分的高度,可以通过document.body.scrollTop来获取,比如使div跟着滚动条滚动: <divid="div"style="width:100px;height:100px;background:#ccc;position:absolute;"></div> window.onscroll=function() { vardiv=document.get

  • chenjsh36typeof 和instanceof 的区别

    typeof 和instanceof 的区别

    JavaScript中typeof和instanceof常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的: typeof typeof是一个一元运算,放在一个运算数之前,运算数可以是任意类型。 它返回值是一个字符串,该字符串说明运算数的类型。typeof一般只能返回如下几个

  • BubbleV2模仿淘宝移动端撒金币效果

    模仿淘宝移动端撒金币效果

    可在手机上摇一摇试试,不过目前手机上金币多的话渲染就会很卡 <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>摇一摇撒金币</title> <metaname="viewport"content="width=device-width,initial-scale=1,minimum

  • 10029068JS快速获取图片宽高的方法

    JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。 一、简陋的获取图片方式 //图片地址后面加时间戳是为了避免缓存 varimg

  • ikeyoo那些年我们一起处理的浏览器兼容

    那些年我们一起处理的浏览器兼容

    二年前,走出校门进了公司大门,成了前端工程师,有木有很拉风,听着是不是高大上……前台代码简单!!!!!!!!!!!!门槛低!!!!!!!!!!!!!出入高档写字楼!!!!!!!!薪水高!!! 都不想表达自己的小心脏悲伤了多久…… HTML,JSON,JS,CSS,JQU

  • 纸鹞标签切换

    标签切换

    看到某宝主页右边有个小小的公告栏那样的东西,仿照一下 <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>Tab切换</title> <style> *{ margin:0px; padding:0px; list-style:none; font-size:12px;

  • Sakura小星星在动

    小星星在动

    有段时间没有写笔记了,做了一个小星星动的夜空,颜色没有真实的那么漂亮,不要见怪啊 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>星空</title> <styletype="text/css"> *{ margin:0; pad

  • 拎壶充基于jquery的适合电子商务网站首页的图片滑块

    基于jquery的适合电子商务网站首页的图片滑块

    今天给大家分享一款基于Sequence.js的图片滑动效果,特别适合电子商务网站或者企业产品展示功能。带有图片缩率图,能够呈现全屏图片浏览效果。结合CSS3Transition实现响应式的滑块效果。在线预览源码下载实现的代码。html代码:<divclass="sequence-theme"> <

  • seewp88CSS常用中文字体英文名称对照表

    CSS常用中文字体英文名称对照表

    <articleclass="article-content"style="width:80%;margin:40pxauto;"> <h1style="text-align:center;">CSS常用中文字体英文名称对照表</h1> <p><imgstyle="display:none;"title=""alt=""src="http://www.artll.com/wp-c

  • Wendy_gyx学习zdw的博客《移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法》整理自己笔记

    学习zdw的博客《移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法》整理自己笔记

    css部分 meta标签 1.<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>关于initial-scale=1意思是初始化的缩放是1,因为前一句是宽=设备宽,所以不管你是iphone几,只要是满屏显示,那就是scale为1,而不是什

  • 拎壶充一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS33D旋转画廊特效插件。该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样。它还带有点击放大图片,显示图片标题和用键盘操作等功能。在线预览源码下载简要教程这是一款效果非常炫酷的jQuery和CSS33D旋转画廊特效插件。第

  • 小玛丽打怪兽这样的动画是不是很萌萌哒

    这样的动画是不是很萌萌哒

    <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <style> @-webkit-keyframesarc{ 0%{ border-width:30px; } 25%{ border-width:15px; } 50%{ -webkit-transform:rotate(27deg); transform:rotate(27deg); border-width:30px

  • 407449671div自适应同等高度代码记录

    div自适应同等高度代码记录

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;

WEB前端攻城小师傅修炼之道

ikeyooWEB前端攻城小师傅修炼之道

做前端这一个多年头来,零零碎碎的学了一些个知识概念,但是有时候思索一下啊,觉得这个前端知识链还是不很

从网页制作到前端开发工程师难吗?

kuaiqie从网页制作到前端开发工程师难吗?

招个前端开发工程师难吗? 今天在CSDN上看了一个帖子,标题被我无耻的复制了“招个前端开发工程师难吗?”

情人节礼物,玫瑰花

ljinkai情人节礼物,玫瑰花

通过cavans实现玫瑰花的效果,正好为要到来的情人节热下身.. <html> <head> <title>情

“按需加载”的应用--转载

pingfan“按需加载”的应用--转载

按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才

动感的时钟效果(纯CSS)

vqianduan动感的时钟效果(纯CSS)

【查看演示】 今天推荐一款动感的时钟效果,该效果用纯CSS打造。 什么是纯CSS?就是只有CSS啊!

CSS3:创意的图片堆叠效果

vqianduanCSS3:创意的图片堆叠效果

我们常常遇到这样一种效果,有多张图片,最初只在页面上呈现一张图片,当触发某个按钮时,更多的图片呗展现

js加载全解析

katherinesnowjs加载全解析

1.JS的加载 1.1JS不能并行下载和解析(阻塞下载) 1.2当引用了JS的时候,浏览器发送1个jsrequest就会一直

新版微信分享图片设置

小玛丽打怪兽新版微信分享图片设置

本教程绝对管用!和网上很多不靠谱的方法不一样! 微信规范了分享接口,必须要认证后的公众号才可设置分

移动平台WEB前端开发技巧汇总

katherinesnow移动平台WEB前端开发技巧汇总

参考文献: 来源:ECSS网站:[url=http://uecss.com/mobile-platform...skills-summary.html]http://uecss.co

javascript+jq实现的“消灭星星”简单版

straw_hatjavascript+jq实现的“消灭星星”简单版

想继续开发的朋友,可以帮我把积分系统等等搞搞,或者是关卡之类的!!感激不尽哈,有兴趣的可以一起开发

JS:2个值相互转换,实现与优化

cullenJS:2个值相互转换,实现与优化

功能:要2个值之间相互转换输出 就是这样: 未付款<->0 已付款<->1 无效<->4 线下<->

HTML5+JS实现刮刮乐刮刮卡抽奖

ljinkaiHTML5+JS实现刮刮乐刮刮卡抽奖

jquery、canvas实现瓜瓜卡效果,PC和手机端均可,效果如图 <!DOCTYPEhtml> <html> <head

js实现燃放烟花效果-放花喽

ljinkaijs实现燃放烟花效果-放花喽

说下实现的思路,基于jQuery,用canvas实现,监听点击和滑动的事件,计算路径和随机生成颜色 <!DOCT

canvas随笔之粒子汇聚“OPEN”!

CodeLovercanvas随笔之粒子汇聚“OPEN”!

<!DOCTYPEhtml> <html> <head> <title>grain.html</title> <metahttp-equ

手机浏览器实现拍照功能

ljinkai手机浏览器实现拍照功能

本文概述 长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来

canvas随笔之简易时钟

CodeLovercanvas随笔之简易时钟

<!DOCTYPEhtml> <html> <head> <title>时钟描绘</title> <metahttp-equiv="k

JS类型判定题目 解题血泪史

卡修JS类型判定题目 解题血泪史

<!DOCTYPEHTML> <html> <head> <metahttp-equiv="Content-Type"content="text/h

解决常见svn冲突问题

pingfan解决常见svn冲突问题

一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并。同时,

CSS layout:margin collapse问题研究

赵冰龙CSS layout:margin collapse问题研究

1.这货是什么?? cssmargin重叠,也有大牛叫做margin塌陷,通常这个问题会在布局的时候遇到,触发条件是

极客学院

5-精通CSS与HTML设计模式 该书需要仔细研读!认真读过之后,你会发现收获巨大! "设计模式"四个字就描述了该书的

点击下载 »

超级设计手册:移动应用UI设计模式 本书不仅仅只包括了作者本人所喜爱的界面设计的抽象模式,而且还是移动应用设计的展示

点击下载 »
返回顶部