网站建设流程

1、网站建设的流程五步曲,网站的构成-域名和空间、源程序,域名形象的比喻成就相当于一个家的门牌号码！网站的空间即存放网站内容的地方，就相当于一个家，可以存放许多的东西！ 域名即网站的网址，一个家的门牌号。域名是独一无二的，只要你在域名服务商处注册成功。域名所有权和解析权就归你。你可以自由解析自由使用。域名是按一年计算的当然你也可以一次性购买多年，付款一次就可以使用一年，第二年域名到期之前续费就行了，就可以接着使用。域名是独一无二的，所以域名一旦注册就是不能修改了的。因此注之前一定要想好看好再注册。 域名是互联网上人们熟悉、易记的计算机名字。例如就是一个域名。,域名,域名的构成 一个完整的域名一般由

2、两个或两个以上部分构成，中间由点号“.”分隔开，如、。 域名的分类-按级别可分为国际顶级域名、国家顶级域名和中文域名三类。 国际顶级域名 国际顶级域名是以“国际通用域”为后缀的域名，不同的后缀代表不同的含义，常见的“国际通用域”有：.com表示商业机构，.net表示网络服务机构，.org表示非赢利机构.gov表示政府机构，.edu表示教育机构，.biz表示商业机构，.info表示信息服务机构，.tv表示视听电影服务机构，.name表示用于个人的顶级域名等等，随着网络的发展还将有更多的国际顶级域名产生。,域名,国家顶级域名 国家顶级域名通常是以“国际通用域”和“国家域”两部分或直接以“国家域”为

3、后缀的域名。“国家域”是根据ISO31660规范的各个国家都拥有的固定国家代码，如cn代表中国、jp代表日本、uk代表英国等，我们常见的CN顶级域名有.cn、和等。 中文域名 中文域名是能用汉字命名的新一代域名，它是中国人自己的域名，使用、记忆非常方便。目前可提供注册的有类似于以下几种中文域名：电脑报.com、电脑报.net、电脑报.cn、电脑报.中国、电脑报.公司和电脑报.网络。,域名,域名的分类-按结构可分为：一级域名、二级域名、三级域名等 以电脑报网站为例，是个一级域名，在一级域名的下一级就是一个二级域名，如果要在下面设立则是三级域名了。我们见到的免费域名通常是二级域名。,第一单元 We

4、b标准的本质-禅意花园网站展示,为什么要建立网站标准 什么是WEB标准-定义 采用WEB标准的优点,1.1 为什么要建立网站标准,我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的浏览器大战，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不

5、易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。 如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（）的督促下推广执行。,1.2 WEB标准的定义,WEB标准网站制作的标准，它不是某一个标准，它是根据网站的主要组成分别制定的系列标准的集合 网页主要由三部分组成：结构（Structure）、表现（Pr

6、esentation）和行为（Behavior）。 对应的WEB标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。,WEB标准的构成,WEB标准的核心XHTML+CSS的定义,简单地说XHTML+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构

7、（框架）标签，如、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为XHTML+CSS。一定程度上可以认为XHTML+CSS等于XHTML（xhtml包括了html和CSS标准化两部分），实质即使用XHTML对网站进行标准化重构，使用CSS样式文件与html内容分离，便于网站维护、简化html页面代码、提高团队开发效率和有利于搜索引擎蜘蛛抓取的标准化XHTML+CSS网页。 div是html(超文本语言)中的一个元素,XHTML+CSS 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了

8、w3c内容与表现相分离. div 是标签 css（cascading style sheet)是层叠样式表,XHTML+CSS的优势,符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table, 采用XHTML+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和

9、主流的WEB2.0网站，均采用XHTML+CSS的框架模式，更加印证了XHTML+CSS是大势所趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。,1.3 采用Web标准的好处,对于访问者： 文件下载与页面显示速度更快。 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。 用户能够通过样式选择定制自己的表现界面。 所有页面都能提供适于打印的版本。,1.3 采用Web标

10、准的好处,对于访问者： 文件下载与页面显示速度更快。 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。 用户能够通过样式选择定制自己的表现界面。 所有页面都能提供适于打印的版本。,1.3 采用Web标准的好处,对于网站所有者： 更少的代码和组件，容易维护。 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。 更容易被搜寻引擎搜索到。 改版方便，不需要变动页面内容。 提供打印版本而不需要复制内容。 提高网站

