实验报告
学生姓名： 肖泽权 学 号： 6100412172 专业班级：计科121
实验类型：□ 验证 □ 综合 □ 设计 □ 创新 实验日期： 实验成绩：
实验一：WEB前端页面制作-学员考勤系统
一：实验要求
1、运用所学的前端技术，制作项目"学员考勤系统"网站的前端页面。
2、项目大体目标如下：系统初始时，只有管理员才能够登录该系统，维护好培训班级信息。学员则需要按班注册好自己的个人信息，才可以登录该系统。系统能记下每位学员的首次注册时间，以及记录学员每天第一次登录系统的时间及登录点IP地址作为考勤凭据，学员每天还需点击签退，用以让系统记录下每天学员的离开时间。 用户登录系统后可查看到在线学员，网站总访问人次，以及所有的考勤信息等。
3、要求根据上述描述对系统进行初步的需求分析，分析系统有几类用户使用，及用户使用系统做什么。
4、根据需求分析的结果，对网站主要的几类页面进行静态页面设计及制作。
二：实验目标
1、了解Web项目开发的大体流程。
2、理解基本的需求分析方法。
3、理解站点的概念，合理规划站点目录，及规范命名站点页面名称。
4、掌握使用HTML进行语义化的网页设计。
5、运用CSS对网页进行简单的布局及美化工作。
6、掌握使用JavaScript对注册页面进行输入校验。
三：实验环境
硬件环境：PC微机
软件环境：文本编辑器（UltraEdit、EditPlus、Notepad等）或者Frontpage或者Dreamweaver、
Myeclipse、IE和FireFox浏览器（至少使用两种不同内核的浏览器）。
四：实验步骤
登陆界面：利用css+html设计登陆界面，div设置布局。
建包如下保存css和js还有图片文件。
效果如下：
内部页面：建立jsp文件配合css+html设计。我的界面采用三个include合成。上层。左边和中间，这样节省了很多重复的代码。
top.jsp +right.jsp+中间的代码 中间的页面不同。
利用一个js实现左边下拉菜单。
其他的页面只是中间内容不同。
五：实验总结
这个实验啊，做的真的很艰难，各种百度，对于我这种基础差的学生来说，说多了都是泪啊，不过还是学到点东西，大概了解了页面和这个考勤系统做的思路和方法，以后慢慢学吧。
第二篇：Web前端笔记详细版
Web前端开发
理论篇
WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
结构标准语言
XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于20xx年10月6日发布的XML1.0，参考（/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
XHTML
XHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于20xx年1月26日推荐XML1.0（参考/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
CSS
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于19xx年5月12日推荐
CSS2
（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262
采用Web标准的好处
对于访问者：
1.
2.
3.
4.
5.
对于网站所有者：
1.
2.
3.
4.
5.
6.
实现内容和形式的分离，做到模块化开发，同时进行，减少开发时间成本
便于维护，低耦合的模块设计，单一模块的修改并不影响其他模块，减少维护成本
结构清晰，页面体积小，浏览器兼容性好
对用户友好，页面可用性、可访问性高，如在不同浏览器情况下都能正常访问页面，页面打开速度快，良好的交互性与用户体验，方便用户获取所需信息，减少用户时间成本
经过SEO优化后的站点被搜索引擎收录的机会更多，从而给站点带来更多的用户
提高用户价值，提高企业价值
更少的代码和组件，容易维护。 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。 更容易被搜寻引擎搜索到。 改版方便，不需要变动页面内容。 提供打印版本而不需要复制内容。 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。 文件下载与页面显示速度更快。 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。 用户能够通过样式选择定制自己的表现界面。 所有页面都能提供适于打印的版本。
初学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 8＆Flex 1.5及之前所有工具生成的swf都不可以加载(load)AS 3.0 swf的。
如果想让AS2.0或1.0的swf与AS3.0 swf协同工作，那么AS2.0＆1.0的文件必须进行移植。就是说转成3.0。
单个的swf文件中是不能混合使用AS3.0＆AS2.0(或者1.0)的。不会像AS2.0＆1.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内容部分就如下，这没有外加任何表现控制的标签：
<p>加进思源社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p>
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：
<p><font color="#FF0000" face="宋体">段落内容</font></p>
这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
用CSS排版
<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style><div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>
不用CSS排版
<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />
第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一
个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。
用CSS排版减小网页文件体积
像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容</p>
</div>
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”，而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图）
其结构代码如下：
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></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 a{
color:#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:hover{
background-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标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
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 a{
color:#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:hover{
background-color:#006633; color:#FFFFFF;
}
#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;
}
-->
</style>
结构代码是这样的：
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^]
本文完全为个人原创作品，转摘请注明作者，作者：唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处
本人这次将讲解一个纵向CSS导航栏实例的制作，在讲解过程中将会延用之前发表教程所讲到的“盒子”概念，如果你没有看过本人之前的那篇教程，又或者你还不理解什么是“盒子”这一概念，请先通过下面的两个链接阅读本人之前发表的教程，看完之后再回来看此教程，如有不便敬请原谅。
1．彻底弄懂CSS盒子模式(DIV布局快速入门)
2．彻底弄懂CSS盒子模式(DIV布局快速入门)
用CSS做导航栏也是轻而易举的事情，在本人之前发表的教程中其实也有一个简单的横向导航栏制作，那时只给出了样式代码并没有作太多的解释，这次要做一个相对复杂点的导航栏，为了加深大家对CSS盒子模式的理解，特别选做一个有多个盒子嵌套实现的导航栏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>彻底弄懂CSS盒子模式(导航栏实例详解)</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#nav {
background: url(/Upfile/201093/201093175121504.jpg) repeat-y;
width: 200px;
overflow: hidden;
}
#nav li {
background: url(/Upfile/201093/201093175124717.gif) no-repeat left center ; height: 35px;
width: 190px;
padding-top:15px;
}
#nav a {
background: url(/Upfile/201093/201093175125993.gif) no-repeat left center; text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
border-left:10px solid #f90;
}
#nav a:hover {
background-image: url(/Upfile/201093/201093175126661.gif);
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">彻底弄懂CSS盒子模式1</a></li>
<li><a href="#">彻底弄懂CSS盒子模式2</a></li>
<li><a href="#">彻底弄懂CSS盒子模式3</a></li>
<li><a href="#">彻底弄懂CSS盒子模式4</a></li>
<li><a href="#">彻底弄懂CSS盒子模式5</a></li>
</ul>
</body>
</html>
CSS hack
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。
类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等 HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
<style>
div{ background:green; /* for firefox */ *background:red; /* for IE6 */ }
</style>
我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。 CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF： background:orange;*background:blue;
区别IE6与IE7： background:green !important;background:blue;
区别IE7与FF： background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，某些情况下不能识别 !important,
-----------------------------------------------------------------------------------------------
IE6支持重定义中的!important，例如：
.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}
你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的!important。例如：
.yuanxin {color:#e00!important;color:#000}
此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。 -----------------------------------------------------------------------------------------------
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF * √√×
!important ×√√
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px;
*/ *+html #demo {width:130px;} /*会被IE7执行*/
---------------
所以最后,#demo的宽度在三个浏览器的解释为:
FIREFOX:100px;
ie6:120px;
ie7:130px;
IE8 最新css hack： "\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
网页布局
网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。
下面，我们就有关网页布局谈论一下。
网页布局类型
网页布局大致可分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash
型、变化型，下面分别论述
1、国字型：也可以称为同字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。
6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于拐角型结构的，只是采用了框架结构。
7、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个进入的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
8、Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
9、变化型：即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
关于第一屏
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多大呢？其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。
说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。
什么样的布局是最好的
这是初学者可能会问的问题。其实这要具体情况具体分析的：比如如果内容非常多，就要考虑用国字型或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页！
框架
框架网页是指一种 Web 页，可将 Web 浏览器窗口分为不同的可滚动的区域，这些区域可独立显示几个 Web 页。一个窗口可保持不变，而其他窗口根据用户选择的超链接变化。
css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：
* typography.css 基本排版规则
* grid.css 基于网格的布局
* layout.css 通常的布局
* form.css for 表单样式
* general.css 更多通用规则
不同的css框架
Elements CSS Frameworks
Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读概述了解更多。
YUI Grids CSS
基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。这个4KB的文件可提供超过1000中页面布局组合。
YAML CSS Framework
Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。
Blueprint CSS
Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
Schema Web Design Framework
Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。
CleverCSS
CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比 CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。
Tripoli CSS Framework
Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。
ESWAT Web Project Framework
ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。
Boilerplate CSS Framework
作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。
WYMstyle CSS Framework
这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。
Content with style Framework
下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板?
Logicss Framework
Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css代码生成工具。
That Standards Guy CSS Framework
* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0)；
* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac；
* IE Hacks使用独立文件；
* 快速创建模板；
* 少量注释/实例演示，可以节省时间来理解。
960 Grid System
960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。
Emastic CSS Framework
Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。
编程篇
编写一个方法求一个字符串的字节长度
new function(s){
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i<s.length;i++){
if(s.charCodeAt(i)>255) l+=2; else l++;
}
alert(l);
}("hello world!");
如何控制alert中的换行
alert("hello\nworld");
解释document.getElementById("ElementID").style.fontSize="1.5em"
设置id为ElementID的元素的字体大小为1.5个相对单位
Em为相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1em=16px
按照格式 xxxx年xx月xx日xx时xx分xx秒动态显示时间要求不足10的补0
<script type="text/javascript" language="javascript">
function tick(){
var d=new Date();
var t=function(a){return a<10?"0"+a:a;}
Clock.innerHTML=d.getFullYear()+"年"+t(d.getMonth()+1)+""+t(d.getDate())+"日"+t(d.getHours())+"时"
+t(d.getMinutes())+"分"+t(d.getSeconds())+"秒";
window.setTimeout("tick()",1000);
}
window.onload=tick;
</script> 月
<body>
<div id="Clock"></div>
</body>
编写一个方法去掉一个数组的重复元素
Array.prototype.strip=function(){
if(this.length<2) return [this[0]]||[]; var arr=[]; for(var i=0;i<this.length;i++){
arr.push(this.splice(i--,1));//将本数组中第一个元素取出放入到数组arr中for(var j=0;j<this.length;j++){ if(this[j]==arr[arr.length-1]){
}
}
}
return arr;
}
this.splice(j--,1);//删除本数组中与数组arr中最后一个元素相同的元素
var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
说出3条以上ff和ie的脚本兼容问题
IE有children，FF没有；
IE有parentElement，FF没有；
IE有 innerText,outerText,outerHTML，FF没有；
IE有数据岛，FF没有；
FF有
HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node,Event,Element 等等，IE没有；
IE跟FF创建HttpRequest实例的方法不一样
DIV中border、margin和padding的区别和用法
边框属性(border)用来设定一个元素的边线
外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离
内边距属性(padding)是用来设置元素内容到元素边界的距离
为Array写一个indexof方法
Array.prototype.indexOf = function(e){
for(var i=0,j; j=this[i]; i++){
if(j==e){return i;}
}
return -1;
}
Array.prototype.lastIndexOf = function(e){
for(var i=this.length-1,j; j=this[i]; i--){
if(j==e){return i;}
}
return -1;
}
var arr=[1,2,3,4,5];
alert(arr.indexOf(5));
克隆
浅复制(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用
深复制(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的
Object.prototype.Clone = function(){
兼容 IE 和 FF 的换行 CSS 推荐样式
word-wrap:break-word; overflow:hidden;
word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
word-break是控制是否断词的。 var objClone; if( this.constructor == Object ) objClone = new this.constructor(); else objClone = new this.constructor(this.valueOf()); for ( var key in this ){ if ( objClone[key] != this[key] ){ if ( typeof(this[key]) == 'object' ){ objClone[key] = this[key].Clone(); }else{ objClone[key] = this[key]; } } } objClone.toString = this.toString; objClone.valueOf = this.valueOf; return objClone; }
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。 keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
手型Cursor的兼容IE和FF写法
cursor:pointer
<img>元素的alt和title有什么异同？
alt作为图片的替代文字出现，title是图片的解释文字
图片存在
只有alt 图片的解释文字
只有title 图片的解释文字
两者都有图片的解释文字
两者都没有图片既没有替代文字，也没有解释文字
图片不存在
只有alt 图片既有替代文字，又有解释文字
只有title 图片没有替代文字，只有解释文字
两者都有图片既有替代文字，又有解释文字
两者都没有图片既没有替代文字，也没有解释文字
当然不同的浏览器处理方式也会不一样
border-color-left、marin-left、-moz-viewport改写成JavaScript格式
border-color-left:borderLeftColor
marin-left:marinLeft
-moz-viewport:MozViewport
用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
CSS:
#right{
float:right;
width:200px;
}
#left{
marin-right:200px;
}
HTML:
<body>
<div id=”right”>?</div>
<div id=”left”>?</div>
</body>
Linux题目：批量删除当前目录下后缀名为.c的文件，如a.c、b.c
rm *.c
如何提高网页的运行速度
内容与形式分离，模块化开发，优化CSS
减少页面文档大小
尽量减少图片的使用或注意图片的大小，优化图片：格式、质量、图片长宽标志
减少响应的次数，用Ajax
网址后面加一个“/”
按要求写一个简单的ajax示例
<body>
<div id="load">数据正在加载......</div>
<script type="text/javascript">
var Browser={/**Browser对象用于检测浏览器，其中用到了IE的条件编译*/
isFF:window.navigator.appName.toUpperCase().indexOf("NETSCAPE")!=-1?true:false,
isOpera:window.navigator.appName.toUpperCase().indexOf("OPERA")!=-1?true:false
};
Function.prototype.bind=function(object){
var _this=this;
return function(){
}
}
function HttpRequest(){
this.async=true; this.cache=false; this.xmlhttp=function(){
try{
= Version _this.apply(object,arguments); if(Browser.isFF&&window.XMLHttpRequest){ return new XMLHttpRequest(); }catch(e){} var
TTP.3.0",+ }else if(Browser.isIE&&window.ActiveXObject){ ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLH
"Msxml2.XMLHTTP.2.6","Msxml2.XMLHTTP","Microsoft.XMLHTTP.1.0","Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"];
for(var i=0;i<Version.length;i++){
try{
return new ActiveXObject(Version[i]); }catch(e){}
} } }()||false;
}HttpRequest.prototype={
send:function(object,url,callback){ if(!this.xmlhttp) return; if(object)
this.xmlhttp.open(object?"post":"get",url,!!this.async);
this.xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
if(!this.cache){
this.xmlhttp.setRequestHeader("No-Cache","1");
this.xmlhttp.setRequestHeader("Pragma","no-cache"); this.xmlhttp.setRequestHeader("Expire","0");
this.xmlhttp.setRequestHeader("Cache-Control","no-cache");
this.xmlhttp.setRequestHeader("Last-Modified","Wed, 1 Jan 1997 00:00:00 GMT"); this.xmlhttp.setRequestHeader("If-Modified-Since","-1"); }
if(!this.callback) this.callback=callback; if(!this.async){
if(typeof(this.callback)=="string"){ eval(this.callback);
}else if(typeof(this.callback)=="function"){ this.callback(this.xmlhttp); } }else{
this.xmlhttp.onreadystatechange=function(){ if(this.xmlhttp.readyState==4){
if(this.xmlhttp.status==0||this.xmlhttp.status==200){ if(typeof(this.callback)=="string"){ eval(this.callback);
}else if(typeof(this.callback)=="function"){ this.callback(this.xmlhttp); } } } }
}.bind(this); this.xmlhttp.send(object); },abort:function(){
if(this.xmlhttp&&this.xmlhttp.abort) this.xmlhttp.abort();
}
}; //ajax类定义结束
new HttpRequest().send(null,"/index.php",function(r){ document.getElementById("load").innerHTML=r.responseText.match(/<img.*?(?:\/)?>/img).join(""); });
</script>
</body>