- 博客(31)
- 收藏
- 关注
RSS订阅原创 阿里巴巴前端面试题：三列布局知多少？
前几天收到阿里前端的面试通知，整体面试比较顺利，但是还是有个问题回答的不令面试官满意。 本来面试都快结束了，该涉及的都涉及了，而且交谈过程中比较轻松，面试官突然来了句你不是精通布局吗，给你3个DIV，你让他们一行单列布局，中间宽度自适应。我脑门一转心想这还不简单吗，于是在他的imac上从容的敲出如下代码：<style type="text/css"> body,div{margin:0;
2015-04-25 16:52:16
1604
原创 总结清除浮动方法大全（7种）
1）添加额外标签 这是在学校老师就告诉我们的 一种方法，通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。 再如：<div class="warp" id="float1"> <h2>1）添加额外标签</h2> <div class="main left">.main{float:left;}</div> <div
2015-04-24 16:14:35
1766
原创 自己常见的一些JavaScript兼容总结
1、document.formName.item(“itemName”) 问题 说明：IE下,可以使用document.formName.item(“itemName”)或document.formName.elements[“elementName”]; Firefox下，只能使用document.formName.elements[“elementName”]。 解决方法：统一使用docu
2015-04-20 20:03:30
9517
1
原创 用css3拼凑出来的桃心
demo地址：http://codepen.io/tianzi77/pen/qdWjdJ 先定义图片旋转起点transform-origin， 然后改变旋转角度transform：rotate（xdeg） 最后实现2个图片拼成好看的桃心，用：before和：after进行连接。 content设置为空。 样式代码：<style type="text/css"> #heart
2015-04-19 14:22:52
1277
原创 细说css3中的animation和keyframe
总结用法如下： transform-style: preserve-3d; //设置3d效果。 animation-name:xiaozhe; //设置动画名为xiaozhe。 animation-duration：7s；//设置动画持续时间为7s。 animation-iteration-count: infinite;//指定动画无限循环，也可以设置具体的循环次数number。 a
2015-04-19 12:09:11
1740
原创 css3经典动画与旋转样式
**demo演示效果：http://codepen.io/tianzi77/pen/LVPzqB** 代码如下：主要用到css3的animation和transform transition keyframe 以及text-shadow属性。 Examples surprised:target span{font-size:50%;line-height:0;}
2015-04-19 11:47:49
501
原创 利用css和javascript制作的幻灯片效果
幻灯片demo：http://codepen.io/tianzi77/pen/aOoJVO下面是代码:Examplesbody,div,ul,li{ margin:0;padding:0;}ul{ list-style-type:none;}#box{ position:relative;
2015-04-18 13:15:25
698
转载 我讨厌志向远大的人
我见过很多志向远大的人,他们或想创办一个上市企业,或想做大官,或想著书立说,或想建立起”国内最大的XX网站”,我很讨厌这些人.我跟踪观察一个人,07年我在一个论坛看到他的帖子,他想搞中国的城市建设理论研究,希望能著书立说. 6年过去,他压根就没写过一篇有份量的论文,所有的文章总是反复阐述一句话:”我要做城市建设理论研究,为中国的发展做出极大贡献”.6年过去,他仍没有工作,在博客上乞
2015-04-17 22:03:34
966
1
原创 css3.0中transition属性设置过度的动态效果
小例子：Examples.liuzhe {position:relative !important;font: 30px "微软雅黑";background: #ff9e04;-webkit-transition-property: background; -moz-transition-property
2015-04-16 17:12:34
848
原创 jQuery 事件，jQuery util，jQuery core
jQuery 事件 2上节课我们讲了很多 jQuery 里的事件，这里再补充几个和加载流程相关的事件。loadunloadreadyholdReadyload该事件在绑定的节点以及它的子节点加载完成后触发。可以绑定在各种节点上，例如但不仅限于这些:imagesscriptsframesiframeswindow使用方法和其他事件并无区别:$ele.on('loa
2015-04-16 16:13:21
938
原创 javascript中的this与继承分析
拷贝式的继承这种继承方式简单的说就是通过复制的方式将父类中的内容拷贝到子类中，从而实现了继承。关于 this之前课中我们讲构造函数时提到了 this ，当时并没有讲的太清楚究竟它是什么，因为其实它的取值是根据情况的不同而会发生变化的。所以这节课我们花点时间来聊聊浏览器环境中的它。全局 this在浏览器中全局环境下的 this 即为 window 对象。大家可以执行以下代码来进行
2015-04-15 21:56:29
465
原创 jQuery基础 第二课 jQuery动画 jQuery事件
本节课的主要内容为:jQuery 事件jQuery 动画jQuery 事件在原生 JS 中，我们绑定事件大体可以通过两种方式:修改 on事件名 这个 DOM 属性通过类似 addEventListener 的 DOM 方法var ele = document.getElementById('eleId');ele.onclick = function () {
2015-04-14 15:59:01
357
原创 函数调用以及document.write()练习
javascript中，函数可以传递一个实参 形参，还可以在函数里面调用传递函数，成为回掉函数。document.write()创建表格做成一个函数的练习。Examples var liuzhe=function(row,col,width,color){document.write('');for(var i=0;iif(i%
2015-04-14 15:53:55
816
转载 写给女友的JS教程—之JS闭包
女朋友”胖子”正在学JS, 到闭包这一块遇到了一些障碍.我在网上帮她找了一些文章,但又写的又枯燥又长,我来写一篇简单点的吧.从一次穿越说起—–有姐妹俩,大桃花和小桃花相继出生,有一次小桃花在河边洗衣服,出现奇特星像–十字连珠,小桃花穿越到了清朝.还进宫见到了四阿哥,身边有一群宫女,和小桃花妹相称.四阿哥问:”小桃花,你的姐姐是谁?”小桃花怎么
2015-04-13 22:58:04
683
原创 初识jQuery 什么是jquery
本节课的主要内容为:jQuery 初识jQuery 选择器关于 $ 函数关于 jQuery 对象常用 DOM 方法jQuery 初识jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目，基本功能包含访问和操作 DOM、控制页面样式、处理页面事件、便捷的动画、便捷的 AJAX 等。大家可以通过这个链接下载到 jQuery 2.1.3 的压缩版本，请大
2015-04-13 17:10:11
592
1
原创 纯css实现网站导航条下拉效果
不用javascript效果实现导航条的下拉效果。纯css属性实现，主要应用到绝对定位中的left：auto和left：-9999px；来隐藏或者鼠标经过的时候显示下拉菜单。下面是代码：css导航下拉效果body { font-family: "微软雅黑"; font-size: 1.4em; margin-top: 4em;
2015-04-13 16:59:32
686
原创 JavaScript 基础 Part 4
小练习将一个日期字符串如 '2014-12-12' 转化为中文 '二零一四年一二月一二日'。function date2CN(str) { var date = new Date(str); if (date.toString() === 'Invalid Date') return 'Not a Date'; return str2CN(date.getFul
2015-04-12 17:52:25
417
原创 正则表达式匹配邮箱规则
筛选出有邮箱的li项；用正则表达式以及exec（）函数进行匹配。详细代码如下Examplesul{border: 1px dotted black;background: green;border-radius: 10px;width: 400px;height: 200px;}li{
2015-04-12 17:47:54
1222
原创 JavaScript 基础 Part 3
第一题function min(arr) { var len = arr.length; if (!len) return; var res = arr[0], i; for (i = 1; i < len; i++) { res = arr[0] > arr[i] ? arr[i] : res; } re
2015-04-11 22:54:08
355
原创 JavaScript 基础 Part 2
常用对象上节课有提到引用对象，并大致的讲了一下。这里再选取其中3种稍微详细的讲一下。Object对象，其内容形式为键值对，主要用来存储和封装。创建对象创建一个对象有两种常见方式，通过对象字面量 {} 或者 new 操作符。如下：var obj = {};var obj2 = new Object();对象内容的键值对中，值可以是各种类型的数据，如：var obj
2015-04-11 16:13:10
481
原创 Front end foundation course 5(javascript 1)
JavaScript 基础 Part 1什么是 JavaScriptJavaScript（以下简称JS）是一种动态脚本语言，弱类型，继承基于原型。遵循的规范是 ECMAScript。如何引入 JS外部文件内部脚本script src=''>script>script> // do some stuffscript>Hello world// 输出 He
2015-04-11 12:00:20
489
原创 Front end foundation course 4(css2)
CSS 基础 Part 2盒模型什么是盒模型CSS的盒模型就是用来描述CSS中元素平面空间构成状态的一个模型。如下图：paddingpadding-leftpadding-rightpadding-toppadding-bottomborderborder-widthborder-colorborder-stylee.t.cmarginmar
2015-04-10 16:37:32
476
原创 canvas标签结合javascript做出动态时钟效果
代码如下:body{background: purple;}var clock=document.getElementById("liuzhe");var cxt=clock.getContext("2d"); function drawclock(){ //清除画布 cxt.clearRect(0,0,500,
2015-04-10 16:34:57
445
原创 javascript结合canvas标签做出来的时钟效果
代码如下：body{background: purple;}var clock=document.getElementById("liuzhe");var cxt=clock.getContext("2d"); function drawclock(){ //清除画布 cxt.clearRect(0,0,500,
2015-04-10 16:32:40
559
原创 Front end foundation course 3（css1）
CSS基础什么是CSSCSS 即层叠样式表，主要作用就是指定 HTML 中各元素的样式，从而使整个页面达到很好的展示效果。CSS引入方式外部文件内部样式表内联样式CSS语法基础语法selector 表示选择器，花括号中即为对其修饰的属性和值的键值对。selector { roperty: value}分组通过逗号分隔可以将选择器分组，这一组的
2015-04-09 16:45:28
347
原创 css3新增选择器的一些练习。
css3非常强大，可以实现很多以前只能通过js实现的功能。也简化了许多不必要的复杂代码。简单练下一下css3的选择器：li{list-style: none;}input:disabled{background: yellow;color: green;}input:enabled{background: #f90;color: blue;}
2015-04-09 16:33:34
543
原创 html5中canvas标签画图方法。
注意:写脚本js时必须放在canvas标签后面，不然浏览器无法识别的canvas标签 var xcanvas=document.getElementById("xian"); var cxt=xcanvas.getContext("2d"); cxt.moveTo(10,
2015-04-07 16:58:38
552
原创 关于html音频以及视频标签video audio标签的实例
html的video标签功能很强大，增加了许多属性，比如autoplay controls loop poster等还可以用js直接调用paly() pause()等方法这里只联系一下audio的使用：小哲是笨蛋body,audio{padding: 0;margin: 0;}body{background: ur
2015-04-06 18:32:51
1323
原创 Front end foundation course 2(html2)
HTML tags part 2imgsrcaltheightwidthformactionmethodfieldsetlegendbuttonlabelinputcheckboxradiotextbuttonresetdate, url, color, email ... e.t.c [HTML5]textareaselectoptiontabletheadtbodytfoottrtht
2015-04-06 15:36:41
396
原创 Front end foundation course 1（html1）
前端开胃菜第一课，本节课主要内容为：开发环境介绍HTML 入门 Part 1Development environmentText editor文本编辑器主要用来进行一些文本编辑工作，是开发中的主力工具。使用自己熟悉或者顺手的文本编辑器即可。Sublime textAtomNodepad++Vime.t.cIntegrated development environ
2015-04-06 15:25:47
417
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人