11、易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。,第二单元 XHTML标签百度首页结构的建立,常用的XHTML标签 CSS的作用 CSS的应用方式,2.1.2 为什么要使用XHTML,使用XHTML的主要原因是： 1. HTML语言没有足够的可扩展性。 2. HTML不能很好地支持不断更新的显示媒体，如手机等。 3. XHTML有良好的格式，极大地简化新元素的开发和集成 4. 使用XHTML，使文档具有更大的扩展性和兼容性。,2.1.3 XHTML-用来描述网页的一种语言。,XHTML 指的是可扩展超文本标记语言 (The

12、Extensible Hyper Text Markup Language) XHTML 不是一种编程语言，而是一种可扩展标记语言 (markup language) 标记语言是一套标记标签 (markup tag) XHTML 使用标记标签来描述网页,2.1.4 XHTML 标签,XHTML 标签是由尖括号包围的关键词，比如 XHTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签,2.1 web标准有关XHTML代码规范,1.标记都必须放到中 2.所有标记必须有一个相应的结束标记; 3.元素和属性的名字都必须

13、使用小写 ; 4.所有的XHTML标记都必须合理嵌套 ; 5.把所有），不是标签的一部分，都必须被编码为 6.给所有属性赋一个值，没有值的属性就用自身来赋值 7、所有的属性值必须放到“”中 8.不要在注释内容中使用-符号 9.在文档的开始应定义文档类型 10.在根元素中应声明命名空间，即设置xmlns属性。,2.1.5 XHTML书写格式,2. 元素的书写格式 内容 元素：指的是从开始标签到结束标签的所有代码,2.1.6 XHTML基本结构,XHTML语法基础主要包括: 1. 完整的XHTML页面结构 无标题文档 这里是页面内容部分，注意内容与浏览器边缘的距离 ,2.1.7 DOCTYPE的选

14、择,什么是DOCTYPE DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。 DTD表示文档类型定义，里面包含了文档的规则，网页浏览器会根据预定义的DTD来解析页面元素，并把这些元素所组织的页面显示出。 XHTML 1.0提供了三种DTD文档类型。 1. 过渡的 transitional.dtd（常用） 2. 严格的 strict.dtd 3. 框架的 frameset.

15、dtd,2.1.8声明命名空间-xmlns属性,什么是命名空间？ 是收集元素类型和属性名字的一个详细DTD，它允许通过一个URL地址指向来识别命名空间。 命名空间的作用 由于XML可以自定义标签，可能会出现你定义的标签与别人定义的同名标签相冲突，命名空间就是解决这个问题的。 由于XHTML 1.0还不允许用户自定义元素，因此它的命名空间都相同。,2.1.9 编码问题,编码语言声明的代码如下： 声明一种合适的编码语言，页面上的文本内容才能在浏览器中正常显示,2.1.9 常用XHTML标签,定义结构块标签 定义标题标签 定义段落标签 定义链接标签 插入图片标签 定义文档中的节标签 定义文档类型。

16、定义简单的折行。,2.1.10 常用XHTML标签,定义关于文档的信息。 定义 HTML 文档。 定义文档与外部资源的关系。 定义关于 HTML 文档的元信息。 定义强调文本。 定义强调文本。 定义文档的标题。 无序列表标签 有序列表标签,2.2 什么是CSS,CSS是Cascading Style Sheets的缩写， 中文译作层叠样式表（简称为样式表），是W3C组织制定的，用于控制网页样式的一种标记性语言。,CSS样式表应用到XHTML的几种方式,内部样式表 用嵌入到HTML文件头部 说明： 内部样式表必须定义在 和之间； 页面所有样式都可以写在和之间。,CSS样式表应用到XHTML的几种

