设置其CSS样式文件代码如下：

#container{margin：0auto；width：90%；}

#header{height：200px；margin-top：20px；border：2pxsolid；}

#content{height：500px；width：100%；margin-bottom：10px；}

#sidebar{float：right；width：30%；height：500px；border：1pxsolid；}

#main{float：left；width：70%；height：400px；border：2pxsolid；}

#footer{height：60px；border：1pxsolid；}

其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。container的margin属性为0auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。sidebar的float属性为right，标识靠右对齐，main的float属性为left，表示靠左对齐，实现中间两列竖栏的显示效果。border属性为2pxsolid，表示2个像素宽的实线边框。

图文混排技术是制作漂亮页面所必然需要面对的技术难点。下面就利用CSS+DIV实现功能简单的图文混排效果。

在#main中放置内容：

精品课程简要介绍

/*定义miaoshu，使说明文字和图片放在一个DIV中*/

JPG"alt="图片"/>

• 任课教师：$$$$$$$
• 职务：$$$$$$$$

"医院信息系统……

"算法设计……

设置CSS样式如下：

#jingping{padding-top：14px；border-bottom：3pxsolid#9933cc；text- align：left；}

#jingping{text-indent：2em；margin-top：30px；padding：5px；font-size：16px}

#miaoshu{float：right；margin：20px；}/*定义图片和说明文字的属性，使两者一起向右浮动，实现与文本混排效果*/

#discribimg{border：0；height：60%；}/*

border设置为0，这样定义图像为链接对象时，不会显示蓝色的边框*/

三、结束语

基于DIV+CSS方法实现了网页的布局定位，具有表现和内容相分离等优势，已经成为一种网页设计的趋势和标准。通过对DIV和CSS技术的研究，介绍网页布局应用实例和使用该技术布局网页的方法和流程。在实际操作过程中还须要根据不同的风格和内容灵活应用各布局元素及CSS样式。

参考文献：

[1]曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2007

[2]CraigGrannell.CSS与HTMLWeb设计实践指南[M].北京:人民邮电出版社,2009

[3]陈源等.Dreamweaver网页设计与制作[M].北京:地质出版社

[4]朱印宏.CSS商业网站布局之道[M].北京:清华大学出版社

篇5：【网页设计-最新经典技术文档】网页排版CSS教学

数月来学习web标准，并遵循标准设计和制作web页面。一直想写点什么，整理一下自己的心得体会。写这篇文章，主要是针对中文排版设计，英文排版因为很少做，所以不涉及。

先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用，后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版，比如中文字的截断、固定宽度词内折行（word-wrap和word-break）等等。因为只是写一些应用方面的心得，如果需要完整的CSS属性介绍，请参考CSS手册。

1、如何设定文字字体、颜色、大小 —— 使用font

font-style设定斜体，比如font-style: italic;

font-weight设定文字粗细，比如font-weight: bold;

font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册）

line-height设定行距，比如line-height: 150%;

color设定文字颜色（注意不是font-color），比如color: red;

font-family设定字体，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法）

以上都可以写在一行font属性里（除了color属性需要单独写）：

font: italic bold 12px/150% “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

2、如何控制段落排版 —— 使用margin，text-align

中文段落使用

标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：

p{

margin: 18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/}

文字的对齐方式用text-align，比如：

p{

text-align: center;/*居中对齐*/

}

对齐方式还有left、right和justify（两端对齐）

PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin: 0;因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）

3、竖排文字 —— 使用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

比如：

p{

writing-mode: tb-rl;

}

可以结合direction排版。

4、项目符号的问题 —— 使用list-style

在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或

ol）的项目符号为方块，如：

li{

list-style: square;

}

另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。

5、首字下沉 —— 使用:first-letter

伪对象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

p:first-letter{

padding: 6px;

font-size: 32pt;

float: left;

}

6、首行缩进 —— 使用text-indent

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：

p{

text-indent: 2em;/*em是相对单位，2em即现在一个字大小的两倍*/

}

如果font-size是12px的话，那么text-indent: 2em则缩进24px。

7、关于汉字注音 —— 使用ruby标签和ruby-align属性

比如说注音zhu yin，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅ruby-align项。

8、固定宽度汉字截断 —— 使用text-overflow

