lulalahappy123的专栏

原创 浮动布局——margin & 闭合浮动

实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 考察浮动 #content { background-color: red; position: relative; padding: 12px;/*red 的padding+blue的margin

转载 圣杯布局

css 布局 *{ margin:0; padding: 0; } #head{ text-align: center; background-color: #CCCCFF; } #footer{

原创 两种不同的方法来实现一个两列布局

用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化  *{ margin:0; padding:0; } .div-a{ background-color: #ccf; f

转载 CSS实现自适应圆角矩阵——滑动门

css圆角矩形对于很多人来说,都觉得很难.在table中要实现圆角矩形我想很多人都会,而在css中要定义圆角矩形也并不难,不过要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。在这个教程中,我们一起探讨一个css圆角矩形的技术.　　为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在

原创 float浮动不清楚对块状元素的影响

*{margin:0; padding: 0} /* p{ margin: 0; float: left; }*/ ul { float:left; width:100%; padding:0;

原创 Github使用教程for windows 零基础使用说明

一、自建项目库无论是fork还是自己建，先下载一个客户端，for windows:一个是github 一个是git shell 在Github上 新建项目登录--“+”新建--publish repository--publish 项目名--在本地项目文件夹新建文件——Github中commit ——点击同步——本地文件修改——commit——sync(同步) ——view

原创 块状元素居中（三）

不是很懂！水平居中总结-不定宽块状元素方法（三）方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。代码如下： 1 2 3 css代码

转载 块内元素水平居中

水平居中总结-不定宽块状元素方法（一）在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：加入 table 标签设置 display;inline 方法设置 position:relative 和 left:

原创 层模型：CSS定位

层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，原文档流中的元素会填补它在文档流中空出来的位置。然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

转载 CSS盒模型宽度

盒模型--宽度和高度盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。比如：css代码：div{ width:200px;

转载 HTML元素

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、 、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、

转载 js数组的操作

js数组的操作用 js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧1、数组的创建 var arrayObj = new Array();　/

转载 JS---创建自己的“JavaScript库”，原来如此简单

博主在上一篇文章中提到了JavaScript库实际上就是一堆函数的集合，就是方便给你调用的不用自己写那些功能强大的函数……这篇文章说一说如何创建JavaScript库及需要注意的问题！期待您光临斧正！行文目录：点击对应目录进行跳转编写JavaScript库要注意的问题编写JavaScript库的模板代码编写JavaScript库(实例

转载 jquery $("#id").click()

菜鸟在编写jquery发现了一个问题在编写jquery的时候我直接写$("#one").click(function(){alert("..........")}); 为什么不可以呢？ 必须:$(document).ready(function(){$("#one").click(function() {alert("Hello world!");});}); 这样写呢? 可以不添加$

转载 JS选取DOM元素的方法

摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选）今天试了下各种选取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表现最好，其次是Firefox）选取文档元

转载 js substr 与substring

substring 方法用于提取字符串中介于两个指定下标之间的字符substring(start,end)开始和结束的位置，从零开始的索引参数     描述start     必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop     可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的

转载 画线

我有两个图 我点击a图 再点击b图 ab之间就会出现一条连线 而且我拖动a或b连线会跟随变化只需要监听并且计算两个点的运动轨迹就可以了吧function createLine(x1,y1, x2,y2){ var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); var angle = Math.atan2(y2

转载 JS引用

原创 js闭包

javascript的闭包群里有人问这个问题，我整理了一下，参见司徒正美老师博客有讲window.onload = function () {var attr = ["width", "height", "background-color", "display", ""];var value = ["200px", "200px", "red", "none", ""];var squar

原创 原生js学习网址

抛弃jQuery，深入原生的JavaScript

转载 正则表达式

点击打开链接正则表达式 - 语法正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。列目录时，　dir *.txt或ls *.txt中的*.txt就不是一个正则表达式,因为这里*与正则式的*的含义是不同的。构造正则表达式的方法和创建数学表达式的方法一样

转载 正则表达式 \b

\b代表字与字中间那个看不见的东西，如here is a word那么，这句中有好几个\b, 每个单词的前后都有一个\b.所以你用 \bhere\b 可以匹配上面这个here,但如果here 不是一个单词，而是一个单词的一部分，如 adheread, 这样的话，用here 可以匹配，用\bhere\b就不能区配了，因为ad后面没有\b. 所以 adhere 中的here

转载 正则基础之 ？：

?: 是 不想被捕获的时候使用 可以提高程序执行速度正则基础之——反向引用 正则基础之——捕获组（capture group）比如 ([a-z][0-9])+ 这个正则表达式里 ( ) 里面的内容被捕获了， 反向引用的时候可以用上 。一般正则替换的时候用的多 像UBB代码 但是 如果写成 (?:[a-z][0-9])+ 跟上面 正则表达式 整体匹配是一样的 就

转载 正则表达式

^符号表示开头^once表示该模式只匹配那些以once开头的字符串。例如该模式与字符串"once upon a time"匹配，与"There once was a man from NewYork"不匹配$符号用来匹配那些以给定模式结尾的字符串。bucket$这个模式与"Who kept all of this cash in a bucket"匹配，

转载 九宫格基本布局

基本的九宫格(http://www.cnblogs.com/binyong) *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:20px auto;padding:10px;background:#F34703;} .t_l,.t_m

原创 九宫格布局

实现九宫格，且无外边框；我认为这样做最好 * { padding:0; margin:0;} ul{ width: 153px;height: 153px; background: #99FF99;margin: 10px 20px; } ul li{ list

转载 window.location.hash属性介绍

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。很多人都喜欢收藏

原创 实现一个简单的DOM选择器

实现一个简单的DOM选择器 预备知识DOM相关知识http://www.w3school.com.cn/htmldom/index.asp 具体描述实现一个方法$，可以完成以下功能 1.可以通过id获取一个DOM例如：......$("#dom1") // 返回一个数组，数组中唯一的元素为id为dom1的div 2.可以通过css的cla

转载 javascript 中的call函数的理解问题；apply

function myFun(){ document.write(arguments + " ");} var myObject = new Object(); myFun.call(myObject，13,3,95); 输出结果是[object Object] 解释：call([thisObj[,arg1[, arg2[,   [,.argN]]]]

转载 DOCTYPE

DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYP

原创 锚点

锚点锚点就是点击链接，到页面特定位置，可以用的name属性；也可以根据任意标签的id值；但是有一点需要注意，只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题所以可以将name和id结合起来，XHTML1.0不推荐使用name属性,因此必须考虑向后兼容.向前兼容用name 向后兼容

原创 HTML表单

总结一下表单，讲讲的用法表示建立一个表单，一般表单有许多输入、选择项，有一些按钮，其中有按钮按了能提交表单到服务器。里面一般有下面这些子句可供需要时使用： action=服务器文件名，可能是CGI程序，也可能是ASP、PHP等服务器端脚本，如果省略，表示提交给当前的文件。action 动作(提交后执行的操作) method=post|get，选择方法为POST或者GET，他们的

原创 CSS实现左中右三栏布局

左右定宽，中间自适应

转载 负margin实现左右布局

CSS网页制作教程:负margin制作自适应左右布局刚刚开始学习css的时候，我采用了float为主来实现布局的方式，但是运用浮动很长一段时间之后，我发现这是一种被人牵着鼻子走的做法。至少，页面上不应过多的运用浮动，尤其是不要拿来确定整个布局。很简单的道理，当你用了float:left,后面的div很可能需要跟着用float:left，而且当宽度不够的时候，本来该和上一个div

原创 js的slice函数

经常看到slice函数处理数组，如克隆，时候用slice(0)今天探讨一下slice功能点击打开链接1 var aArr = [0,1,2,3];2 var m = aArr.slice(0);3 aArr = [3,2,1,0];4 alert(m);//输出0,1,2,3，这时虽然aArr中的值已经改变，但是因为使用slice方法已经创建一个新的数组。

原创 深度克隆与浅度克隆

javascript中对象的深度克隆深度克隆：原不变浅克隆：通过“=”赋值操作；基础类型：值传递；对象：引用。以下number function string 执行的浅克隆（赋值操作），但是结果表现形式与深度克隆一致，都是原不变，相当于深克隆。 浅==深对于基础类型可以理解赋值操作原来的不变，但是function作为引用，原也不变，是因为，函数的克隆会在内存单独开辟空间，互不影

原创 javascript事件监听

大家可以参考一下两个博文，深入学习。JS实现监听者模式或观察者模式设计模式学习----观察者模式（事件监听实现）javascript事件监听模式我在这里做些基础性的总结。首先，什么是事件监听？一个元素有一个事件 触发的时候 浏览器直接解释执行就完了呗 为什么还要监听？？意义 何在？ 监听到底是干什么的？跟后台有关系？比如说一个页面上有什么东西,其中有一个按钮

转载 观察者模式（监听器模式）

观察者模式的实现        观察者模式有很多实现方式，从根本上说，该模式必须包含两个角色：观察者和被观察对象。观察者和被观察者之间存在“观察”的逻辑关联，当被观察者发生改变的时候，观察者就会观察到这样的变化，并且做出相应的响应。       实现观察者模式的时候要注意，观察者和被观察对象之间的互动关系不能体现成类之间的直接调用，否则就将使观察者和被观察对象之间紧密的耦合起来，从根本

转载 小tip: margin:auto实现绝对定位元素的水平垂直居中

« 小卖弄：纯CSS实现的outline切换transition动画效果小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 »小tip: margin:auto实现绝对定位元素的水平垂直居中by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?

原创 左右布局

1、右定宽，左自适应右边定width,float:righthtml中rightside放在前面 *{margin:0 auto; padding:0; font-size:9pt;} .contact{width:100%; border:solid 1px red;} .leftside{ background:bisque; height:100