17、方式,引用外部样式表（常用）前提需要创建一个CSS文件 链接方式：在HTML文件头部利用 说明： rel=“stylesheet”指这个link和其href之间的关联样式为样式表文件。 type= text/css指文件类型是样式表文本。 导入方式：在HTML文件头部利用 import url(样式表路径及全称); 说明：import的调用方法也可以写在CSS文件中，用来调用其他的CSS。,CSS样式表应用到XHTML的几种方式,内联样式 (行内样式）：直接写在XHTML标签中，通过style来书写 三种样式表优先级关系：内联样式优先级最高，次之是内部样式表，最低外部样式表,CSS样式语法,C

18、SS样式由两部分组成，分别是选择符和声明。其中声明由属性和属性值组成，所以简单的CSS规则如下：,body, Width:120px; ,选择符,声明,属性,属性值,CSS语法,声明语句必须要包含在号之中； 属性和属性值之间用“:”分隔； 当有多个属性时，用“；”进行区分； 在书写属性时属性之间使用空格、换行等，并不影响属性的显示； 如果一个属性有几个值，则每个属性值之间用空格分隔开。,CSS语法,例如： a font-size:12px; color:#fff; ,声明语句,声明语句,选择符,选择符,选择符部分指定对文档中的哪个元素进行样式定义 选择符的分类 类型选择符 ID选择符 类（cl

19、ass）选择符 群组选择符 包含选择符 伪类选择符,类型选择符,语法：标签名称属性：属性值； 说明： 类型选择符就是网页元素本身，定义时直接使用元素名称，即使用结构中标签名称作为选择符。例如定义段落样式，可以选择p元素名称，即把p作为选择符即可。 所有的页面标签都可以作为类型选择符。 用法：pcolor:#fff,类型选择符,可在以下情况下使用： 如果想改变某个元素的默认样式时，例如去除body默认的边界值。 当统一页面中某个元素的显示效果时，例如对body设置字体样式，或者控制超链接的显示样式、图像去除边框、表单元素统一样式等。 注意：对于div、span等通用结构元素，不建议使用类型选择符

20、，除非有十足的把握。因为它们应用的范围广泛，使用类型选择符会相互干扰，影响效果,Id选择符,语法：#id名属性：属性值； 说明： Id选择符可对元素进行一个ID名称的指派，id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。 在使用ID选择符前我们应先为元素定义一个ID属性。例如： 用法示例 html: CSS: #topfont-size:12px;color:blue;,类（class）选择符,语法：类(class)名属性：属性值； 说明： Class选择符可对同类标签进行不同的样式设定，对不同类的标签进行同样的样式设置 类选择符的语法格式是：“.”加上自定义的类名称。 当我们使用

21、类选择符时，应先在XHTML中每个元素定义一个类属性，如 用法：,CSS: .txtfont-size:12px;color:blue;,html: 1111 222 333,Id选择符与class选择符的区别,Class选择符在CSS中定义时前面加.号，而id选择符定义时在前面加#号 两者在XHTML中定义时不同，一个用ID属性，一个用CLASS属性。 两者在应用范围上不一样，ID选择符是唯一的，CLASS可重复使用。 两者的优先级也不同，在同等条件下，ID选择符比CLASS选择符具有更大的优先权。,CSS命名规范,Web前端开发工程师应遵循以下命名规范： 语义化命名 当对元素进行ID命名时

22、，最自然的做法就是使用可以描述元素所在位置的语义词汇来对其命名，例如： Id=“left-side” id=“center-column” id=“right-column” 当定义类名时，常用样式的语义化方法来描述名称，即根据类被定义的样式来概括描述命名。这方法语义化命名方法就显得有优势，例如： 使用颜色名称或16进制代码命名颜色 .bluecolor:blue .f00color:# .abc123color:#abc123 使用“font+字体大小”组合方法命名 Font12font-size:12px; .f14font-size:14px 使用英文名称或简称来命名 .floatlef

23、tfloat:left .frfloat:right,CSS命名方法,结构化命名 根据文档结构来命名，可能过简单更新来实现对CSS声明名称的重用，从而高效利用不同的样式，例： Id=“main-nav” id=“sub-bar” id=“main-content” 以上3个名称都是根据文档结构进行命名的，分别表示主导航、次导航和主要内容块。这些名称都是根据元素在页面中的结构进行命名，这样设计师在看样式时能清楚的知道对应的哪个模块。 通常我们在命名时，综合利用语义化和结构化命名方法。,CSS常用名称,布局常用名称表 模块常用名称表 类常用名称表 导航常用名称表 文件常用名称表,包含选择符,语法：

24、选择符1 选择符2 属性：属性值； 对某个对象的子对象进行样式指定，例如：,p afont-size:12px;color:blue;,包含选择符指选择符组合中前一标签包含后一个标签，标签之间用空格空开。 要注意的是，指派的样式仅对有些结构的标签有效。 利用包含选择符的好处：可以避免过多的使用class及id的设置，并且直接对 所需要设置的元素进行了样式设置。包含选择符除了可以二者包含，也可以多 级包含。,群组选择符,语法： 选择符1，选择符2，选择符3属性：属性值； 对一组元素进行相同的样式指定，例如：,h1,h2,h3,pfont-size:12px;color:blue;,使用逗号对选择

25、符进行分离，对页面中使用相同样式的地方只需书写一次 样式表即可，可减少代码量，改善CSS代码的结构。,Css属性（文本）,龙湖新闻内容页，新闻版块,CSS属性-字体,字体属性 font-size字体大小属性：可设置字体的大小，常用单位是px。例：bodyfont-size:12px; font-family字体名称属性:可设置字体的名称，例如：.navfont-family:Tahoma,Helvetica,Arial,sans-serif “宋体”; font-style字体风格属性：设置字体是否倾斜;有三个属性值（normal/italic/oblique）分别为正常/斜体 font-we

26、ight字体加粗属性:属性值有两种（100-900/bold/） font属性 ：是各种字体属性的一种快捷综合写法。,CSS属性-文本,文本属性 文本对齐属性（text-align）:设定文本对齐方式。值有：left/right/center/justify 文本修饰属性（text-decoration）:设定文本划线的属性。值有：none/underline/overline/line-through 文本缩进属性（text-indent）:设定文本首行缩进。值为数值，常用单位有px/em 行高属性(line-height):设定行距。值为数值或倍数 字间距属性(letter-spacing

27、):设定文本字间距。 单词间距属性（word-spacing） 颜色属性（color）:值为16进制颜色值或颜色的英文名称,CSS属性,CSS属性-布局,宽度属性（width）:值为数值，单位为px/% 高度属性（height）:值为数值，单位为px/%,CSS属性-背景,背景色属性(background-color)：为元素设定背景色 背景图属性(background-image):为元素设定背景图。写法： .navbackground-image:url(背景图片的地址及全称) 背景重复属性（background-repeat):和背景图搭配使用，设置背景图是否平铺，值有：repeat-x

