Web前端笔记详细版.docx

Web前端开发理论篇WEB标准WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。结构标准语言XMLXML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。XHTMLXHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。CSSCSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262采用Web标准的好处对于访问者：1. 文件下载与页面显示速度更快。2. 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。3. 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。4. 用户能够通过样式选择定制自己的表现界面。5. 所有页面都能提供适于打印的版本。对于网站所有者：1. 更少的代码和组件，容易维护。2. 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。3. 更容易被搜寻引擎搜索到。4. 改版方便，不需要变动页面内容。5. 提供打印版本而不需要复制内容。6. 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。实现内容和形式的分离，做到模块化开发，同时进行，减少开发时间成本便于维护，低耦合的模块设计，单一模块的修改并不影响其他模块，减少维护成本结构清晰，页面体积小，浏览器兼容性好对用户友好，页面可用性、可访问性高，如在不同浏览器情况下都能正常访问页面，页面打开速度快，良好的交互性与用户体验，方便用户获取所需信息，减少用户时间成本经过SEO优化后的站点被搜索引擎收录的机会更多，从而给站点带来更多的用户提高用户价值，提高企业价值初学web标准的几个误区1. 不是为了通过校验才标准化web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。 W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，css的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不必要的浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。2. 不要用传统的表格思维来套div“CSS布局就是将原来用table的地方用div来替代，原来是表格嵌套，现在是DIV嵌套。”这种观点是错误的！ 请跳出原来表格布局的禁锢，抛弃一个td接一个td放置图片和内容的思维方式。我们上面说过web标准的目的是分离内容和表现，你可以这样思考，页面里有的仅仅是内容，没有修饰的情况下，它看上去就是一张白白的页面，上有一些文字和图片(这个图片是指内容中的图片，是有真实意义的图片)。这些文字图片仅仅是依次罗列下来，只有结构，没有任何样式。然后加入表现，将所有修饰的图片作为背景，用C SS来定义每一块内容的位置、字体、颜色等。 这样制作的页面才是内容与表现分离的，就是说，当你抽掉css文件，剩下的就是干净的内容。这样才能在文本浏览器中阅读，才能在手机、PDA中阅读，才能随时修改CSS实现改版。3. 不必为每块内容都建立一个id有网友抱怨css文件太大、太复杂。仔细看他们的代码，发现原因是他们对每块内容、甚至每句话都定义一个div，建立一个ID。这一方面是对样式表应用的不熟悉，另一方面也表现出对web标准没有彻底理解。 我们知道内容都是有结构的(如果不明白，请阅读：url=/article/tips/2004/43. html理解表现和结构相分离 ),相同的结构的内容我们可以用同一个样式来定义，比如相同级别的标题、正文、图片。对于多次引用的样式可以用class来定义，不需要每个都用id；另外也不是说一定要用，你完全可以用别的来代替，同样都是块级元素，一样有盒模型的七个参数，仅仅方便浮动。 至于仅仅为了行高、间距、一个修饰图片而增加额外的div，我想随着对CSS的应用和理解，你很快就可以省略掉这些。我们反对用DIV的嵌套取代table的嵌套，这没有任何意义，不能体现内容的结构化。希望大家多研究CSS，写出最简练，最有效的样式表。4. 不要因为一点挫折就轻言放弃我想这是一个态度和处事方法问题，这不仅仅针对学习web标准。学习任何新知识，接受新概念，都有困难，特别是需要你改变原来已有的习惯和思维时。唯一的问题就是：你认为学习web标准是否值得？你可以问问自己：你是否认可web标准带来的这些好处(简化代码、加速开发、压缩文件尺寸、提高下载速度、更好的易用性、获得更多用户、更易于维护、多平台兼容)？你是否觉得世界通用的XML离你还很远？你是否认为现在掌握的HTML知识就已经足够了？ 自从99年以后，网页制作技术在国内就没有怎么进步和变革过(除了flash的兴起)，而在国外前进的脚步就一直没有停止过，xhtml1.0、xhtml1.1、xml、xsl.，W3C和各大软件公司都在不断的研究和推进web技术，使它更方便、更有效、更强大。web标准的应用和推广国外已经开展了八年多(以zeldman的web标准组织网站为起点)，虽然困难重重，但正在逐步被人们接受和认可。为什么我们依然陶醉在网站表面的“繁华”上，不去思考页面背后本质的东西。比较AS2.0和AS3.0在面向对象方面的异同1. 定义ActionScript 2.0：实际上是as1.0的升级版，首次将OOP（Object Oriented Programming，面向对象的程序设计）引入Flash，但并不是完全面向对象的语言，只是在编译过程中支持OOP语法。ActionScript 3.0：是一个完全基本OOP的标准化面向对象语言，最重要的就是as3.0不是as2.0的简单升级，而完全是两种思想的语言。可以说，as3.0全面采用了面向对象的思想，而as2.0则仍然停留在面向过程阶段，举个例子，就像VB和C#的感觉。在as3.0里，可以看到java和c#的影子，确实，这三种语言大部分思想都是一致的，只有一些小的区别，比如as3.0引入了命名空间的概念，但是不支持比如委托,在包封装及外部访问上也引入了一些新概念。2. 发展过程一、 ActionScript 1.0最简单、最灵活、比较容易理解。既可以用原始的方式一个个地创建影片、设置对象的事件处理函数，等等。早期的flash 3中的ActionScript 1.0语法冗长，主要的应用是围绕着帧的导航和鼠标的交互.这种状况一直保持到flash 5。到flash 5版本时ActionScript已经很象JavaScript了。它提供了很强的功能和为变量的传输提供了点语法。ActionScript同时也变成了一种prototyped（原型）语言，允许类似于在javscript中的简单的oop功能。这些在随后的flash mx(6)版本中得到的增强。二、 ActionScript 2.0则相对比较规范，是1.0的升级版。首次将OOP引入FLASH。Flash MX2004(7)引入了ActionScript 2.0,它带来了两大改进：变量的类型检测和新的class类语法。ActionScript 2.0的变量类型会在编译时执行强制类型检测。它意味着当你在发布或是编译你的影片时任何指定了类型的变量都会从众多的代码中剥离出来，检查是否与你现有的代码存在矛盾冲突。如果在编译过程中没有发现冲突，那么你的swf将会被创建，没有任何不可理解变量类型的代码将会运行。尽管这个功能对于flash player的回放来说没有什么好处，但对于flash创作人员来它是一个非常的好工具，可以帮助调试更大更复杂的程序。在ActionScript 2.0中的新的class类语法用来在ActionSctipt 2.0中定义类。它类似于Java语言中的定义。尽管Flash仍不能超越它自身的原型来提供真正的class类，但新的语法提供了一种非常熟悉的风格来帮助用户从其它语言上迁移过来，提供了更多的方法来组织分离出来As文件和包。三、 ActionScript 3.0更加系统、规范。完全OOP。接下来我们进入到flash CS3(9;在flash8中没有发生多大的变化)ActionScript 3.这里我们不光有一个带有新的版本号的ActionScirpt 语言，还有一个全新的虚拟机即Flash Player在回放时执行ActionScript的底层软件。ActionScript 1.0和ActionScript 2.0都使用是AVM1(ActionScript 虚拟机1),因此它们在需要回放时本质上是一样的，记得我们在ActionScript2上说过它增加了强制变量类型和新的类语法，它实际上在最终编译时变成了ActionScript 1，而ActionScript 3.0运行在AVM2上，一种新的专门针对ActionScirpt 3代码的虚拟机。基于上面的原因，ActionScript 3.0影片不能直接与ActionScript 1和ActionScript 2影片直接通讯(ActionScript 1和ActionScript 2的影片可以直接通讯，因为他们使用的是相同的虚拟机；如果要ActionScirpt 3影片与ActionScirpt 1.0和ActionScript 2.0的影片通讯，只能通过local connection),但是你会发现ActionScript 3.0的改变更深远更有意义。3. flash as2.0 与as3.0的本质区别一、 虚拟机在编译阶段，as2采用的是AVM1（actionScript vitual machine），而as3采用的是AVM2。新一代虚拟机采用了OOP思想，在执行速度上比起avm1也快了10倍。还提供了异常处理。以前我们在使用AS2时，一旦出错，AVM1选择的是静默失败，让人根本不知道什么地方出错了，会浪费大量的时间去查错，而AVM2与目前主流的编译器一样，会有异常处理，运行出错会输出错误提示，工作效率大大提高。如果做个对比，我想说，AVM1就是大刀长矛，而AVM2就是手枪，大刀和长矛也能杀敌，但是只在面对弱智的敌人才能发挥作用，面对一个大型项目，不用点现代化工具是不行滴。二、 事件机制这也是很多人拿起as3就不知所措的原因，初学者会发现连一个按钮点击的方法都写不出来。实际上as3的事件机制采用的是监听的方式，和as2的onClipEvent不同，as3里所有的事件都是需要触发器，监听器，执行器三种结构的，这样做的好处就是使得这个语言非常的坚强，非常大标准化。不像as2,奇形怪状的代码漫天飞，可以这样写，也可以那样写，代码变得繁复难懂，可读性太差，执行效率也大大降低。要特别说明的是，as3的所有事件都直接继承event对象，而event是直接继承自BOSS类object,结构多么完美。所以在as3中，所有的事件都继承自相同的父亲，结构相同，提高了重用性。三、 封装性这是as3与as2最大的不同，as3引入了封装的概念，使得程序安全性大大提高，各个对象之间的关系也通过封装，访问控制而得以确定，避免了不可靠的访问给程序带来的意外产生。四、 XML我觉得这是最令人激动人心的改变，现在as3程序员可以很轻松也很自豪的说，我们是使用XML人群中最快乐的人。AS2时代对XML的存取仍然需要解析，而AS3则创新的将XML也视作一个对象，存取XML就像存取普通对象的属性一样方便，用点语法就可以，无疑大大提高了效率。五、 容器的概念AS3.0采用了容器的思想，告别了as2.0一个MovieClip打天下的局面。对于as2程序员来说，可能不能理解，我mc用的好好的，干嘛不让我用啊。但是当你真正的了解as3.0的思想的时候，当你真主的体会到OOP的好处的时候，你会觉得as3.0的容器的思想的完全正确的。as2.0时代，我们做什么都用mc,而as2.0时代的mc也是直接继承自object，这给了mc极大的权限，极其多大方法属性，而有时我们只需要放一个背景图，这样做就造成了极大的浪费。说实在话as2.0和as3.0比起来就是浪费之神，所以as2.0编出的swf绝对比as3.0编译出来的swf要大上几倍。as3.0把所有你用到的显示对象都分开，mc的属性方法都被瓜分开来，举个例子，你去水果超市买水果，就肯定比直接去大型超市买要方便，更节约时间，时间就是金钱，那就是很大的节省。4. AS3.0新特性一、 OOP方面的增强通过类定义而生成的实例，在 AS3 中是属于 Sealed 类型，即其属性和方法无法在运行时修改。这部分属性在 AS2 中是通过类的 prototype 对象来存储，而在 AS3 .0中则通过被称为 Trait 的概念对象存储管理，无法通过程序控制。这种处理方式一方面减少了通过 prototype 继承链查找属性方法所耗费的时间（所有父类的实现方法和属性都会被直接复制到对应的子类的 Trait 中），另一方面也减少了内存占用量，因为不用动态的给每一个实例创建 hashtable 来存储变量。如果仍然希望使用 AS2 中类实例在运行时的动态特性，可以将类声明为 dynamic。二、 API方面的增强新增 Display API，使 AS3 可以控制包括 Shape, Image, TextField, Sprite, MovieClip, Video, SimpleButton, Loader在内的大部分 DisplayList 渲染单位。这其中 Sprite 类可以简单理解为没有时间轴的 MovieClip，适合用来作为组件等不需要时间轴功能的子类的基础。而新版的 MovieClip 也比 AS2 多了对于 Scene（场景）和 Label（桢标签）的程序控制。另外，渲染单位的创建和销毁通过联合 new 操作符以及 addChild/removeChild 等方法实现，类似 attachMovie 的旧方法已被舍弃，同时以后也无须去处理深度值。 新增 DOM Event API，所有 在DisplayList 上的渲染单位都支持全新的三段式事件播放机制，以 Stage 为起点自上而下的播报事件到 target 对象（此过程称为 Capture Phase），然后播报事件给 target 对象（此过程称为 Target Phase），最后在自下而上的播报事件（此过程称为 Bubbling Phase）。 新增内置的 Regular Expressions （正则表达式）支持，使 AS3 能够高效地创建、比较和修改字符串，以及迅速地分析大量文本和数据以搜索、移除和替换文本模式。 新增 ECMAScript for XML (E4X)支持。 E4X 是 AS3 中内置的 XML 处理语法。在 AS3 中 XML 成为内置类型，而之前的 AS2 版本 XML 的处理 api 转移到 flash.xml.*包中，以保持向下兼容。 新增 Socket类，允许读取和写入二进制数据，使通过 AS 来解析底层网络协议（比如 POP3, SMTP, IMAP, NNTP 等）成为可能，使 Flash Player 可以连接邮件服务器和新闻组。 新增 Proxy 类来替代在 AS2 中的 Object._resolve 功能。 新增对于 Reflect （反射）的支持，相关方法在 flash.util.* 包中。5. 总结一、 AS3.0和2.0的代码不能混用，且不能和装载的as2.0或1.0的swf相互通信使用AS3.0可以加载AS2.0 或者 1.0的swf。但是AS3.0不可以访问加载swf中变量和函数。为了方便理解，我们可以想成两个虚拟机并行工作，但是不能通信。事实上，我猜实现机制可能就和这个差不多LocalConnection。使用AS2.0或1.0编写的swf是不可以加载AS3.0的。换句话说Flash 8Flex 1.5及之前所有工具生成的swf都不可以加载(load)AS 3.0 swf的。如果想让AS2.0或1.0的swf与AS3.0 swf协同工作，那么AS2.01.0的文件必须进行移植。就是说转成3.0。单个的swf文件中是不能混合使用AS3.0AS2.0(或者1.0)的。 不会像AS2.01.0那样混用了，毕竟是AS2.0&AS3.0是两个不相同的虚拟机。一句话总结，就是AS3.0可以加载以前的所有版本的swf,但是只是简单加载，不能访问AS2.0(或1.0)的swf内部变量函数，无法交互。二、 所采用的编程方式as 3.0所采用的编程方式是与java C+非常类似的面向对象编程方式，不论在语法上还是在设计思路上。 只要你有java C+基础，那学 AS是非常轻松的。不过AS3.0不能像java C+那样操作底层数据，如存储数据等，必须通过后台语言如php asp 等来实现，而且运行大规模数据时会慢一些。 as 2.0以往是主要面向过程的编程方式，也就是说想到哪就可以写到哪，但到3.0之后就不行了，你必须把每一块程序都写到一个类中，让类和类之间进行联系。凡事都是类的理念。 其实不同的事情有很多，但是也可以这么讲，AS3.0与AS2.0是一样的，只是语法不同了，编程思路不同了，但核心内容不变，也就是说，如果你精通AS2.0，那么，你离精通3.0就不远了。因为你在编程进对算法的掌握和思想都是相通了。三、 as2.0到as3.0的转换在AS2项目往AS3转换/移植的过程中，不要想象这只是一个语法转换的过程，实际上，你不得不考虑AS3以及其类库中的一些新机制，所能带来的性能以及程序结构良好性的提升。因此，可能很多东西，你得重新设计，特别是可视元素和事件相关的，也就是用户交互方面的东西，我认为是必须得根据AS3的特点重新设计的，否则转换是无价值的，甚至会得到更差的程序。一些纯算法方面的代码，可能不需要重新设计，直接替换一些语言层面的东西即可。还有FlashPlayer的速度提升使代码执行速度提升10倍左右，可视元素运行/渲染速度平均提升2倍左右，位图渲染速度有比较明显的提升。 一些在AS2里面我们需要的东西，在AS3里面，我们不再需要了；一些用AS2做出来的东西，运行起来效率不够理想，用AS3做出来，运行得更快了；一些AS2里面不可能做到的东西，在AS3里面，我们可以做了。CSS盒子前言如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。转变我们的思路传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。实现结构与表现分离在真正开始布局实践之前，再来认识一件事结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P text-indent: 2em;，这样结果body内容部分就如下，这没有外加任何表现控制的标签：加进思源社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：段落内容这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。再直接列一段代码加深理解结构和表现相分离：用CSS排版 不用CSS排版第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。用CSS排版减小网页文件体积像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：前言正文内容CSS盒子模式正文内容 转变思想正文内容 熟悉步骤正文内容 熟悉工作流程在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“文字块一文字块二文字块三”，而用“文字块一文字块二文字块三”更合适。用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：用div来定义语义结构现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图）其结构代码如下：上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：body font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：#header height: 100px;width: 760px;background-image: url(headPic.gif);background-repeat: no-repeat;margin:0px 0px 3px 0px;导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：#nav height: 25px;width: 760px;font-size: 14px;list-style-type: none;#nav li float:left;#nav li acolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color: #009966;margin-left:2px;#nav li a:hoverbackground-color:#006633;color:#FFFFFF;内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：#content height:auto;width: 740px;line-height: 1.5em;padding: 10px;#content p text-indent: 2em;#content h3 font-size: 16px;margin: 10px;版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：#footer height: 50px;width: 740px;line-height: 2em;text-align: center;background-color: #009966;padding: 10px;最后回到样式开头大家会看到这样的样式代码：* margin: 0px;padding: 0px;这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：结构代码是这样的：首 页文 章相册Blog论 坛帮助前言第一段内容理解CSS盒子模式第二段内容关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物