网页设计与制作教程第5版作者刘瑞新第5章Div+CSS布局技术课件.pptVIP

网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案 * * 5.1 Div布局理念 5.2 CSS盒模型 5.3 盒子的定位 5.4 盒子的浮动 5.5 CSS常用布局样式 5.6 实训——什锦果园水果沙拉页面的布局 第5章 Div+CSS布局技术 5.1.1 Div布局页面的优点 传统的HTML标签中，既有控制结构的标签（如title标签和p标签），又有控制表现的标签（如font标签和b标签），还有本意用于结构后来被滥用于控制表现的标签（如h1标签和table标签）。页面的整个结构标签与表现标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是它是一种块级元素，更容易被CSS代码控制样式。 5.1 Div布局理念 5.1.2 使用嵌套的Div实现页面排版 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【演练 5-1】未嵌套的Div容器. 【演练 5-2】嵌套的Div容器 。 5.1 Div布局理念 5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图5-3所示。对象的尺寸与边框等样式表属性的关系，如图