28、/repeat-y/no-repeat 背景附着属性（background-attachment）:和背景图搭配使用，设定图片是否跟随内容滚动。值：scroll/fixed 背景定位属性（background-position）:和背景图搭配使用，设定背景图片显示的位置。 背景属性(background):背景属性的综合属性。 语法：background:背景颜色 背景图像 背景位置 背景重复 背景附着 例如：background:#f00 url(img/tu.jpg) right no-repeat fixed,CSS属性-边框,边框风格属性(border-style):设定边框风格，值有

29、:none（无）/solid(实线)/dotted(点划线)/dashed（线段） 边框宽度属性(border-width):设定边框宽度，数值，单位为px 边框颜色属性(border-color):设定边框色 边框属性(border):是边框属性的综合应用。 语法：border:边框宽度 边框风格 边框颜色 例如：border:5px solid #f00,CSS属性-边距（外补丁、外边距）,边距属性（margin）:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。 属性值的4种方式： 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 一个值：四个方向,CS

30、S属性-填充（内间距内补丁、内边距）,间距属性（padding）:设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 属性值的4种方式： 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 一个值：四个方向,DIV+CSS的重点知识-盒子模型,XHTML+CSS布局页面中的核心！它规定了网页元素如何显示及元素间相互关系。 什么是盒子模型：CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景。网页中的大部分对象，实际呈现形式都是一个个盒子形状对象 ，页面都是由一个个盒子形状的区域拼合而成的。盒模型关系到网页设计中排版、布局、定位等

31、操作，任何元素都必须遵循盒模型规则。,header,footer,mainbody,sidebar,mainbody,banner,left,right,盒子模型-构成,包括 margin Border Padding content (内容) background,内容区,Padding-top,Padding-bottom,Padding-left,Padding-right,border-top,border-right,border-left,border-bottom,margin-top,marginr-right,margin-bottom,margin-left,盒子模型-尺寸

32、,盒子的实际大小（公式）： 宽 =左右margin+左右border+左右padding+width 高 =上下margin+上下border+上下padding+height 例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px 宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px 高=margin*2 + border*2 + padding*2 + content.height

