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

前端网友最新动态:

最值得学
jQuery视频课程即将完结,不会JavaScript照样成为令人崇拜的特效大师!
加关注有惊喜:新浪微博腾讯微博
  • sara_riceCSS分类

    CSS分类

    1、带标题的图像浮动于右侧 <html> <head> <styletype="text/css"> div { float:right; width:120px; margin:0015px20px; padding:15px; border:1pxsolidblack; text-align:center; } </style> </head> <body> <div>

  • Ann大然使用Canvas 绘制折线图

    使用Canvas 绘制折线图

    <!DoctypeHtml> <html> <head> <title>LineChartDemo</title> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <style> body{background-color:#bfd0c4;} canvas{background-color:white;positi

  • heqing0712正则表达式笔记(持续更新中...)

    正则表达式笔记(持续更新中...)

    以下是在学习js正则过程中记录的正则例子,部分例子来源于网络 1、匹配(7月15日,8月16日)日后面的数字varreg=/\d+(?=日)/g; vartxt="7月15日,7月16日"; alert(txt.match(reg));//15,16复制代码 2、去掉最后一个连接参数 eg:http://www.w3cfuns.com/home.php?m

  • 家乡的云_月七颗龙珠,童年的回忆

    七颗龙珠,童年的回忆

    利用css编写的七颗龙珠<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>七龙珠</title> <styletype="text/css"> *{margin:0;padding:0;} /*编写龙珠的球形及透视效果*/ .ball{ width:200px; height:200px;

  • loheonly使用渐进式JPG改善用户体验

    使用渐进式JPG改善用户体验

    今年9月份的时候我在广州应聘了我大学第一份校招工作,网站重构师。在面试过程中,面试官的一个问题。问题如此:当一张JPG压缩到无法压缩的程度,但是它的大小还有有点大,你会怎么做?当时听到这个问题觉得一头雾水,根本不知道如何回答,后来面试官问我有没有听过一种

  • loheonlyJavascript模块化编程:AMD规范及require.js用法【转】

    Javascript模块化编程:AMD规范及require.js用法【转】

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。Javascript模块化编程,已经成为一个迫

  • loheonlyJS学习:JavaScript的核心[转]

    JS学习:JavaScript的核心[转]

    对象原型链构造函数执行上下文栈执行上下文变量对象活动对象作用域链闭包This总结 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要。每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解。面向读者:经验丰富的程序员,专家。我们以思考对

  • netsrongjs 与或运算符 || && 妙用

    js 与或运算符 || && 妙用

    逻辑或运算符|| 当运算符||的两个运算数都是布尔值,它对这两个运算数执行布尔OR操作。对非布尔型的运算数使用了||,这是利用了它对非布尔型的值会将其返回的特性。该运算符的这一用法通常是选取一组备选值中的第一个定义了的并且非空的值 例:varmax=max_width||prefe

  • loheonlycss3loading动画

    css3loading动画

    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=utf-8"/> <metaname="generator"content="editplus"/> <metaname="author"content=""/> <metaname="keywords"co

  • Ann大然HTML5 FileReader接口 & FormData 文件拖拽上传

    HTML5 FileReader接口 & FormData 文件拖拽上传

    结合之前的Drag&Drop与FileReader可以实现文件的拖拽上传,网上有很多实例可以学习。 上传后查看文件的地址为http://annweb-annstore.stor.sinaapp.com/文件名,控制台里也有地址 这是我做的一个效果如下:http://annweb.sinaapp.com/upload.html (360浏览器不

  • pingfan为什么每个前端开发者都要理解页面的渲染?

    为什么每个前端开发者都要理解页面的渲染?

    浏览器是怎样渲染一个页面的?重绘重排浏览器如何优化渲染?实际的优化建议 今天我要将关注点放到页面渲染以及其重要性上。虽然已经有很多文章提到过这个主题了,但大部分信息都是零碎的片段。为了思考这件事情,我需要研究很多信息的来源。这也就是为什么我觉得我应该

  • 炖猫术士朦胧的爱心,送给你。

    朦胧的爱心,送给你。

    我不是无所事事,我只是在消化。 运行代码: <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <style> body{ background-color:#172636; } .♥{ margin:auto

  • 炖猫术士分享常用的前端工具给大家

    分享常用的前端工具给大家

    这几天回家验兵,加上在公司开始做任务,所以近一个星期没有研究新东西了。有点悲催。 废话不多说,分享的工具都是较为常用,基本上我都用过。除了一个css检查及优化没试过,其他感觉都还行。 1.先给大家一个前端开发工具导航网址:http://tool.oschina.net/ 2.c

  • tintingjavascript数值转换

    javascript数值转换

    数值转换:Number()、parseInt()、parseFloat() -------------↑他们转换存在差异------------------ Number(): Boolean:true、false=>1(true)、0(false); null:=>0; undefined:=>NaN; string:=>"123"=123;"0123"=123;(忽略前

  • Ann大然HTML5 drag&drop

    HTML5 drag&drop

    HTML5中实现拖放操作,至少经过如下步骤 1)设置被拖放对象元素的draggable属性设置为true 2)编写与拖放有关的事件处理代码 事件产生事件的元素 描述dragstart被拖拽物体开始拖放dragenter被拖拽物体开始进入区域 进入范围dragover拖放过程中鼠标经过的元素(包括

  • 移花香css3媒体查询(转载)

    css3媒体查询(转载)

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。

  • zhonghaishengcss3 transition结合js实现手机轮播

    css3 transition结合js实现手机轮播

    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <metacontent="width=device-width,user-scalable=no,initial-scale=1.0;maximum-scale=1.0;user-scalable=0;"name="viewport"

  • 麻雀bu姓麻SVG学习笔记--viewBox解析

    SVG学习笔记--viewBox解析

    1.什么是viewBox? viewBox是<svg>,<symbol>,<image>,<pattern>,<marker>,<view>标签上得一个属性。 viewBox的值为:"min-xmin-ywidthheight",四个值可以以空格或逗号分隔。 2.viewBox能做什么? viewBox属性允许指定一个给定的

  • Ling丶Q程序员的笑话之内涵笑话

    程序员的笑话之内涵笑话

    又到周末了,大家忙碌的一周也该放松一下了,下面这些笑话只有程序员才可以看懂。1、一个程序员骑着一个很漂亮的自行车到了公司,另一个程序员看到了他,问到,“你是从哪搞到的这么漂亮的车的?”骑车的那个程序员说,“我刚从那边过来,有一个漂亮的姑娘骑着这个车过

  • Ling丶Qjs实现input输入框只能输入数字的功能

    js实现input输入框只能输入数字的功能

    <inputtype="text"style="ime-mode:disabled;"onkeypress="keyPress()"/>functionkeyPress(){ varkeyCode=event.keyCode; if((keyCode>=48&&keyCode<=57)) { event.returnValue=true; }else{ event.returnValue=false; } }复制代码style:ime-mo

  • fcoral理解js闭包

    理解js闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接

  • Ling丶Q在Windows上完成Rails开发环境的安装和配置

    在Windows上完成Rails开发环境的安装和配置

    一般来说,Windows开发者需要自己搭建好Ruby、RubyGems、Rails以及SQLite才能开始创建Rails应用。对于初学者,在Windwos上安装rails最简单的方式是RailsInstaller安装包。 RailsInstaller是一键安装的软件包,能够帮助你尽快上手,快速安装好开发环境。本文使用的rails

  • 10029068移动web开发-盒模型display:box详解

    移动web开发-盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 有了此属性,我们就可以不用使用float浮动属性就可实现网页面的布局了,尤其在开发移动端webap

  • WM_Perfectcss基础知识——漏网之鱼

    css基础知识——漏网之鱼

    常用文本属性 line-height行高 text-align对齐方式 letter-spacing字符间距 text-decoration文本修饰常用属性值有:underline下划线none无样式 white-space如何处理空白white-space="nowrap"文本溢出不换行 重要背景属性 background-repeat平铺方式no-repe

  • 晓芙家的阳光网页导航

    网页导航

    <!DOCTYPEhtml> <html> <head> <metacharset="gb2312"/> <title>网页导航特效</title> <styletype="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑","宋体";} a{color:#666;text-d

  • tianxiaofeng747那些年,一起撸过的匿名函数

    那些年,一起撸过的匿名函数

    接触js有一段时间后,你会发现一种函数叫匿名函数,它有什么用呢?说白了就是自动执行的一段代码,那么,匿名函数应该怎么写呢,其实,js博大精深,一些高人开辟了很多写法,本吊总结一下,肯定不是很全,欢迎大湿添加新的写法。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXH

  • loheonlyjs 算法

    js   算法

    js模拟螺旋矩形算法 <!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"co

  • hugeannex做到极致(一)

    做到极致(一)

    常见页脚固定在底下效果,我见过很多方法,兼容ie6的、比较好的一般都是用margin负值来实现,也见过很烂的,用js计算位置,而且用js计算位置的是在一家大公司里看到的(汗-_-!)。 炒旧饭就没啥意思了,所以现在说说我自己琢磨出来的,新浏览器中新的方法,代码应该已

  • myjehli css边框实现合并

    li css边框实现合并

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <styletype="text/css">

  • 小水晶Canvas标签练习第二课

    Canvas标签练习第二课

    我来画个半圆 <canvasid="Test"width="500"height="400"></canvas> <divclass="blockrun"><blockquote><script> window.onload=function() { varcanvas=$.getId("Test") varcontent=canvas.getContext("2d");//取得图形上

  • 小水晶Canvas标签练习第一课

    Canvas标签练习第一课

    var$= { getId:function(_id) { returndocument.getElementById(_id); } } 这部分是多余的么,删了也没影响啊,请问有什么作用呢 <canvasid="Test"width="400px"height="300px;"></canvas> <script> window.onload=function(){ varcan

  • 梁巴斯JSON学习笔记。

    JSON学习笔记。

    JSON可以表示三种类型的值:(以下笔记主要参考《JavaScript高级程序设计》,部分来源自己动手。) 简单值:基本语法与JS一致,但不支持特殊值undefined 对象:对象作为一种复杂数据类型,表示一组有序的键值对。 数组:数组也作为一种复杂数据类型,表示一组有序的值

  • WM_Perfecthtml基础知识——漏网之鱼

    html基础知识——漏网之鱼

    <meta>标签 使用该标签描述网页的具体摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎搜索,它采用“名称/值”对的方式描述摘要信息。 1)文

  • hs31439Js例:倒计时时钟

    Js例:倒计时时钟

    <!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

  • 910758447html5开发布局技巧

    html5开发布局技巧

    手机网站——前端开发布局技 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统

CSS3 QQ企鹅妹妹

521fengxiaoCSS3 QQ企鹅妹妹

最近公司项目一期结束,就把之前没看完的CSS3知识重新温习了一下。看到好多同学都在写QQ企鹅就心血来潮写了

前端最爱的字体YaHei Consolas Hybrid

kwoojan前端最爱的字体YaHei Consolas Hybrid

今天打开曾经开发的一些HTML,发现木有雅黑不好看啊,雅黑控实在受不鸟,于是在网上搜了搜,果然发现了

Front-end For Three Years

无解、Front-end For Three Years

不知不觉,前端三年,走过不少弯路,做过许多错事,幸好,一直在前进,虽然慢,但并没有倒退,在这里总结了

屌丝前端职业规划

tianxiaofeng747屌丝前端职业规划

楼主要转正了,老大要求自己写一篇自己职业的规划,很无奈,不写不能转正啊,然后就想着怎么写吧。正面思想

css蒙版效果

loheonlycss蒙版效果

1.background-clip 2.mask-image(不同浏览器不同处理文章有讲) -webkit-mask-attachment:

旋律自在你的心中

云婣旋律自在你的心中

运行代码,盯着图案不眨眼睛5秒钟,你会神奇滴发现,小图标悦动的节奏和你内心的旋律一样…… <!do

不是敲好代码你就是合格的员工

tianxiaofeng747不是敲好代码你就是合格的员工

楼主前几天差点被干掉,被hr叫去的瞬间,整个人都崩溃了,刚找的工作啊,还没做多久呢,本来还打算做完今年

Css3的QQ企鹅图形

hs31439Css3的QQ企鹅图形

实在是无聊,想起本网站一位朋友写的QQ图像动了心思... <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Tra

新随笔--读书笔记《学会提问》:学习提出好问题的思维方法

半饱即好新随笔--读书笔记《学会提问》:学习提出好问题的思维方法

新随笔--读书笔记《学会提问》:学习提出好问题的思维方法 书中要点摘录: “对自己的所见所闻如何

css3实现三角形面包屑导航

kittyyangcss3实现三角形面包屑导航

首先先上图: 因为公司的设计师对这种外观的面包屑导航有着执着的爱好。作为一个前端人员当然需要最

响应式网页设计- 移动、ipad端开发总结(Responsive Web Design)

lilinsoft响应式网页设计- 移动、ipad端开发总结(Responsive Web Design)

整理了一些制作响应式网页布局笔记...希望对学响应式网页设计的有帮助 响应式Web设计(ResponsiveWeb

你真懂javascript吗?

powy1993你真懂javascript吗?

QuicktestforrealunderstandingofJavaScriptcorebeyondclosuresandscopes.Herefivesmallscripts.Tryt

HTML、CSS、JS打造Windows桌面版《2048》

JerryCHTML、CSS、JS打造Windows桌面版《2048》

前言: 受益于Node的问世,Javascript终于能够挣脱浏览器这个条条框框的盒子。于是,Javascript能够

360度全景图原来是这样来的……

云婣360度全景图原来是这样来的……

深圳受到台风的一点影响,下了大雨,刮了大风,现在恢复得差不多了,估计明天出去玩的计划是没有泡汤的

html+css3 撸出腾讯QQ

tianxiaofeng747html+css3 撸出腾讯QQ

谢谢斑竹,竟然这么用功,还给我配图,还帮我排版,还让我的文章上首页,我以后一定会努力的,爱前端,爱w3

CSS3 重置Iphone浏览器按钮input,select等表单元素的默认样式

nikileeCSS3 重置Iphone浏览器按钮input,select等表单元素的默认样式

之前写了一个登录表单页面,再iphone上测试遇到了一些奇怪的问题:(分别iPhone和Android的手机上测试作对

我的阿里梦——淘宝前端必备技能

tianxiaofeng747我的阿里梦——淘宝前端必备技能

每天下班路过阿里,看到里面的灯火嘹亮,心里惴惴不安,我也想进阿里,怎么破。阿里的前端是不是都是大

Sublime Text 3功能介绍

dameinSublime Text 3功能介绍

  作为一个前端,有一款好的开发利器是必不可少的,editplus、notepad++都是不错的工具,体积轻巧,启动

酒旗风暖少年狂,为初级前端开发工程师做学习计划

半饱即好酒旗风暖少年狂,为初级前端开发工程师做学习计划

酒旗风暖少年狂,为初级前端开发工程师做学习计划 夜幕降临时,走到一张废弃已久的书桌前,打开台灯,

js基础知识——DOM下的节点属性和操作

WM_Perfectjs基础知识——DOM下的节点属性和操作

DOM下的节点属性和操作 DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensibleMarkupLanguage)

HTML5与CSS3权威指南代码清单 豆瓣:《HTML5与CSS3权威指南》简介 点击下载:HTML5与CSS3权威指南代码清单

点击下载 »

CSS3参考手册v4.0 说明:本文档兼容性测试基础环境为:windows系统;IE6-10, Firefox4-17, Chrome16-23,

点击下载 »
返回顶部