DIV+CSS布局经典

1、DIV+CSS布局布局基础基础经典经典 什么是什么是DIVv DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。v 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。v DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码v 注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，aabbcc的结果是不确定的。vDIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式这些都是用这些都是用div 做出来的做出来的SPAN标签标签vSPAN的用法与DIV一样 这

2、是DIV标记 这是SPAN标记vDIV与SPAN的区别 DIV是块元素，使用会产生分行 SPAN是一个行内元素，使用不会产生分行盒子模型盒子模型v每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离叫做填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 CSS CSS（Cascading Style SheetCascading Style Sheet），中文译为层叠样式表。是用于），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一

3、种标记性语言。控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！v 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度更良好的用户体验2.2.1 CSS语法基础语法基础S 何为何为CSSCSS（Cascading Style SheetCascading Style Sheet）？）？ CSS中文译为表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。 即即: :告诉浏览器，这段样式将应用到哪个对象告诉浏览器，这段样式将应用到哪个对象.CSSCSS语法结构

4、语法结构: 选择符 属性1:值1； 属性2:值2 举例：body font-size:12px; text-align:center;参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开2.2.2 CSS选择器（符）选择器（符）：指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body p h1 等等.）：属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。 特点特点：在文档中允许被重复使用：属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中

5、用id=“”为相应标签指派样式，可理解为一个标识特点：特点：在网页中，每个id名称只能使用一次2.2.3 选择器的声明选择器的声明body,td,th,#header,.onecolor:blue;font-size:12px;:并列关系P h1color:blue;font-size:14px;:从属关系P H1,#header ulcolor:blue;font-size:12px;:并列及从属关系2.2.4 如何应用如何应用CSS到网页中到网页中 行内样式表 内部（内嵌）样式表 外部（链接）样式表 导入式样式表CSS编码可以多种方式灵活地应用到我们所设计HTML页面之中，选择方式可根据我

6、们对设计的不同表现手段来制定，一般按CSS代码位置分为：2.2.5 实例代码实例代码:CSS按位置的分类按位置的分类测试页 头部 主体 尾部 在之间加入 import url(css/style2.css); 称为：导入式样式表4.0 一个简单的一个简单的CSS布局实例布局实例网页制作流程： 设计出效果图切图布局（DIV+CSS、table 嵌入动态程序或模板标签测试发布边缘边缘vmargin(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左 例如，margin:2em 4em、margin-left:-200

7、pxvpadding(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左 布局布局vdisplay 设置值：block、inline、list-item、nonevfloat 设置值：left、right、nonevclear 设置值：left、right、none、bothvoverflow 设置值：visible、hidden、scroll、auto 位置位置v位置属性就是指定元素的位置，网页元素在游览器文档窗口中的位置。 position设置值：absolute、rela

8、tive、staticCSS排版排版-DIV分块分块设计设计DIV块位置块位置5.2 5.2 使用CSS样式表v5.2.1 CSS5.2.1 CSS样式表概述样式表概述 1、样式表的使用样式表的使用 CSSCSS样式表的使用常用的方法有以下两种：样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在页面内嵌法。将样式表代码直接写在HTMLHTML标签的标签的headhead区。区。 外部链接法。将样式表写在一个独立的后缀名为外部链接法。将样式表写在一个独立的后缀名为CSSCSS文件中，在需要应文件中，在需要应用用CSSCSS样式的网页中链接该文件，在页面样式的网页中链接该文件，在

9、页面和和之间用以下代码之间用以下代码调用。调用。5.2 5.2 使用CSS样式表2 2、CSSCSS样式表语法样式表语法选择符选择符 属性属性1 1：值：值1 1；属性；属性2 2：值：值2 2 参数说明：参数说明： 属性和属性值之间用冒号属性和属性值之间用冒号(:)(:)隔开，隔开，如如color:red;color:red;定义多个属性时，属性定义多个属性时，属性之间用分号之间用分号(;)(;)隔开。隔开。5.3.6 CSS5.3.6 CSS样式进阶样式进阶利用利用CSSCSSDIVDIV进行网页布局的实例进行网页布局的实例 利用利用CSSCSS样式还可以代替表格进行网页布局，本小节讲解样

10、式还可以代替表格进行网页布局，本小节讲解【例【例5.55.5】如何利用】如何利用DIVDIV标签和标签和CSSCSS样式的定义进行网页的排版。样式的定义进行网页的排版。制作过程如下：制作过程如下：1 1、分析架构，如图所示。、分析架构，如图所示。2 2、模块拆分、模块拆分 一个总的一个总的DIVDIV标签，它包含了标签，它包含了4 4个个DIVDIV标签。标签。ContainerContainer最大的容器，将所有内容包最大的容器，将所有内容包含在内。含在内。WidthWidth：778px778px。HeaderHeader网站头部图标，包含了一幅广告横幅，网站头部图标，包含了一幅广告横幅，WidthWidth：778px778px，Height110pxHeight110px。LeftnavLeftnav左侧导航条，左侧导航条，WidthWidth：200200，浮动为左对齐。，浮动为左对齐。ContentContent网站的主要内容。网站的主要内容。 Width: 480pxWidth: 480px