随笔分类 -  DOM/JavaScript/CSS

 
CSS 浮动
摘要：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： 再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。 如下图所示，如果包含框太窄，无法容... 阅读全文
posted @ 2010-11-10 10:27 做个不善的人 阅读(258) 评论(0) 推荐(0)
Cross-site scripting，XSS
摘要：XSS 是一种很常见的攻击手段，在该攻击中攻击者将一个恶意代码段注入到一个运行良好的站点中。XSS 攻击有如下两种基本的类型： Reflected XSSStored XSSReflected XSSReflected XSS 攻击的前提条件是某Web应用程序会把用户输入的信息不加检查和限制地返回给用户。一个常见的例子就是，用户登录时，输入用户名和密码，比如用户Joe登录，密码错误了，网站会显示Sorry, Joe, Your password is incorrect。网站把用户名直接返回给用户， 如果用户输入了Javascript代码，会直接返回给用户，并造成Javascript代码执行。 阅读全文
posted @ 2010-10-25 20:09 做个不善的人 阅读(1574) 评论(0) 推荐(0)
offsetLeft,Left,clientLeft的区别
摘要：Reference: http://www.cnblogs.com/panjun-Donet/articles/1294033.html 阅读全文
posted @ 2010-10-12 17:49 做个不善的人 阅读(298) 评论(0) 推荐(0)
DOM and CSS positioning
摘要：offsetXXX、scrollXXX 与clientXXX的区别与联系 offsetTop returns the distance of the current element relative to the top of the offsetParent node. offsetLeft Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node. offsetHeight returns 阅读全文
posted @ 2010-10-12 09:27 做个不善的人 阅读(255) 评论(0) 推荐(0)
CSS
摘要：http://blog.csdn.net/zhujianjiangnan/archive/2009/10/25/4726037.aspx http://snipplr.com/view/86/clear-floats-without-structural-markup/ http://www.docin.com/p-47288513.html 阅读全文
posted @ 2010-10-08 23:03 做个不善的人 阅读(135) 评论(0) 推荐(0)
How To Clear Floats Without Structural Markup
摘要：Clearing Floats The Old Fashioned Way当一个有边框或者有背景的容器包含float时，float不会自动强制迫使容器的高度自动增加以便适应将所有的float包含进去。相反，容器会忽略 float，这样float会超出容器的范围（底部）。那些之用windows下的IE的人员会强烈反抗“那不正确“。的确，IE会根据float自动适应高度，但那只限于容器有个确定的尺寸，在很多情况下并没有想象的那么好，而且用IE的用户仅仅占一部分。W3C建议在容器的末尾增加一个“clear:both"的元素，强迫容器适应它的高度以便装下所有的float。正如下面所描述的:“ 阅读全文
posted @ 2010-10-08 23:02 做个不善的人 阅读(527) 评论(0) 推荐(0)
一个JavaScript实现的幻灯片程序分析
摘要：Javascript文件Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/*inlineSlidesSlideshowexampleofChapter6of"BeginningJavaScriptwithDOMScriptingandAJAX"byChristianHeilmann(c)ChristianHeilmannandApress*/inlineSlides={//CSSclassesslideClass:' 阅读全文
posted @ 2010-09-24 16:51 做个不善的人 阅读(444) 评论(0) 推荐(0)
JavaScript 操作图片
摘要：1. 使用几个图片的翻转下面是一种最简单、没有使用任何缓存机制的方法：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><scripttype="text/javascript">functionrollover(img,url){document.images[img].src=url;}</script>THML的代码如下所示：Code highlighting produced by Actip 阅读全文
posted @ 2010-09-24 14:26 做个不善的人 阅读(1324) 评论(0) 推荐(0)
JavaScript对象模型-执行模型
摘要：数据类型基本数据类型基本数据类型是JS语言最底层的实现。简单数值类型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文单词在这里仅指数据类型的名称... 阅读全文
posted @ 2010-09-08 16:10 做个不善的人 阅读(222) 评论(0) 推荐(0)
Javascript create Object(define new Class)
摘要：JavaScript创建新类(或对象)的方法主要有以下几种：工厂方式、构造函数式、原型方式、混合的构造函数/原型方式、动态原型方法、混合工厂方式。 1.工厂方式： Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->function say() { document.write(this.name+"<br/>");}function people(name, age, sex) { var pTemp =new 阅读全文
posted @ 2010-09-05 13:00 做个不善的人 阅读(3269) 评论(0) 推荐(0)
DOCTYPE
摘要：The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document 阅读全文
posted @ 2010-08-25 19:57 做个不善的人 阅读(386) 评论(0) 推荐(0)
前端开发常见图片格式详解
摘要：端开发设计，打交道最多的就是图片啦~今天就来个图片格式讲解，也许一些围绕你的问题可以在这篇文章中找到答案 Gif格式图片的特点 透明性 Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。 动画 Gif这种格式支持动画。 无损耗性 Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使 得图像质量产生损耗。 水平扫描 Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*5... 阅读全文
posted @ 2010-06-25 13:13 做个不善的人 阅读(959) 评论(0) 推荐(0)
UserAgent的历史变迁(zz)
摘要：Google推出的Chrome让大家热议纷纷，只有专业用户才会注意到用Chrome访问网页时发出的“Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13”UserAgent字符串，貌似天书，它到底是怎么回事儿代表什么呢？我们来看看吧：最早的时候有一个浏览器叫NCSA Mosaic，把自己标称为NCSA_Mosaic/2.0 (Windows 3.1)，它支持文字显示的同时还支持图片，于是Web开始好玩起来。然后出 阅读全文
posted @ 2009-08-12 13:07 做个不善的人 阅读(436) 评论(0) 推荐(0)
Understanding User-Agent Strings
摘要：IntroductionWhen you visit a Web page, your browser sends the user-agent string to the server hosting the site that you are visiting. This string indicates which browser you are using, its version number, and details about your system, such as operating system and version. The Web server can use thi 阅读全文
posted @ 2009-08-12 10:13 做个不善的人 阅读(943) 评论(0) 推荐(0)
JavaScript Object Notation (JSON)
摘要：JSON, short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects).The JSON format is often used for serialization, transmitting structured data over 阅读全文
posted @ 2009-08-07 13:32 做个不善的人 阅读(779) 评论(0) 推荐(0)
HTML颜色(zz)
摘要：在计算机中表示颜色的模式有好几种，在HTML网页设计中使用的是RGB模式。红光、绿光、蓝光是色光加光混合的三基色， 通过红光、绿光、蓝光不同比例的组合，能产生任何颜色的光。 计算机的显示器显示画面是靠显示器屏幕的微小的发光点发出不同比例的红光、绿光、蓝光三种颜色的光而显出千变万化的画面。 RGB色彩模式就是用R表示红光的分量，用G表示绿光的分量，用B表示蓝光的分量，RGB数据就可以表示出任何一种颜色， 任何一种颜色也可以用一个RGB数据表示出来。在文字格式一文中曾说过color属性的取值有用英文关键字、16进制颜色代码、rgb函数三种类型。现在我们就来学习16进制颜色代码的组成和表示不同色彩的 阅读全文
posted @ 2009-07-17 01:09 做个不善的人 阅读(875) 评论(0) 推荐(0)
zzWeb2.0中流行的设计元素：颜色
摘要：颜色的变化跟人类的智慧一样，是无穷的。每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨，再做补充吧! 淡淡的浅色系及延伸应用 此类颜色似乎最早被应用在一些文档处理软件比如word，和操作系统里(比如MacOSX)用于分类归档、标记、或者突出显示使用。此类颜色给人的感觉很环保,不伤眼睛，而且对比度恰到好处,既可以有效区分,又不会显的太过突兀. google,... 阅读全文
posted @ 2009-07-17 00:52 做个不善的人 阅读(218) 评论(0) 推荐(0)