33、= 20*2 + 1*2 +10*2 + 50 = 112px,盒模型的补充,Margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。 Margin可以定义负值，但border和padding不支持负值。 Margin、border、和padding都是可选的，它们默认值为0。我们可以单独定义一边或统一定义盒子四边的属性值。 如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。 每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。盒子的大小并不总是内容区域的大小。 浏览器窗口是所有元素

34、的根元素，也就是说html是最大的盒子，也有浏览器把body看作是最大的盒子。,盒模型的类型-block块状inline内联、可变元素（元素的分类）,Block块状元素：块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行。常见的块状元素有：div ul li h1-h6 p ol Inline内联元素（行内元素）：内联元素也呈矩形形状，它的高和宽由它的内容所确定，定义它的width和height属性无效。多个内联元素可以同一行显示。常见的内联元素有：a img br strong em span,盒模型的类型-块状与内联的相互转换,盒子模型可通过display属性来改变

35、默认的显示类型 Display 属性共有18个属性值；详细如下： Block块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。 inline内联显示，在元素后面删除换行符，多个 元素可以在一行内并列显示。 Inline-block内联显示，介是元素的内容以块状显示，行内的其他元素显示在同一行。 *当元素设置了float属性后，就相当于给该元素加了display:block;属性；,6布局模型,布局模型与盒模型一样是CSS最基本、最核心的概念。但布局模型是建立在盒模型基础上 布局模型的类型： Flow Model(流动模型) Layer Model（层模型） Float Mo

36、del（浮动模型）,布局模型：Flow Model(流动模型),流动模型是HTML默认的布局模型 所谓流动，就如同流水一样，元素本身是被动的，它随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流的分布位置，所以这种布局模式是种被动的模式。 优点：元素之间不会存在错位、覆盖等问题，布局简单，符合人的浏览习惯。 缺点：制作都不能用单纯的布局模型设计出更艺术化的网页页面效果图。,布局模型：Flow Model(流动模型),任何没有具体定义position及float的元素都将默认呈现流动布局模式。 典型的特征： 块状元

37、素都会在所处的包含元素内自上而下按顺序垂直延伸分布。默认情况下，块状元素的宽度都为100%。块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管我们把元素的宽度设多窄。 内联元素都会在所处的包含元素内从左到右水平分布显示。有人所这种分布方式称为文本流，文本流源于文本的从左向右自然流动。超出一行后，会自动从上而下换行显示。然后继续从左到发顺序流动。,布局模型：Float Model(浮动模型),浮动模型完全不同于流动的另一种布局模型，它遵循浮动规则，但仍能看到流动对它的潜在影响。任何的元素都可以通过float来定义浮动。 特征： 任何定义为float的元素都会自动被设置为一个块

38、状元素显示，相当于被定义了一个display:block;声明。这样就可以为浮动元素定义width和height属性，即使是内联元素。通常建议如果用户定义元素的float属性，必须定义元素的宽度，如果当我们没有指定浮动元素的宽度时，浮动元素会自动收缩到能够包含内容的宽度。,布局模型：Float Model(浮动模型),浮动模型不会与流动模型发生冲突。当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，但是在水平方向上，它的浮向连会尽可能地靠近它的包含元素边框。 与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。这和层布局模型不同。,布局模型： Float Mo

39、del(浮动模型),清除浮动 浮动的自由性也给布局带来了很多麻烦，CSS为此又增加了clear属性，它在一定程度上控制浮动布局中出现的混乱现象。Clear属性值包括： Left清除左浮动 Right清除右浮动 Both清除左右浮动 None默认值，不清除浮动。,布局模型： Float Model(浮动模型),清除浮动 浮动与流动嵌套 把浮动元素嵌入流动元素之内，此时包含元素将根据自身属性进行显示，不再受子浮动元素的影响，也就是说父级元素不能够自适应子浮动元素的高度。 解决上述问题的有很多种方法，我们可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素。,7布局模型：L

40、ayer Model(层模型),层布局模型源于图形图像编辑器中的非常流行的图层编辑功能，为了支持层布局模型，CSS定义了一组定位（position）属性。通过对元素进行定位，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来的位置，或者是最近的包含块元素，或者是相对浏览器窗口。,布局模型：Layer Model(层模型),定位类型： Static不定位（默认） Fixed固定定位，固定在视图窗口中，IE不支持 Absolute绝对定位，将元素从文档流中拖出来，然使用leftrighttopbottom属性对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素，

