div+css技术发展与应用.doc

毕业论文（设计） 论 文（设计）题目： CSS+DIV技术的发展与应用 指 导 教 师： 龚 念 试点单位： 武汉市仪表电子学校 学生姓名： 呵呵 学号： 09205班 专业： 计算机网络2011 届（春/秋） 专 层次（本专科） 湖北广播电视大学印- 38 -摘 要- 1 -第1章 绪 论- 2 -1.1 CSS发展史- 2 -1.2 使用CSS+DIV的优点- 3 -1.3 使用CSS+DIV的优势- 3 -1.4 DIV+CSS常用编辑工具- 4 -第2章CSS的介绍- 4 -2.1 什么是CSS- 4 -62.2 CSS的基本语法- 4 -2.3 CSS选择器- 8 -2.3.1标签选择器- 8 -2.3.2 ID选择器- 9 -2.2.3 类选择器- 9 -2.2.4 CSS常用属性- 10 -第3章CSS属性的缩写- 13 -3.1 为什么要让CSS属性缩写- 13 -3.2 CSS属性缩写说明- 13 -3.3 CSS属性缩写实例- 16 -第4章CSS的应用- 16 -4.1 文字排版- 16 -4.2 内外填充- 17 -4.3 定位与绕排- 17 -4.3.1 定位- 17 -4.3.1 绕排- 17 -4.4 边框修饰- 17 -4.5 鼠标指针效果- 17 -4.5 滤镜- 18 -第5章CSS盒子模型- 20 -5.1 什么是CSS盒子模型- 20 -5.2 CSS3灵活的盒子模型(Flexible Box Module)- 21 -5.2.1 容器的排列- 21 -5.2.1 水平分布和垂直分布- 22 -5.2.2 反序排列- 22 -5.2.3 按指定顺序排列- 23 -5.3 CSS3灵活的盒子模型(Flexible Box Module)的尺寸- 24 -5.3.1 box-flex 属性- 24 -5.3.2 灵活的尺寸- 24 -5.3.3 自适应子容器和固定尺寸子容器的混合使用- 25 -5.3.4 空间的分配- 25 -5.3.5 防止子容器溢出- 26 -第6章CSS布局实例：用CSS布局博客首页- 27 -6.1 头部的制作- 28 -6.2 content的制作- 30 -6.3 foot版权信息的制作- 35 -参考文献- 37 -后 记- 38 -致 谢- 39 -摘 要DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。“DIV+CSS”是一种错误的说法。DIV只是HTML中的一个标签，而CSS是一种语言，这两者也根本不能成为对等。并且，“DIV+CSS”的话法也容易引起歧义。让大家认为WEB标准就一定要用到DIV，以导致了DIV标签的滥用。并且“DIV+CSS”也不能成为“WEB标准”的代名词，因为WEB标准不是单指两个语言，而是由XHTML（结构）、CSS（样式）、DOM（行为）组合而成的一种技术规范，他所实现的是数据、结构、样式、行为的分离，方便了管理与维护。所以这里请大家记住“DIV+CSS”是一种错误的说法。 XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSSDIV模式的网站设计具有一定的优势，不过目前在网站建设应用中CSSDIV模式也存在一些问题。本文综合网站技术和设计人员的体会，并从网页布局方面介绍DIV+CSS的一些用法。DIV + CSS is website standard (or WEB standards used in terms of), usually to illustrate and HTML pages design language of form (in) localization way of difference, as XHTML website design standard, no longer use form positioning technology, but adoption DIV + CSS means to realize various positioning. DIV + CSS is a false statement. DIV only HTML and CSS is a tag, a kind of language, both of which also cannot become equivalence. And, DIV + CSS word method is easy to cause ambiguity. Let everybody thinks WEB standards must use DIV to caused DIV tag abuse. And DIV + CSS also cannot become WEB standards pronoun, because the WEB standards is not only refers to two languages, but by XHTML (structure), CSS (styles), DOM (act) combination becomes a kind of specification, he had accomplished is data, structure, style, behavior of separation, convenient for the management and maintenance. So here please remember DIV + CSS is a false statement. XHTM is current international advocate website standard design language, because XHTML website design language has the characteristics, the CSS + DIV mode of web design has certain advantages in website construction, but the current application of CSS + DIV mode also some problems. This article comprehensively site technical and design staff experience, and from the web page layout introduced some usages + DIV CSS.第1章 绪 论1.1 CSS发展史Cascading Style Sheets（层叠样式表）的历史 从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994年哈坤利提出了CSS的最初建议。伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。 * 1996年W3C正式推出了CSS1. * 1998年W3C正式推出了CSS2. * CSS2.1是W3C现在正在推荐使用的. * CSS3现在还处于开发中.1.2 使用CSS+DIV的优点1、有利于SEO：学习css技术有利于SEO（搜索引擎优化）2、可以提高找工作的机率：现在很多从事建站网络公司招聘技术人员都要求会DIV+CSS技术，可以看出DIV+CSS的页面越来越受大众重视与支持。如果一般的程序员掌握了CSS能助你提高就业竞争力。3、网上接单：网上特别淘宝上开DIV+CSS制作店铺或威客类站接单赚钱4、建站自己当站长：现在网上有很多开源的网站系统源码，有网店源码、CMS内容管理系统、博客、论坛源码等如DEDECMS、PHPCMS、动易等优秀功能强大的免费的网站程序源码，只要你会DIV+CSS技术就可以制作出html页面然后插入他们出用于他们用的标签的网站CSS模板（他们都有自己的标签模板制作教程-前题您会DIV+CSS技术制作页面），就建立出自己的网站从而自己当站长通过网站为自己增加收入。1.3 使用CSS+DIV的优势1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等 国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。1.4 DIV+CSS常用编辑工具没有基础的人会觉得CSS+DIV开发很难学习。其实只要深刻理解其代码含义用任何文本编辑器都可以编辑。目前许多人在用记事本全部手写代码。当然也有人为了方便会用些其他工具： 1.Notepad.exe记事本，（程序小，随时手工编辑，垃圾代码少，不能可视化预览） 2.Dreamweaver（老牌网页编辑工具，功能全，程序比较大，但对DIV+CSS可视化支持程度不太友好） 3.editplus(应该是升级版的记事本工具，代码编辑有颜色提示) 4.Ultraedit 5.Golive（Adobe宣布已停止开发）第2章CSS的介绍2.1 什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。2.2 CSS的基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property: value（选择符 属性：值）选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：body color: black选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p font-family: sans serif（定义段落字体为sans serif）如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p text-align: center; color: red（段落居中排列；并且段落中的文字为红色）为了使你定义的样式表方便阅读，你可以采用分行的书写格式：ptext-align: center;color: black;font-family: arial（段落排列居中，段落中文字为黑色，字体是arial）2.选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 color: green （这个组里包括所有的标题元素，每个标题元素的文字都为绿色）p, table font-size: 9pt （段落和表格里的文字尺寸为9号字）效果完全等效于：p font-size: 9pt table font-size: 9pt 3.类选择符用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：p.right text-align: rightp.center text-align: center然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：这个段落向右对齐的这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：.center text-align: center（定义.center的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。4.ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：这个段落向右对齐定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）下面这个例子，ID属性只匹配id=intro的段落元素：p#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。5.包含选择符可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table afont-size: 12px在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。6.样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：div color: red; font-size:9pt这个段落的文字为红色9号字（P元素里的内容会继承DIV定义的属性）注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。 另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：div color: red; font-size:9ptp color: blue这个段落的文字为蓝色9号字我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：p color: #FF0000!important .blue color: #0000FF#id1 color: #FFFF00我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。7.注释你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以 结尾，如下：ptext-align: center;color: black;font-family: arial2.3 CSS选择器 CSS 选择器有3种：标签选择器，ID选择器，类选择器2.3.1标签选择器一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，比如，在style.css文件中对p标签样式的声明如下：图2-1则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了2.3.2 ID选择器ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合W3C标准了，那页面也就不是标准页面喽，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下：图2-2CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：图2-3这样页面中的某个p就会是CSS中定义的样式。2.2.3 类选择器这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢呵呵，和ID选择器的用法类似，只不过把id换做class，如下：图2-4如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下：图2-5这样页面中凡是加上class=one的标签，样式都是一样的。CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：图2-6复制代码补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：图2-7这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用图2-82.2.4 CSS常用属性CSS样式允许定义的属性非常多，这么多属性并不是对所有HTML标记有效。在定义CSS样式时，只需定义几种相关的属性即可。在涉及到数值时，往往有多种计量单位可选。文本属性： 文本属性石CSS属性中的一大类，用来设置文字的显示效果。其中部分属性设置可以通过文字标记实现。图2-9背景属性： 背景属性设定对象的背景颜色或背景图像图2-10内外填充属性：一些WEB元素如表格，图像等可以看作是一个容器，容器中放置了呈现内容。所谓的内外填充，可以认为是容器内外侧的衬垫。图2-11定位与显示属性： 内外填充属性站在容器的角度，设定了页面的排版。从容器的角度来说，也可以设置内容相对于容器的定位以及内容的尺寸。图2-12边框属性： 边框属性用来设置对象的边框属性，类型以及粗细。图2-13第3章CSS属性的缩写3.1 为什么要让CSS属性缩写简化代码。一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节，加快网页下载速度和网页加载打开速度。优化CSS目的。其中CSS优化之一即是简化代码缩写CSS属性代码。3.2 CSS属性缩写说明Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约2550。使用CSS的缩写性质CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。使用速写性质让你能够把多个性质属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：.sample1 margin-top: 15px; margin-right: 20px; margin-bottom: 12px; margin-left: 24px; padding-top: 5px; padding-right: 10px; padding-bottom: 4px; padding-left: 8px; border-top-width: thin; border-top-style: solid; border-top-color: #000000; 将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：.sample1 margin: 15px 20px 12px 24px; padding: 5px 10px 4px 8px; border-top: thin solid #000000; 要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（box）按顺时针次序继续。如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的： margin: 5px 5px 5px 5px; margin: 5px; 类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部底部和右侧左侧属性对。 margin: 5px 10px 5px 10px; margin: 5px 10px; 属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（outline property）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。下面是CSS缩写性质的列表以及它们所表示的常规性质。 Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复 Border（边框）：边框颜色、边框风格、边框宽度 border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度 border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度 border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度 border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度 cue（声音提示）：前提示、后提示 font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸 list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型 margin（空白）：顶部空白、右侧空白、底部空白、左侧空白 outline（大纲）：大纲颜色、大纲样式、大纲宽度 padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙 pause（暂停）：后暂停、前暂停 减少空白减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质属性分割到不同行的换行符和缩进符删掉。例如，下面的代码示例在内容上相同，但是第二个要精炼得多：h1 font-size: x-large; font-weight: bold; color: #FF0000; h1 font-size: x-large; font-weight: bold; color: #FF0000 删掉注释将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释，或者至少给每一条明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。h1 /* Heading 1 style*/ font-size: x-large; /* x-large size */ font-weight: bold; /* Bold */ color: #FF0000; /* Red */ 使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站3.3 CSS属性缩写实例CSS 文本：font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px;即可简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;CSS 背景：background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat; 即可将背景CSS属性缩写为：background:#F00 url(图片地址) no-repeat left bottom;CSS 内补距（CSS padding）:padding-top:5px; padding-bottom:10px; padding-left:15px; padding-right:20px; 即可缩写为padding:5px 20px 10px 15px; 或padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;缩写为padding:5px 10px;CSS 外边距（CSS margin）:margin-top:5px; margin-bottom:10px; margin-left:15px; margin-right:20px; 即可缩写为margin:5px 20px 10px 15px; 或margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;缩写为margin:5px 10px; CSS 边框：border-left:1px solid #000;border-right:1px solid #000;border-top:1px solid #000;border-bottom:1px solid #000;即可缩写为：border:1px solid #000;第4章CSS的应用4.1 文字排版标记可以设置文字的属性，通过CSS除了能设置基本的文字属性，还可以设置文字间距，缩进的高级样式。4.2 内外填充所谓内外填充，是依容器对象所说的，如表格，单元格，图像等。4.3 定位与绕排4.3.1 定位一般的，浏览器按照从前到后，从上到下的顺序解析WEB文档，依次展开页面元素。若要将某个元素个性化定位，可 以使用CSS样式的定位属性来决定某其精确位置。Top，bottom，left，right这四个属性用来设置对象与容器四边的距离。通过这四个属性，可以实现对象精确的定位。需要说明的是，配合使用的属性还有position，position的值为absolute或relative，只有加上了position的属性，上述几个属性才有效。4.3.1 绕排默认情况下，图片与文字混排时，一幅图片只能处在一行文字中。由于图片往往比较大，显示效果不太好，这时可以使用float属性实现图文混排。4.4 边框修饰边框修饰用于定义对象的边框颜色，样式，粗细等。表单元素外观默认呈现灰色或白色，为使表单元素外观与WEB页面协调，可以使用CSS重新定义其样式。4.5 鼠标指针效果默认情况下，鼠标指针停留在页面上的外观如或者，或，可以设定页面元素的个性化鼠标指针效果。鼠标指针属性还可以取值为某个鼠标指针文件（扩展名为 cur），格式为curor:url(url) 。该url可以位于本站内部，也可以位于Internet上。4.5 滤镜透明滤镜（Alpha）：设置对象的透明度，多用于图像，其参数如下图4-1 模糊滤镜（Blur）：设置对象的迷糊效果，多用于图像，其参数如下图4-2投影滤镜（Dropshadow）：Dropshasow投影滤镜产生对象的投影，如同物体投射产生的影子，对图像的支持不太好，其参数如下图4-3阴影滤镜（shadow）：shadow阴影滤镜产生对象的阴影，比如光线照射形成的阴影区域，其参数如下图4-4发光滤镜（glow）：发光滤镜用来设置对象的发光效果。它在某种程度上，与阴影滤镜有些类似，但阴影滤镜是有方向的，发光滤镜是辐射状的，其参数如下图4-5波浪滤镜（wave）：波浪滤镜用来设子对象的波浪效果，其参数如下图4-6Add参数设定波浪效果是扭曲还是缠绕。Add=true设置扭曲式波浪，对象呈扭曲状Add=false设置缠绕式波浪，对象形状不变，但缠绕了波形。Freq设定出波形的数目，数值越大，则扭曲越密集。Lightstrength设置波峰和波谷的显示对比，其数值越大，则波峰越亮，波谷越按。Phase设定波形初始相位。Strength设定波形的强度既振幅，数值越大，扭曲越厉害。第5章CSS盒子模型5.1 什么是CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， css盒子模式都具备这些属性。图5-1 CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。图5-2由“盒子”堆出来的网页版面5.2 CSS3灵活的盒子模型(Flexible Box Module)CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。所有例子都基于以下 HTML代码：1235.2.1 容器的排列在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。5.2.1 水平分布和垂直分布我们可以通过 box-orient 属性指定容器的分布轴，当这个属性的值为 vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为 inline-axis ）。使用以下的 CSS ：#exemple1 .content-moz-box-orient : horizontal;-webkit-box-orient : horizontal;box-orient : horizontal;#exemple1 .boite-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的 BUG ，没人会这样做。5.2.2 反序排列box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的，但现在通过 box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边。但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。使用以下的 CSS ：#exemple2 .content-moz-box-orient : vertical;-moz-box-direction : reverse;-webkit-box-orient : vertical;-webkit-box-direction : reverse;box-orient : vertical;box-direction : reverse;#exemple2 .boite-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;5.2.3 按指定顺序排列我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1 ，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的 CSS ：#exemple3 .content-moz-box-orient : vertical;-moz-box-direction : reverse;-webkit-box-orient : vertical;-webkit-box-direction : reverse;box-orient : vertical;box-direction : reverse;#exemple3 .boite-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;#exemple3 .v1-moz-box-ordinal-group : 2;-webkit-box-ordinal-group : 2;box-ordinal-group : 2;#exemple3 .v2-moz-box-ordinal-group : 2;-webkit-box-ordinal-group : 2;box-ordinal-group : 2;#exemple3 .v3-moz-box-ordinal-group : 1;-webkit-box-ordinal-group : 1;box-ordinal-group : 1;5.3 CSS3灵活的盒子模型(Flexible Box Module)的尺寸在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把