篇6：【网页设计-最新经典技术文档】网页排版CSS教学

HTML：最基本的知识，如果HTML知识掌握得好，可以用记事本就可以熟练编写网页(当然，不推荐这么做，因为有现成的工具可以帮助编写HTML，但拥有这种能力是很好的)会对日后使用编辑主页，编写ASP或PHP代码有极大帮助。

ASP或PHP：ASP和PHP可以称得上编写动态主页的主流语言环境。对于入门者如果编程经验很少，可以从简单的语言起步，如微软公司的 VBScript脚本语言，如果已经有不少编程经验，建议学习PHP或JavaScript语言，PHP在商业网站中应用得较为广泛。如果希望谋一份网站制作的工作，学好PHP还是很值得的；

对于JavaScript而言，可用于服务器端(比如ASP编程)，也于应用于客户端编程(比如制作一些DHTML动态效果等)，而且 JavaScript已被欧洲标准协会列为一门语言标准，将来的应用也会很广泛(例如Flash的脚本语言也采用了JavaScript)；

总之，想从简单起步，可以看一些ASP+VBScript的书籍，如果想学得更深入，应该学习ASP+JavaScript和PHP.如何做好一个网站

笔者认为，一个网站更多时候不是“写”出来的，而是“设计”出来的，设计大体包括二方面内容：功能设计及界面设计。

功能设计依照网站面向的用户而定，建议多参考一些专业网站(而不是大众型网站，如网易，搜狐等)的功能设计，专业网站的特点是针对性强，功能设计与其专业性质有息息相关，能很好的显示功能设计。

界面设计即简单又不简单，简单的是界面设计只是在功能设计的基础上作一些美工设计；不简单的是，要设计既得好看，又与功能设计很贴切是很考究制作者的美术和平面设计功底的。对于不会设计的朋友，可以多参考一些专业设计网站，如蚁盟等，看一下专业设计师如何配色，排版，图片如何与文字和谐搭配等。

篇7：【网页设计-最新经典技术文档】网页排版CSS教学

互联网刚兴起时，网页缺少动感，布局内容也有许多因素限制，设计起来难度较多。即使专业的HTML 技术人员，在网页设计中也需要通过不断测试，才能掌握网页中的信息排版，在这样的背景下，样式表应时而生，CSS技术具有以下特点。对网页中的元素进行精准定位。网页设计者在网页设计中，如同导演，网页中图片、文字就是演员，网页设计人员依据要求使“演员”扮演好自己的角色，操控起来十分简单。将网页中的格式控制与网页中的内容分离。网页浏览者在浏览过程中，面对是网站内容结构，为了帮助浏览者更好地查看网页中的信息，在设计中需要合理利用格式控制，将的内容与格局分离，从而对网页布局进行更加合理的控制，即将CSS 代码独立，从另一角度实现对页面布局和外观的控制。页面布局的控制。通过CSS 技术，能够事项对HTML的有效控制，并且可以在网页中对图像的位置进行准确定位。制作体积加载更快。体积更小的网页，CSS 样式只是简单的文本，在设计中不需要执行程序、图像、插件，在执行上就如同HTML 中的指令一样快。CSS 技术在网页设计中的应用

2.1 外部样式表

外部样式主要适用网页中存在多个副面，外部样式表一文件存储的情况，通常情况下文件的扩展名为.css。网络页面中应用外部样式，可以将多个网页与.css 文件进行连接，通过改变一个.css 文件中的内容对整个网站的布局进行调整。例如m.css 需要将 添加到文档头部，将去作为标签，具体方式代码如下：

css”/>

.........在网页设计过程中，可以通过外部文件，对编辑中的文本进行编辑，但是在编辑中需要注意，不能出现任何HTML中的代码，例如：

p{color: red;font-size:14px;}

