u011263845-CSDN博客

转载解读CSS布局之-水平垂直居中

地址：http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

2015-07-26 11:36:03 507

原创利用display属性写出表格的布局样式

demo地址：http://codepen.io/tianzi77/pen/gpBzjy 元素结构： <h1>display构造的table小例子，IE8及以下浏览器不支持本示例</h1> <div class="table"> <h2 class="table-caption">大神榜：</h2> <div class="table-column-group

2015-07-26 11:28:04 1504

原创使用伪元素before和after写出来的神奇效果

大家都知道before和after能写出很多很好的效果，今天偶然看到一个觉得挺好的，就顺便写了一下，复习了一下伪元素以及和伪类的区别，domo地址：http://codepen.io/tianzi77/pen/KpeKXz伪类和伪元素看似简单，很多开发者并没有引起注意，先看看伪元素和伪类的区别吧。标准的定义： CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。伪类有：:

2015-07-13 15:51:22 3084

原创 CSS vertical-align属性的用法

这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑，所以总结如下： vertical-align的定义 W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单

2015-07-12 16:26:47 2023

原创 Javascript之创建对象（工厂模式与构造函数模式）

虽然Object构造函数或对象字面量都可以创建单个对象，但是这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量重复的代码。为了解决这个问题，就可以使用工厂模式来创建对象。1、工厂模式在ECMAScript中是无法创建类的，开发人员就发明了一种函数，用函数来封装特定接口创建对象的细节。function createPerson(name, age, job) { var

2015-06-27 18:34:52 904

原创网页加载进度条中的javascript

demo地址：http://output.jsbin.com/buquyedosa思路如下：代码都有注释，就不一一介绍了。<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>进度条</title><style> .progress{ position: fixed;

2015-06-12 10:34:12 1393

原创 Javascript中的原型继承详解

js中的继承，是面向对象的知识，因为js没有类的概念，所以继承是通过对象实现的，谈到继承，就必须说到prototype，就不得不先说下new的过程。一个小小的列子：<script type="text/javascript"> var Person = function () { }; var p = new Person(); </script>我们来

2015-06-03 19:23:15 831

原创微博发布框的jquery

2015-05-26 10:35:02 1258 2

原创高亮显示当前导航条的javascript

首先写一下html结构:<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a hr

2015-05-25 20:55:35 3415 3

原创 javascript滑动门的实现方法和案例

首先我们知道js滑动门的三种实现思路： -自定义方法 -闭包 -自定义属性那么写个列子分析一下各自的好坏。demo地址：http://codepen.io/tianzi77/pen/jPMPeB html结构：<div id="content"> <div id="tabs"> <ul> <l

2015-05-20 21:44:48 1890

原创 jquery滚动公告demo

实现公告栏目循环的滚动效果，直接放代码：<!doctype html><html></body></html><head><meta charset="utf-8"><title>tianzi code</title><script type="text/javascript" src="jquery-2.1.3.min.js"></script><scr

2015-05-20 21:11:56 2492 1

原创 jquery实例demo1

<!doctype html><html></body></html><head><meta charset="utf-8"><title>tianzi code</title><script type="text/javascript" src="jquery-2.1.3.min.js"></script><script type="text/javas

2015-05-19 21:48:37 1046

原创纯CSS下拉导航和jquery下拉导航对比

纯css实现的下拉导航demo：http://codepen.io/tianzi77/pen/xGOyxp 不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现，主要应用到绝对定位中的left：auto和left：-9999px；来隐藏或者鼠标经过的时候显示下拉菜单。 htm结构：<ul class="nav"> <li><a href="/">小哲</

2015-05-19 16:15:03 672

原创 jquery强大的选择器和javascript 的对比。

案列demo：http://codepen.io/tianzi77/pen/yNJVaM 首先写结构：<body><ul id="nav"> <li class="current">tianzi</li> <li>tianzi</li> <li>tianzi</li></ul><div id="content"><div class="show">content区域

2015-05-17 17:50:32 856

你了解 CSS 吗？在六个月前，我提供了一个在线免费 CSS 测试系统。测试结果表明很多一线开发者并没有如他们所想的那样了解 CSS。目前有超过 3,000 人参加了该项测试，平均成绩只有 55 分。但是，嘿，平均分本身并没有什么意思。我更加关心大家都栽到了哪些问题上。这篇文章中，按照出错的程度将其中三个问题列出来。我会和你讨论每个问题，告诉你哪个答案被选择的最多，然后解释正确答案。可以肯定地说，如

2015-05-16 16:17:34 426

原创从一个简单例子谈谈js的捕获与冒泡问题

事件冒泡与事件捕获，下面是js中捕获与冒泡的一个实例： html结构：<div id="tianzi"> <div id="tianzi1"> <div id="tianzi2"> <div id="tianzi3"> </div> </div> </div></div>css样式控制：#tianzi{

2015-05-11 16:39:09 1325

原创完整的日历表格

平时写表格都直接table然后tr td就完事了，其中还是有很多不完善的，今天按照标准写了个日历，带样式。供日后写表格提供一个参考，搞前端规范还是挺重要的效果地址：http://codepen.io/tianzi77/pen/JdGpwjcss部分：body { font-family: "myriad pro", arial, helvetica, sans-serif; font

2015-05-11 11:11:48 3130

原创图片折叠效果CSS实现

觉得这个效果不错，就随便写了一下。效果：http://output.jsbin.com/gerogawiqi/1 思路很简单，添加一个空伪元素，然后进行边框设置，实现折叠的效果。不过看起来还是很好看的。css部分：.tianzi{ width:300px; height: 300px; background: orange; po

2015-05-10 17:45:09 3458

原创原生javascript基础知识点（2）复习与回顾

常用对象上节课有提到引用对象，并大致的讲了一下。这里再选取其中3种稍微详细的讲一下。Object对象，其内容形式为键值对，主要用来存储和封装。创建对象创建一个对象有两种常见方式，通过对象字面量 {} 或者 new 操作符。如下：var obj = {};var obj2 = new Object();对象内容的键值对中，值可以是各种类型的数据，如：var obj = { key1: 's

2015-05-08 15:16:42 669

原创 CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过，然后来了这里做的第一个活儿就涉及到他。因为怕不会用，就用他们原来切的，那个调的费事啊，算那个background-position困难的啊。原因是他们的雪碧图切放在了一起，没有留有空隙，所以，只能用一个废标签去专门放一个图标。现在发现雪碧图还是很有用的，把所有要用的图片放在一起，然后根据定位来调出要用的图片很方便。随便写了个小demo：http://codepen.i

2015-05-03 21:32:55 2630

原创用css3或者jquery实现切换按钮效果

switch demo地址：http://codepen.io/tianzi77/pen/VLLBmQ整理思路：这个 DEMO 的功能大致就是模拟开关效果，用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动，这里我们最直接的可以想到这种实现：左边一个蓝色方块，中间一个白色方块，右边一个灰色方块，三者宽度调整宽度和位置来完成动画这么来看，我们需要控制的元素有3个，并且我们仔细观察

2015-05-02 12:42:57 2609

原创阿里巴巴前端面试题：三列布局知多少？

前几天收到阿里前端的面试通知，整体面试比较顺利，但是还是有个问题回答的不令面试官满意。本来面试都快结束了，该涉及的都涉及了，而且交谈过程中比较轻松，面试官突然来了句你不是精通布局吗，给你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 502

原创利用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 817

转载写给女友的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 593 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 418

原创正则表达式匹配邮箱规则

筛选出有邮箱的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

空空如也

空空如也