41、则相对于body元素，即根据浏览器窗口。 Relative相对定位，它通过leftrighttopbottom属性对于其原位置进行定位，原位置还保留不变。,布局模型：Layer Model(层模型),定位的实现方法： 先对其最近的父级元素进行相对定位，然后设置该元素为绝对定位属性，最后通过leftrighttopbottom来相对定位。 层叠等级 使用层布局的另一个好是实现元素之间的重叠显示。在CSS中可以通过z-index来确定定位元素的层叠等级。 Z-index只有在元素position属性取值为relativeabsolutefixed时才有用。 Z-index属性值越大，层叠级别越高。

42、 Z-index属性受到HTML代码的等级的制约，在不同的父级元素中的子元素设置z-index并不能正常的显示。,8表单,表单： 表单是网页中最常用的对象之一，它主要负责把用户的信息传递给服务器，实现数据的动态交互。它在网页中起着重要的作用，它是与用户交互信息的主要手段。完整的表单包含三个组成部分： 表单域：包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。 表单控件（对象、元素）:包含了文本框、密码框、隐藏、多行文本框（文本域）、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。 提示信息：同时一个表彰中还应该添加一些说明性文字，提示用户填写操作。,8表

43、单域,Form：用于定义采集数据的范围，即设定表单的起止位置，并指定处理表单数据程序的url地址，其基本语法结构如下： 表单内容 Action:用于设定表单数据文件的URL的地址，这个文件通常是一个后台程序或是一个电子邮件地址。 Method:指定数据传递到服务器的方式。 Name：用于设定表单名称，便于其他地方引用表单的值。,8表单控件（元素）,文本框： 密码框： 提交按钮： 复位按钮： 普通按钮： 图像域： 隐藏域： 文件域： 下拉列表（菜单）： 选项1 选项2 选项3 文本域： ,单选按钮： 复选框：,8表单提示信息,提示信息标签 提示文字 例如： 用户名 ,表格,表格的语法： Tabl

44、e表格标签 Tr行标签 Td单元格标签,表格,XHMTL属性： Rowspan按行合并单元格 Colspan按列合并单元格 CSS属性 border-collapse :collapse设置表格行和单元格的边合并显示,滑动门技术,通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果与CSS布局的高效扩展性。 什么是滑动门 是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果。,CSS Sprites(图片整合技术),将导航背景图片，图片按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图，然后用background-posit

45、ion来实现背景图片的定位的技术,CSS Sprites(图片整合技术),优势：通过整合图片，减少对服务器的请求数量，从而加快页面加载速度,CSS Sprites(图片整合技术),实现方法： 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置，给 背景定位。background-position:-8px -95px;,Background-position,默认值：0% 0% 有三种设置值的方法 通过方向来设置： top left top center top right center left center center center right bottom left bo

46、ttom center bottom right 注意事项：第一个值为垂直方向，第二个值为水平方向。如果您仅规定了一个关键词，那么第二个值将是center。,Background-position,百分比值：x% y% 注意事项： 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。,Background-position,像值：xpos ypos （数值）单位是像素 注意事项： 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。（中心位置） 如果仅规定了一个值，另一个值将是50%。 可以混合使用

47、 % 和 数值 。,CSS Sprites(图片整合技术),案例： 使用的背景图片,CSS权重,4位的数字来表示权重,权重的表达方式：如0,0,0,0 类型选择符的权重为：0001 类(CLASS)选择符的权重为：0010 ID选择符的权重为：0100 子选择符的权重为：0000 属性选择符的权重为：0010 伪类选择符的权重为：0010 伪元素选择符的权重为：0010 包含选择符的权重为：包含的选择符权重值之和 内联样式的权重为：1000 继承的样式的权重为：0000,CSS权重,例： pcolor:red /*权重为:0001*/ paligncolor:blue /*权重为:0010*/ .vipcolor:green /*权重为:0010*/ #myidcolor:purple /*权重为:0100*/,网页中应用透明背景图,透明图片的格式：GIF PNG(18/24) Png24支持半透明 filter:p