body{background-color:#FFDFFD}

其中color 为属性，red 为值;font-size 为属性，14px 为值;background-color 为属性，#FFDFFD 为值。

2.2 内部样式表

如果一个在网页设计中，不需要特殊样式，通常为简化，都采用内部样式，可以将

p{color:red;font-size:14px;}

body{background-color:#FFDFFD}

??

内部样式与外部样式相比，更加简单实用，在网站页面头部，输入同一样式，可使网站中所有页面都呈现统一的样式。

2.3 内联样式表

网页设计中内连样式表，可以将style 参数直接加入到HTML中，添加的参数就是CSS 多属性与值，内嵌的样式如下：

设计中，内联样式表与其它两种样式相比，使用率相对少，主要这种方式不容易在网页中重复使用，如果上述的p 元素在网页设计中重复式样，网页会将p 元素定义为完全重复，样式属性也会出现重复，会加大对网页的维护和阅读难度。优化CSS 代码

在网页设计中，为了使网站能够快速的显示出来，Web创建者在实际操作中，需要对网站中的图像文件进行压缩。CSS 样式表是纯文本文件，所占内存较小，在设计中不需要进行压缩，但在应用过程中，也有一些方法可以使其格式缩小20% ～ 50%。

3.1 缩写性质

利用专用性质名取代相关性质集合。例如，paddingtop、padding-left 等性质在CSS 带面中就可以进行缩写。在网页设计中可以通过以下代码代替复杂的代码。

.body{margin:12px 18px 20px 24px;padding:4px 8px

6px 5px

Border-top： thin solid #000000;｝

此外，在对缩写性质进行应用中，属性之间的间隔通过空白完成。如果属性之间出现类似值时，要注重连续属性的顺序，属性由顶部开始，依照顺时针顺序进行。如果缩写性质相同，可以简单罗列单个属性，将后面的三项属性缩写。

3.2 通过样式覆盖简化代码

如下CSS 样式

.a,.b,.c {font-size;10px;padding:10px;width:200px;

background-color:black }

.a {border:2px solid red;}

.b {border:2px solid blue;}

对以上这段CSS 样式进行分析，可以发现，三个样式边框属性，除了颜色之外其余并误差别，因此可以将无差别的属性进行归纳在一起，对颜色进行单独控制，优化的样式如下：

.a,.b,.c {font-size;10px;padding:10px;width:200px;

background-color:black;border:2px solid：red}

.2 {border:2px solid blue;}

.3 {border:2px solid black;}

优化后代码能够实现与原代码一样的效果，代码的属性变得更加简单。

3.3 提高代码重复率

重复使用代码是CSS 在网页设计上的主要优势，多数网站设计中，对CSS 中的代码已经进行了重复利用，但受设计者自身影响，并没有得到合理的重复使用。在CSS 代码编写中，应当尽力避免重复的元素属性值多次编写。结 语

篇8：【网页设计-最新经典技术文档】网页排版CSS教学

一、网页设计中DIV+CSS布局技术的教学现状分析

DIV+CSS是WEB2.0标准化设计的一项技术, 具有代码简洁、页面优化、浏览快速、更新及维护方便等优点, 是IT行业中网页设计的一项标准技术。中职计算机专业的学生由于基础比较薄弱, 习惯于窗口式的软件操作, 对于他们而言学习DIV+CSS技术是枯燥、繁琐和痛苦的事情。另外, 在网页设计课程的学习中学生习惯于“老师讲—学生看—实验操作”流程式的学习方式, 实验缺乏情景化和生活化, 因此, 学生学习的积极性不强。

“需要—学习动机—学习行动—结果满足—学习兴趣”是学习兴趣产生的过程, 应该设计适合于学生“需要”的任务, 改变“讲—听—练”的传统教学模式, 明确目标, 面对现实问题, 并结合中职生的年龄特点和个性心理, 以任务为引领, 引导学生自主学习、协作学习。

二、任务驱动法在DIV+CSS布局技术教学中的可行性分析

1. 任务驱动教学法分析

任务驱动教学法是以“学习者为中心”, 以完成具体任务为过程, 在任务中结合教学内容, “学习者”通过主动学习, 调整、重组知识结构, 在典型“任务”驱动下由易到难、循序渐进地完成一系列“任务”, 从而形成清晰的思路, 掌握解决问题的方法和构建完整的知识体系。通过对“任务”的实施, 培养学生分析问题、解决问题、沟通协作、创新思维的能力。

2. 任务驱动教学法优势

相比传统的教学模式, 任务驱动教学法的优势在于: (1) “学生为主体”的作用明显; (2) 能充分激发学生的学习兴趣, 提高学习的积极性; (3) 能有效地发挥学生的创造性思维; (4) 有利于培养学生分析问题和解决问题的能力; (5) 有利于学生个性发展和创新能力的提高。

3. DIV+CSS布局技术教学中任务设计要点

任务的设计需生活化、真实化、主题密切化, 要符合中职学生年龄特点和认知能力, 能体现自我个性和价值。在任务中体现分层教学, 通过任务实施, 在自助和互助学习中探究任务知识的延伸。

(1) 任务的设计应以激励学生主动学习兴趣为出发点。以激发学生学习兴趣为出发点, 设计与学生自我主题密切相关的任务。例如, 实践中我以设计“个人网站”和“淘宝网店”为任务, 利用校园网作为学生作品展示平台, 符合中职生求知欲和表现欲的心理, 重视中职生的关注焦点, 激发学生对DIV+CSS布局技术的学习热情。

(2) 任务的实施应以师生互动、边学边做为切入点。坚持“以任务为主线、教师为主导、学生为主体”的原则, 实施中教师提供解决任务的知识和线索, 积极参与互动, 充当学生知识搜索的对象, 主导学生实施任务, 是学生实施任务的引导者、沟通者和情境的创建者, 实施中把握任务的系统性、延续性和难易程度。实践中学生设计的DIV布局由1列到多列, 从导航菜单到下拉菜单, 由CSS文本修饰到CSS动态菜单设置, 由易到难、循序渐进、边学边做, 最终完成预定任务。

(3) 任务的目的应以实现学生主动参与、积极探索、创新思维、发挥个性为落脚点。任务实施中鼓励学生大胆猜想、判断和提问, 学会逻辑推理和创新, 克服思维定式。在“个人网站”布局设计中, 会出现布局不规范, 标识不清, CSS调用混乱等问题, 通过问题的解决, 学生在掌握了基本方法后能够触类旁通, 举一反三, 探索和自我开拓。

三、任务驱动教学法在DIV+CSS布局技术教学中的具体实施

以“个人网站设计”为案例, 采用任务驱动教学法, 在任务的实施过程中划分为前任务、任务环、后任务三个教学环节。

1. 前任务

前任务环节主要为任务的设定和引入, 该环节采用两个实施过程:

(1) 创设情境。实施任务前, 我组织同学欣赏“网易博客”“新浪博客”“虾米CGI”等知名网站中优秀个人网页, 分析页面的布局, 全班同学参与点评不同网页的优缺点, 提出对网页布局、美化及风格设计的新思路, 鼓励大家学好DIV+CSS技术, 在网络上展示自己的优秀作品。通过激发学生兴趣点创建情境, 引入学习

(2) 提出任务, 操作示范。鼓励大家发挥自己的聪明才智, 提出利用DIV+CSS布局技术建设一个宣传自我、体现自我个性的“个人网站”任务。示范中讲解DIV+CSS的结构和布局方法、CSS的样式规则和CSS盒模型等, 演示DIV布局固定行列、多行多列及利用CSS格式化。实例示范环节中利用DIV+CSS布局技术设计一个“个人网站”的页面布局样例 (见下图) , 着重讲解页面层的容器“#Container{}”与“#Header{}、PageBody{}、#Footer{}”、“#Sidebar{}、#MainBody{}”之间的父子层关系, 分析CSS对DIV及页面的控制、排版、修饰、美化过程。

2. 任务环

实施任务过程中设定执行任务环节称为任务环, 分为任务、计划、报告。

(1) 任务:学生执行任务。根据设定的任务内容, 在教师的引导下学生独立完成“个人网站”建设任务, 在页面布局设计中, 学生充分发挥自己的想象力, 设计各具特性的布局方式。任务执行中学生会碰到DIV布局的规划问题, CSS修饰排版问题, 容器内DIV与CSS的定义问题等;教师参与全程互动和技术指导, 在解答问题时要充分发挥学生的探索精神, 鼓励自我思考、自主学习或协作学习, 倡导学生之间沟通协作和交流, 通过不同观点和问题的交锋、补充和修正, 最终解决问题。实践中根据学生基础能力和水平差异设定三种分层: (1) 合格层:能利用DIV+CSS布局完成“个人网站”中三层页面的布局及设计, 加入页面元素并采用CSS排版、修饰和美化, 网页链接正确, 基本实现整个网站的完整性; (2) 良好层:能利用DIV+CSS技术完成主要框架之外附加结构的布局和美化, 完成主导航条设计、logo设计、CSS的应用。 (3) 优秀层:利用DIV布局并设计动态导航栏, 编写CSS代码, 设计下拉及多级弹出菜单。执行任务过程中鼓励学生根据自己的掌握能力和兴趣完成高一层的内容, 通过扩展知识创新对“个人网站”的设计。

(2) 计划:任务实施过程中的记录。在任务实施过程中要求学生制定计划表, 包含过程记录、时间记录、问题记录、作品的展示内容、技术手段及创新内容。

(3) 报告:作品展示。完成任务后, 教师集中时间对作品进行展示, 根据制定的计划, 要求每个参与者对“个人网站”设计中DIV布局的方法, CSS盒子模型属性的设计方法等内容进行讲解, 提出创新点和后期目标。

3. 后任务:后期评价

建立评价模式, 通过网络共享学生作品, 分发评价表, 学生对每个作品进行评价, 评价内容包含:网站结构完整性、创意、DIV布局、CSS应用、动态导航栏设计、多级菜单应用、创新点等。根据评价结果, 挑选优秀作品进行集中展示, 共同二次评价作品的DIV布局、CSS应用、技术难度、创新点等, 同时作者接受评价者的提问, 依据二次评价结果推选部分优秀作品在校园网内展示, 鼓励其他作品进行二次或多次修改, 并补充挂入校园网。展示、评价和挂网能激发学生对自我作品的重视和对其他作品的关注, 激发学生的兴奋点和成就感, 对提高学生学习兴趣有很大帮助。

四、DIV+CSS网页布局设计教学中实施任务驱动教学法的意义

在DIV+CSS网页布局设计教学中采用任务驱动教学法, 改变传统的教学模式, 整个过程以学生为主体, 教师主导任务的实施, 在“做”的过程中融入“学”和“教”。对中职学生而言学习DIV+CSS技术有较大的难度, 采用任务驱动教学法, 设计切合学生实际的任务, 可突破传统教学中的5大问题: (1) 有效促进学生学习的积极性; (2) “以学生为主体”, 改变传统教学模式, 学生参与的自由度高, 发挥空间大、主动性强。 (3) 在合作与沟通中不断解决出现的问题, 有效掌握DIV+CSS布局技术知识, 并不断地创新和提高。 (4) 切合自身实际任务的实施, 学生学习的出发点和目标明确, 对新技术的学习产生渴望, 明确团结协作的意义和创新带来的魅力。 (5) 任务的实施有效地推进DIV+CSS的应用, 让后续的网页设计朝标准化的方向发展。

五、结论与反思

任务驱动教学法让学生成为学习的主人, 掌握与人沟通协作的能力, 在任务驱动下培养了实践和创新能力, 同时提高了课堂学习效率。教师主导任务的组织、引导、促进、评价、咨询, 学生主动参与、积极学习、探索和创新, 提升了教师的职业荣誉感和幸福感。

摘要：作为一种新型标准化的网页设计模式, DIV+CSS布局技术具有更强的功能和更高的灵活性, 被广泛应用于网页布局中。本文着重阐述任务驱动教学法在DIV+CSS布局技术中的教学实践, 以实质任务为突破口, 解决中职生学习DIV+CSS布局技术的难点, 以期有效激发学生学习的积极性和主动性。

关键词：中职,网页设计,DIV+CSS,任务驱动

参考文献

[1]姜大源.关于职业教育课程开发[J].职业教育研究, 2010 (6) .

[2]杨建勋.计算机教学中任务驱动教学法的实施[J].教育与职业, 2013 (6) .

篇9：【网页设计-最新经典技术文档】网页排版CSS教学

CSS

.transparent{padding:10px;color:#000;background:#cb0000;height:200px;width:250px;opacity:0.4;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;}

HTML

Most people think this text should be fully opaque rather than dimming with the background...

效果：

像你所看到的，应用 CSS 透明的元素，其里面包含的文本也同样受到影响。当然， 也可以用一点 CSS 和另一个容器来覆盖掉：

CSS

.transparent{position:absolute;top:0;left:0;padding:10px;background:#cb0000;height:200px;width:250px;opacity:0.4;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;}.text{position:absolute;top:0;left:0;padding:10px;color:#000;height:200px;width:250px;}

This is an example of fully opaque text overlain on a semi-transparent background DIV

篇10：【网页设计-最新经典技术文档】网页排版CSS教学

网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它;我们想要多背景图片，我们实现了它;我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。

为网络而生

CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中，我们将走的更远，看一看变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

rotate

Rotate(旋转)允许你通过传递一个度数值来转动一个对象。

scale

Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。

translate

Translate就是基于X和Y 坐标重新定位元素

skew

顾名思义，skew就是要将对象倾斜，参数是度数

matrix

transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

让我们更深入的了解每一个功能吧。

Rotate

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果。

12345

#nav{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧?唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

scale

scale并不像你想象的那样工作：简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值可以是正数、负数和小数。

正数值放大一个元素，正如你期望的那样，基于指定的宽度和高度。

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。然而，你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。

1234567891011121314

#nav{/* nav元素的宽和高都会被放大双倍 */-webkit-transform:scale(2);-moz-transform:scale(2);}#nav{/* nav元素的宽会是双倍，而高度保持不变 */-webkit-transform:scale(2,1);-moz-transform:scale(2,1);}#nav{/* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */-webkit-transform:scale(-2,1);-moz-transform:scale(-2,1);}

浏览器支持

scale属性目前只有Firefox, Safari 和Chrome支持，到目前为止没有一个IE版本支持。缩放一个对象是相当有意义的设计选择。它可以通过渐进增强来使用:hover，这可以在你的导航上添加一个小小的趣味。

1234

#navli a:hover{/* 这可以让你的导航链接在鼠标经过的时候轻微的放大 */-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}

translate

这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:translate(10px,20px);-webkit-transform:translate(10px,20px);}

浏览器支持

translate属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

Skew也是一个很有用的transform功能，它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别代表x和y轴的倾斜度数。

12345

#nav{/* 这会将nav元素向左移动10像素并向下移动20像素 */-moz-transform:skew(30deg,-10deg);-webkit-transform:skew(30deg,-10deg);}

浏览器支持

Skew属性目前只被Firefox, Safari 和Chrome支持，而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix

没错，Matrix就是矩阵，矩阵是高等数学中非常基础的一个东东，而在CSS 3中确实一个相当高级的功能，CSS 3引入matrix函数，可以非常灵活的实现上述的各种效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵，经过该矩阵将旧的参数转换成新值：

| a b e |

| c d f |

| 0 0 1 |

如果你有兴趣深入研究，可以看一下这里www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，但是对于matrix变换的原理是通用的。

让我们来看一个例子吧：

12345

#nav{/* nav元素将会像右上角倾斜 */-moz-transform:matrix(1,-0.2,0,1,0,0);-webkit-transform:matrix(1,-0.2,0,1,0,0);}

浏览器支持

可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，但是使用它的这个滤镜，基本也可以实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)都支持该功能。

链式变形

变形常常是单独的，但是如果你想同时用到多种变形，代码也是可以快速整合的，特别是使用私有扩展。幸运的是，我们有一些内置的缩写：

12345678

#nav{-moz-transform:translate(10,25);-webkit-transform:translate(10,25);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:scale(2,1);-webkit-transform:scale(2,1);}

这些变形可以被链到一起，从而让你的代码更高效:

1234

#nav{-moz-transform:translate(10,25)rotate(90deg)scale(2,1);-webkit-transform:translate(10,25)rotate(90deg)scale(2,1);}

这些属性的真正的威力是合并到一起，

你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛，我们就可以创建更丰富和更轻量的界面和应用。

transform-origin

transform-origin不是transform的一个子功能，但是和transform关系非常密切。它可以用来指定transform的起点，比如，rotate变形的默认起点是其中间，你可以将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

12345678910

.class1{-moz-transform-origin:00;-webkit-transform-origin:00;...}.class2{-moz-transform-origin:100%100%;-webkit-transform-origin:100%100%;...}.class3{-moz-transform-origin:topleft;-webkit-transform-origin:topleft;...}

浏览器兼容性

该属性目前也只有webkit和firefox支持，而且需要添加各自的私有前缀。

transition(转换)

一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。

转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。

12345678

#nava{background-color:red;}#nava:hover,#nava:focus{background-color:blue;/* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗? #foreshadowing)*/-webkit-transition-property:background-color;/* 让它持续两秒钟*/-webkit-transition-duration:2s;}

转换的一些参数

transition-property

指定转换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。

transition-duration

定义转换花费的时间(从旧属性换到新属性花费的时间)

transition-timing-function

可以理解为过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay

这个比较容易理解，就是转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。

注：参数部分为翻译时添加，原文中没有。

浏览器支持

像transform属性一样酷，但是目前只有WebKit浏览器支持。-moz-transition已经在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。

Animation

动画是CSS 3最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性比如animation-duration、animation-name 和animation-timing-function整合以创建像Flash动画一样的效果——纯CSS。

123456789101112131415161718

#rotate{margin:0auto;width:600px;height:400px;/* 确保我们是在一个 3-D 空间 */-webkit-transform-style:preserve-3d;/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */-webkit-animation-name:x-spin;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}/* 定义要调用的动画 */@-webkit-keyframes x-spin {0%{-webkit-transform:rotateX(0deg);}50%{-webkit-transform:rotateX(180deg);}100%{-webkit-transform:rotateX(360deg);}}

这个梦幻的CSS动画代码和在线演示可以在webkit网站看到。该演示可以在任何网站看到，但是动画效果却只能在Mac os(雪豹)的WebKit的nightly build版本可见。它看起来就像上面的视频中的一样，如果你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时无法欣赏这个效果。

animation的一些参数

animation的参数和translate有些像，所以如果你理解了translate的参数，这里就不难理解了。

animation-name

动画的名称。

animation-duration

定义动画播放一次需要的时间。默认为0;

animation-timing-function

定义动画播放的方式，参数设置类似transition-timing-function

animation-delay

定义动画开始的时间

animation-iteration-count

定义循环的次数，infinite即为无限次。默认是1。

-webkit-animation-direction

动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

浏览器支持

不幸的是，目前，只有少数浏览器支持CSS动画。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 浏览器中工作。Safari 4 (Snow Leopard)支持3D动画

总结

现在，JavaScript可以在CSS 3完善之前弥补这个差距。遗憾的是，让所有浏览器支持这些很棒的属性可能需要一个很长的过程。不用等待那一天的到来，我们可以先使用一些严谨的渐进增强以及以来Javascript来增强我们的网站和应用。这不是件坏事，至少现在看起来是。

看了最近的IE9的公告，如果IE团队添加这些属性中的一些到这个新的版本的浏览器中我不会感到惊讶，他们已经开始考虑整合CSS3了(border-radius)。

web的前景是光明的，特别是因为这些类似动画的高度实验性的属性。尽管很多属性对客户或高级产品工作还不可用，至少他们很有趣!我们都期待着有一天，我们可以支持所有平台，以建立一些真的很棒的轻量级应用。

参考与资源

A Crash Course in Advanced CSS3 Effects

Net Tuts 发布的一个很酷的关于CSS3效果的视频。

Webkit Announces Support for CSS 3D Transforms

CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit.

Jonathan Snook on CSS Text Rotation

Jonathan Snook 讲述即将到来的CSS3 属性.

DEV Camp CSS3 Tricks

一份来自Dan Kurtz的幻灯演示

W3C Spec on 2-D Transformations

关于2-D 变换的资源.

W3C Spec on 3-D Transformations

一个关于3-D 变换的资源.

W3C Spec on CSS3 Animations

CSS animations的W3C工作草案

Safari CSS参考

MDC:Using CSS transforms

MDC: -moz-transform

关于原作者

Tim Wright是一位网页设计师/开发工程师和博主。他从就成为一名web标准和易用性的倡导者。你可以在CSSKarma.com上找到他写的更多文章，或者follow Tim on Twitter。

译文来自：你需要知道的CSS3 动画技术

点击此处 下载文档权限（全文）.doc

将本文档复制到自己电脑，方便修改和收藏，请勿使用迅雷等下载。

点击复制文档

文档为doc格式

上一篇：2023最新经典搞笑整人短信祝福语 下一篇：以路为话题最新作文经典分类素材